我的gulp第一个程序

我的gulp第一个程序

以前都是单枪匹马的干,从没用过模块化的打包工具,加入新的团队后,模块化开发学到不少,尤其是工具的使用。团队目前较多的使用gulp,也是最流行的一款前端打包工具。最近Team开始尝试用gulp,我也只是使用者,还没详细的看其实现原理等,属于小白。

今天就来把玩把玩建立自己的第一个gulp程序。

gulp和grunt一样是基于node,使用它们的前提是已经安装了node.js,具体安装过程可以百度一下,下面介绍我的第一个gulp程序创建过程:

1、在电脑某个盘中新建一个文件夹,比如gulp_test;

2、打开该文件夹,ctrl+shift打开命令窗口,输入:npm install gulp,马上可以看到gulp的下载。

3、继续安装插件gulp-htmlmin,从名字也可以看出是用来压缩hml的。

4、在gulp_test(你新建的文件夹名)中创建一个新的文件下比如src,用来放置你的资源文件。

5、在src中新建一个html,html内容随意。比如:

 

<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> </head> <body> <h2>写在前面</h2> <p>本来是想写个如何编写gulp插件的科普文的,突然探究欲又发作了,于是就有了这篇东西。。。翻了下源码看了下<code>gulp.src()</code>的实现,不禁由衷感慨:肿么这么复杂。。。</p> <h2>进入正题</h2> <p>首先我们看下<code>gulpfile</code>里面的内容是长什么样子的,很有express中间件的味道是不是~<br />我们知道<code>.pipe()</code>是典型的流式操作的API。很自然的,我们会想到<code>gulp.src()</code>这个API返回的应该是个Stream对象(也许经过层层封装)。本着一探究竟的目的,花了点时间把gulp的源码大致扫了下,终于找到了答案。</p> <p>gulpfile.js</p> <h2>提前剧透</h2> <p>此处有内容剧透,如有对剧透不适者,请自行跳过本段落。。。</p> <blockquote> <p>gulp.src() 的确返回了定制化的Stream对象。可以在github上搜索<code>ordered-read-streams</code>这个项目。</p> <p>大致关系是:<br />ordered-read-streams --> glob-stream --> vinyl-fs --> gulp.src()</p> </blockquote> <h2>探究之路</h2> <p>首先,我们看下<code>require('gulp')</code>返回了什么。从gulp的源码来看,返回了<code>Gulp</code>对象,该对象上有<code>src</code><code>pipe</code><code>dest</code>等方法。很好,找到了我们想要的<code>src</code>方法。接着往下看<br />参考:<a href="https://github.com/gulpjs/gulp/blob/master/index.js#L62" target="_blank">https://github.com/gulpjs/gulp/blob/master/index.js#L62</a></p> <p>gulp/index.js</p> <pre class="hljs-dark"><code class="hljs js"><span class="hljs-keyword">var inst = <span class="hljs-keyword">new Gulp(); <span class="hljs-built_in">module.exports = inst; </span></span></span></code></pre> <p>从下面的代码可以看到,<code>gulp.src</code>方法,实际上是<code>vfs.src</code>。继续<br />参考:<a href="https://github.com/gulpjs/gulp/blob/master/index.js#L25" target="_blank">https://github.com/gulpjs/gulp/blob/master/index.js#L25</a></p> <p>gulp/index.js</p> <pre class="hljs-dark"><code class="hljs js"><span class="hljs-keyword">var vfs = <span class="hljs-built_in">require(<span class="hljs-string">'vinyl-fs'); <span class="hljs-comment">// 省略很多行代码 Gulp.prototype.src = vfs.src; </span></span></span></span></code></pre> <p>接下来我们看下<code>vfs.src</code>这个方法。从<code>vinyl-fs/index.js</code>可以看到,<code>vfs.src</code>实际是<code>vinyl-fs/lib/src/index.js</code><br />参考:<a href="https://github.com/wearefractal/vinyl-fs/blob/master/index.js" target="_blank">https://github.com/wearefractal/vinyl-fs/blob/master/index.js</a></p> <p>vinyl-fs/index.js</p> <pre class="hljs-dark"><code class="hljs js"><span class="hljs-pi">'use strict'; <span class="hljs-built_in">module.exports = { src: <span class="hljs-built_in">require(<span class="hljs-string">'./lib/src'), dest: <span class="hljs-built_in">require(<span class="hljs-string">'./lib/dest'), watch: <span class="hljs-built_in">require(<span class="hljs-string">'glob-watcher') }; </span></span></span></span></span></span></span></span></code></pre> <p>那么,我们看下<code>vinyl-fs/lib/src/index.js</code>。可以看到,<code>gulp.src()</code>返回的,实际是<code>outputStream</code>这货,而<code>outputStream</code><code>gs.create(glob, options).pipe()</code>获得的,差不多接近真相了,还有几步而已。<br />参考:<a href="https://github.com/wearefractal/vinyl-fs/blob/master/lib/src/index.js#L37" target="_blank">https://github.com/wearefractal/vinyl-fs/blob/master/lib/src/index.js#L37</a></p> <p>参考:<a href="https://github.com/armed/ordered-read-streams/blob/master/index.js" target="_blank">https://github.com/armed/ordered-read-streams/blob/master/index.js</a></p> <h2>写在后面</h2> <p>兜兜转转一大圈,终于找到了<code>gulp.src()</code>的源头,大致流程如下,算是蛮深的层级。代码细节神马的,有兴趣的同学可以深究一下。</p> <blockquote> <p>ordered-read-streams --> glob-stream --> vinyl-fs --> gulp.src()</p> </blockquote> </body> </html>

