以前都是单枪匹马的干，从没用过模块化的打包工具，加入新的团队后，模块化开发学到不少，尤其是工具的使用。团队目前较多的使用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就能自动压缩，很方便。

我的gulp第一个程序的更多相关文章

  1. Android开发-之第一个程序：HelloWorld！

    小编觉得不管学习什么编程的时候,第一个程序都是要求打印输出一个"HelloWorld!",那就从最简单的HelloWorld开始吧!哈哈~~~~ 一.创建一个Android工程 1 ...

  2. [Fluent NHibernate]第一个程序

    目录 写在前面 Fluent Nhibernate简介 基本配置 总结 写在前面 在耗时两月,NHibernate系列出炉这篇文章中,很多园友说了Fluent Nhibernate的东东,也激起我的兴 ...

  3. rails再体验（第一个程序）

    掌握redmine plugin开发的目标在2016年未实现,2017年继续. 选择<Ruby on Rails Tutorial>教程,windows安装railsinstaller,该 ...

  4. OpenGL学习笔记1——第一个程序

    学习的参考书基本是按照GL编程指南,如果有消息机制概念,对于GLUT的理解是很自然的.下面就按照自己写的第一个程序详细解释一下GL,还是比较容易上手的. 程序实现的功能是,根据当前随即种子摇出来的结果 ...

  5. Android 第一个程序 及 环境搭配

    一. JDK配置 1.找到jdk安装路径 2.配置环境变量(建议配置在系统变量里面) 1).配置JAVA_HOME变量 2).配置 CLASSPATH 环境变量 CLASSPATH=.;%JAVA_H ...

  6. unix 网路编程（卷一）第一个程序编译过程

    unix卷一去年暑假买的到现在才开始看无比惭愧,而且惭愧第一个程序就断断续续弄了几天,要好好写程序了,马上要找工作了,下面介绍下把本书第一个程序跑起来的过程: 搜各种博客 我用系统的是ubuntu 1 ...

  7. Hadoop学习历程（三、第一个程序）

    根据之前的操作,我们已经可以正常的启动Hadoop了,关于真正的集群我会在之后进行说明.现在我们来看一下第一个程序吧 1. 在eclipse上建立一个java项目 2. 将 /usr/hadoop/s ...

  8. Python2.7.3 学习——第一个程序 Hello Python World

    Hello World 每学一门语言开始的第一程序都是Hello World ,当然了Python也不例外,下面开始我们的Python第一个程序编写: 1,命令行: (1)打开终端,输入python, ...

  9. 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld

    记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...

随机推荐

  1. P4097 [HEOI2013]Segment 李超线段树

    $ \color{#0066ff}{ 题目描述 }$ 要求在平面直角坐标系下维护两个操作: 在平面上加入一条线段.记第 i 条被插入的线段的标号为 i 给定一个数 k,询问与直线 x = k 相交的线 ...

  2. leetcode-766-Toeplitz Matrix（每一条对角线元素的比较）

    题目描述: A matrix is Toeplitz if every diagonal from top-left to bottom-right has the same element. Now ...

  3. 题目1018：统计同成绩学生人数（hash简单应用）

    问题来源 http://ac.jobdu.com/problem.php?pid=1018 问题描述 给你n位同学的成绩,问获得某一成绩的学生有多少位. 问题分析 初见此题,有人会想到先将所有成绩存入 ...

  4. python学习，day3：集合的学习

    集合天生去重,另外集合非常便于两组数字的取交集,并集等计算 # coding=utf-8 # Author: RyAn Bi list_1 =[1,2,3,4,5,6,7] list_1 =set(l ...

  5. 九校联考（DL24凉心模拟） 整除（中国剩余定理＋原根性质）

    题意简述 给定 \(n, m\),求 \(n|x^m - x\) 在满足 \(x \in [1, n]\) 时合法的 \(x\) 的数量.答案模 \(998244353\).单个测试点包含多组数据. ...

  6. ZOJ - 3649 树上倍增

    题意:给出一个图,先求出最大生成树,然后多次询问树上路径\(u→v\)的有向最大极差\(max(a_i-a_j),i>j\),其中\(i\)和\(j\)指代节点在路径中出现的顺序 极差具有单调性 ...

  7. Codeforces - 规律题 [占坑]

    发现自己容易被卡水题,需要强行苟一下规律题 CF上并没有对应的tag,所以本题集大部分对应百毒搜索按顺序刷 本题集侧重于找规律的过程(不然做这些垃圾题有什么用) Codeforces - 1008C ...

  8. 基于iTop4412的FM收音机系统设计(一)

    说明:第一版架构为:APP+JNI(NDK)+Driver(linux),优点是开发简单,周期短,也作为自己的毕业设计 现在更新第二版,FM服务完全植入Android系统中,成为系统服务,架构为:AP ...

  9. koa的中间件compose

    用到的知识点: 1.bind函数 2.函数递归调用自身 3.promise 'use strict' /** * Expose compositor. */ module.exports = comp ...

  10. Java中String与Date格式之间的转换

    转自:https://blog.csdn.net/angus_17/article/details/7656631 经常遇到string和date之间的转换,把相关的内容总结在这里吧: 1.strin ...