6、在gulp_test目录下创建gulpfile.js文件,内容如下:

var gulp = require('gulp'); var htmlmin = require('gulp-htmlmin'); gulp.task('minify', function() { gulp.src('src/*.html') .pipe(htmlmin({collapseWhitespace: true})) .pipe(gulp.dest('dist')) }); gulp.task('watch', function () { console.log('这是测试这是测试!') gulp.watch('src/*.html', ['minify']); }); gulp.task('default', ['minify', 'watch']);

7、在src目录下打开命令窗口,运行:gulp,你就能看到程序自动创建了dist文件,其中包含了被压缩后的html文件。

第一个gulp程序就这样搞定了,每次修改完代码后运行gulp就能自动压缩,很方便。

转载于:https://www.cnblogs.com/hutuzhu/p/4288114.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/109548.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • linux ebpf_防火墙拦截dns解析

    linux ebpf_防火墙拦截dns解析自基于Netfilter的iptables取代ipchains之后,Linux防火墙技术貌似一直停留在iptables,虽然近年来nftables被宣称有取代iptables之势,但事实上并无起色。无论是晚期ipchains,还是iptables,或者nftables,其底层基础均是Netfilter,一个精心设计的五点HOOKs框架,在软件意义上,这个设计非常棒,但是涉及到单机性能问题,总是退…

  • VS2013产品密钥

    VS2013产品密钥VS2013试用期结束需要提供产品密钥进行注册,下面将提供几个好用的产品密钥。首先打开VS-&amp;amp;gt;帮助-&amp;amp;gt;注册产品-&amp;amp;gt;输入产品密钥BWG7X-J98B3-W34RT-33B3R-JVYW9(亲测有效)下面几个VS版本楼主未使用过,大家可以使用一下试试。VisualStudioUltimate2013KEY(密钥):BWG7X-J98B3-W34RT-33B3…

  • 2018,我的这一年

    这一年是和自己对话的一年,是矛盾的一年,是抑郁的一年。时间过的很快,2018已经过去很多天了,是时候对过去的这一年进行一个简单的总结了,不管这一年过的如何,在时间的巨轮下,一切都成为过往,成为了生命中的一段经历,若干年后这一段经历或许只剩下一些碎片的回忆,那也没有关系,顺其自然即可! 泰戈尔曾说过:”天空没留下翅膀的痕迹,但我已飞过“。虽然多年之后记忆中很多事情没有了痕迹,但那些事情的确曾经…

  • 在安装twincat plc时,出现 there are some files marked for deletion on next reboot.please reboot first then

    在安装twincat plc时,出现 there are some files marked for deletion on next reboot.please reboot first then

  • IDEA插件-热部署:JRebel

    IDEA插件-热部署:JRebelspringboot项目开发过程中通常修改了某分部代码需要重启服务才能生效。通过JRebel插件可以实现热部署,避免了频繁重启服务。

  • linux下修改docker容器RabbitMQ端口映射(修改RabbitMQ默认端口)

    linux下修改docker容器RabbitMQ端口映射(修改RabbitMQ默认端口)1.xshell执行以下命令获取docker容器IDdockerps-a2.修改/var/lib/docker/containers/{容器ID+一些字符串}/hostconfig.json中”PortBindings”:{“容器端口/tcp”:[{“HostIp”:””,”HostPort”:”改成你要改的端口”}]3.修改并上传配置文件后执行以下代码sy…

    2022年10月27日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号