gulp

by 夏泽民 Dec 29, 2019

gulp是基于Nodejs的自动任务运行器。
她能自动化地完成 javascript、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。
她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
gulp主要用到node中的两个模块，fileSystem和stream，文件系统可以对文件进行操作，比如读取文件、写入文件、创建文件、修改文件名、删除文件等；而数据流主要分为读取流、写入流和双工流；这里还有一个管道pipe的概念，管道可以使文件对象从一个流安全的流入到另一个流。
gulp就是先创建一个读取流、一个写入流，在创建若干个双工流，对双工流进行数据的处理，比如去空字符，然后通过管道将读取流、不同功能的双工流、写入流依次连接起来，从而实现对文件的操作处理

1.gulp是什么？
前端构建工具，gulp是基于Nodejs，自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。流，Node将几乎所有IO操作都抽象成了stream的操作，简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。

2.特点压缩资源文件，实页面响应速度提升。自动构建。
性能优化
我们都知道浏览器请求的文件越多越耗时，请求的文件越大越耗时，尤其是在我们现在很多使用前端MVC, MVVM框架的时候，我们为了前端代码更清晰，结构更合理，我们就由很多JS文件，无疑又拖慢了网页的速度。为了解决这个问题，因此我们需要做两件事

文件合并
浏览器需要下载多个JS文件，而浏览器是有并发限制，也就是同时并发只能下载几个文件，假如浏览器并发数是5，你有20个JS文件，而每5个需要2S, 那么你光下载JS文件都需要8S，那么网页的性能可想而知，所以我们需要合并多个文件以减少文件的数量。

文件压缩
我们知道文件越大，下载越慢，而针对JavaScript和CSS, 里面的空格，换行这些都是为了让我们读代码时更容易阅读，但是对机器来说，这些对它没有影响，所以为了减少文件大小，一般的情况我们都会用工具去掉空格和换行，有时候我们还会用比较短的变量名(记住这个要让工具最后压缩时做，而源代码一定要保证命名可读性) 来减少文件大小。

而所有的前端构建工具都具有文件合并和压缩的功能。

效率提升
Vendor前缀
在CSS3使用越来越多的时候，我们都知道一些CSS的特性，不同的浏览器CSS有不同的前缀，如果我们手工添加将会很繁琐，而如果使用构建工具，很多构建工具可以自动给我添加CSS的Vendor前缀

单元测试
JavaScript的单元测试在使用MVC或者MVVM的框架后，变得越来越容易，而单元测试是质量保证的一个很重要的手段，所以在提交之前，使用构建工具自动跑一遍我们的单元测试是非常重要的

代码分析
我们写的JavaScript很多时候会有一些潜在的bug, 比如忘了添加分号，某个变量没有等等，使用一些JavaScript的代码分析工具，可以很好的帮我们检查一些常见的问题。

HTML引用JavaScript或者CSS文件
比如我们需要使用Bower之类来引用前端JavaScript和CSS的第三方库，那么如果版本升级，添加移除等都用手工来修改HTML的话，第一比较耗时，第二比较容易疏漏，尤其是在我们需要切换Debug和production版本时将会有很多额外的工作，那么使用前端构建工具可以很好的解决这些问题。

3.gulp安装
首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp：

npm install -g gulp
全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：

npm install gulp
如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上–save-dev：

npm install –save-dev gulp
这样就完成了gulp的安装，接下来就可以在项目中应用gulp了。

4.gulp的使用
1、建立gulpfile.js文件

gulp也需要一个文件作为它的主文件，在gulp中这个文件叫做gulpfile.js。新建一个文件名为gulpfile.js的文件，然后放到你的项目目录中。之后要做的事情就是在gulpfile.js文件中定义我们的任务了。下面是一个最简单的gulpfile.js文件内容示例，它定义了一个默认的任务。

var gulp = require(‘gulp’);
gulp.task(‘default’,function(){
console.log(‘hello world’);
});

2 运行gulp任务

要运行gulp任务，只需切换到存放gulpfile.js文件的目录(windows平台请使用cmd或者Power Shell等工具)，然后在命令行中执行gulp命令就行了，gulp后面可以加上要执行的任务名，例如gulp task1，如果没有指定任务名，则会执行任务名为default的默认任务。

3.src：获取流

gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。其语法为：
1
2
3
4
5
6
7
gulp.src(globs[, options]);
globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组;类型为String或 Array。当有多种匹配模式时可以使用数组

//使用数组的方式来匹配多种文件
gulp.src([‘js/.js’,’css/.css’,’*.html’])
options为可选参数。以下为options的选项参数:

options.buffer

类型： Boolean 默认值： true

如果该项被设置为 false，那么将会以 stream 方式返回 file.contents 而不是文件 buffer 的形式。这在处理一些大文件的时候将会很有用。

注意：插件可能并不会实现对 stream 的支持。
1
options.read

类型： Boolean 默认值： true

如果该项被设置为 false，那么 file.contents 会返回空值（null），也就是并不会去读取文件。

options.base

类型： String ，设置输出路径以某个路径的某个组成部分为基础向后拼接。

如, 请想像一下在一个路径为 client/js/somedir 的目录中，有一个文件叫 somefile.js ：

gulp.src(‘client/js/*/.js’) // 匹配 ‘client/js/somedir/somefile.js’ 现在 base 的值为 client/js/
.pipe(minify())
.pipe(gulp.dest(‘build’)); // 写入 ‘build/somedir/somefile.js’ 将client/js/替换为build

gulp.src(‘client/js/*/.js’, { base: ‘client’ }) // base 的值为 ‘client’
.pipe(minify())
.pipe(gulp.dest(‘build’)); // 写入 ‘build/js/somedir/somefile.js’ 将client替换为build

4.dest：写文件

gulp.dest()方法是用来写文件的，其语法为：
gulp.dest(path[,options])
path为写入文件的路径；

options为一个可选的参数对象，以下为选项参数：

options.cwd

类型： String 默认值： process.cwd()

输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效。

options.mode

类型： String 默认值： 0777

八进制权限字符，用以定义所有在输出目录中所创建的目录的权限。

var gulp = require(‘gulp’);
gulp.src(‘script/jquery.js’)　 // 获取流
.pipe(gulp.dest(‘dist/foo.js’)); // 写放文件
下面再说说生成的文件路径与我们给gulp.dest()方法传入的路径参数之间的关系。　gulp.dest(path)生成的文件路径是我们传入的path参数后面再加上gulp.src()中有通配符开始出现的那部分路径。例如：

var gulp = reruire(‘gulp’);
//有通配符开始出现的那部分路径为 /.js
gulp.src(‘script//.js’)
.pipe(gulp.dest(‘dist’)); //最后生成的文件路径为 dist/**/.js
//如果 **/.js 匹配到的文件为 jquery/jquery.js ,则生成的文件路径为 dist/jquery/jquery.js

用gulp.dest()把文件流写入文件后，文件流仍然可以继续使用。

5.watch：监听文件

gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。其语法为
1
2
3
4
5
gulp.watch(glob[, opts], tasks);
glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。 opts 为一个可选的配置对象，通常不需要用到。 tasks 为文件变化后要执行的任务，为一个数组。

gulp.task(‘uglify’,function(){
//do something
});
gulp.task(‘reload’,function(){
//do something
});
gulp.watch(‘js/*/.js’, [‘uglify’,‘reload’]);

gulp.watch()还有另外一种使用方式：
1
gulp.watch(glob[, opts, cb]);
glob和opts参数与第一种用法相同;

cb参数为一个函数。每当监视的文件发生变化时，就会调用这个函数,并且会给它传入一个对象，该对象包含了文件变化的一些信息，type属性为变化的类型，可以是added,changed,deleted；path属性为发生变化的文件的路径。

gulp.watch(‘js/*/.js’, function(event){
console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变
console.log(event.path); //变化的文件的路径
});

6.task：定义任务

gulp.task方法用来定义任务，其语法为：
1
2
3
gulp.task(name[, deps], fn)
name 为任务名；

deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数；

fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。

当你定义一个简单的任务时，需要传入任务名字和执行函数两个属性。

gulp.task(‘greet’, function () {
console.log(‘Hello world!’);
});
执行gulp greet的结果就是在控制台上打印出“Hello world”。

你也可以定义一个在gulp开始运行时候默认执行的任务，并将这个任务命名为“default”：

gulp.task(‘default’, function () {
// Your default task
});
前面已经介绍了gulp.task的语法，但是当有多个任务时，需要知道怎么来控制任务的执行顺序。

可以通过任务依赖来实现。例如我想要执行one,two,three这三个任务，那我们就可以定义一个空的任务，然后把那三个任务当做这个空的任务的依赖就行了：

//只要执行default任务，就相当于把one,two,three这三个任务执行了
gulp.task(‘default’,[‘one’,‘two’,‘three’]);
如果任务相互之间没有依赖，任务就会按你书写的顺序来执行，如果有依赖的话则会先执行依赖的任务。但是如果某个任务所依赖的任务是异步的，就要注意了，gulp并不会等待那个所依赖的异步任务完成，而是会接着执行后续的任务。例如：

gulp.task(‘one’,function(){
//one是一个异步执行的任务
setTimeout(function(){
console.log(‘one is done’)
},5000);
});

//two任务虽然依赖于one任务,但并不会等到one任务中的异步操作完成后再执行
gulp.task(‘two’,[‘one’],function(){
console.log(‘two is done’);
});

上面的例子中我们执行two任务时，会先执行one任务，但不会去等待one任务中的异步操作完成后再执行two任务，而是紧接着执行two任务。所以two任务会在one任务中的异步操作完成之前就执行了。
1
写自己的gulp任务
1.项目需求

我们将创建一个自己的gulp，具体的需求是通过gulp把我们自己所编写的JS文件合并压缩、CSS文件进行压缩后，并且生成新的文件。我们所需要的插件为：gulp-minify-css gulp-concat gulp-uglify gulp-rename 如下图所示，完成后的项目目录结构：

2.安装插件

根据我们项目的需求，安装所需要的插件，可以通过”npm install 插件名” 来安装插件

然后打开gulpfile.js，将我们所用到的插件引用到我们项目中，代码如下:
1
2
3
4
5
6
7
8
9
var gulp = require(‘gulp’),
minifycss = require(‘gulp-minify-css’), //CSS压缩
concat = require(‘gulp-concat’), // 文件合并
uglify = require(‘gulp-uglify’), //js压缩插件
rename = require(‘gulp-rename’); // 重命名

3.编写任务代码

1.压缩css
1
2
3
gulp.task(‘minifycss’, function() {
return gulp.src(‘src/css/*.css’) //压缩的文件
.pipe(minifycss()) //执行压缩
.pipe(gulp.dest(‘dist/css’)); //输出文件夹
});

2.JS 合并压缩
1
gulp.task(‘minifyjs’, function() {
return gulp.src(‘src/js/*.js’)
.pipe(concat(‘all.js’)) //合并所有js到main.js
.pipe(gulp.dest(‘dist/js’)) //输出main.js到文件夹
.pipe(rename({suffix: ‘.min’})) //rename压缩后的文件名
.pipe(uglify()) //压缩
.pipe(gulp.dest(‘dist/js’)); //输出
});

3.将以上两个任务合并为一个任务
1
gulp.task(‘build’, [‘minifycss’, ‘minifyjs’]);
4.监视文件的变化，自动执行任务

// 监视文件的变化，当文件有更新时执行build任务
gulp.task(‘watch’, function () {
gulp.watch([‘src/js/.js’, ‘src/css/.css’], [‘build’]);
});

5.定义默认任务
gulp.task(‘default’, [‘build’, ‘watch’]);
4.执行任务

在命令行中先转到gulp-demo目录下，就可以输入gulp命令来运行本项目了，刷新gulp-demo目录看看会出现什么结果呢。

Gulp vs Grunt
下面比较一下 Grunt 和 Gulp：

Gulp 和 Grunt 类似。但相比于 Grunt 的频繁的 IO 操作，Gulp 的流操作，能更快地完成构建。

Grunt 是基于dsl 声明式写法，出来的早，但写起来比较恶心，可读性非常差。

nodejs 里 sails 的因为基于 Grunt 被鄙视，ionic 里也是，好在 ionic 现在也是 Gulp 的。

鄙视完 Grunt，就该吹吹 Gulp 了。

话说 2014 年 Gulp 火了之后，很快风头就盖过了 Grunt，好不好，试了才知道。

why Gulp？
前端本身就对 js 非常了解，Gulp 可以说是 plain js，语法都再简单不过，所以大家比较容易接受。

4.1. 基于nodejs
基于 nodejs 的小而美哲学，写 gulp task 是件很愉快的事儿。

而且还可以结合 nodejs 世界里最好的包管理器 npm，写 cli 或者模块特别简单。

而且可以写 c/c++ addon，给你无限可能。

而且还有 shelljs 这样的库，结合 shell，给你无限可能。

4.2. 易于使用
通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。

而且对 ant，rake，make 等了解的人非常容易上手。

4.3. 构建快速
利用 Node.js stream 的威力，你可以快速构建项目并减少频繁的 IO 操作。

而且 Gulp 的核心代码可以高效利用你所有核的 cpu，高效运行，尤其是大文件处理，后面会讲到。

4.4. 插件机制
Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

入门指南
2.1. 安装 Gulp
建议全局安装：
$ npm install —global gulp
但最多的是作为项目的开发依赖（devDependencies）安装：
$ npm install —save-dev gulp

2.2. 创建gulpfile
在项目根目录下创建一个名为 gulpfile.js
的文件：

gulpfile 和 makefile、build.xml 等是类似的，定义 task 的地方。
定义好 task，下面运行一下。
2.3. 运行 Gulp
$ gulp
默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。
想要单独执行特定的任务（task），请输入：
gulp

5.4. 流式处理
比如混淆压缩 js，使用 gulp-uglify 插件：
src 是输入

dest 是输出

pipe 是管道的意思，也是 stream 里核心概念，也就是说：上一个的输出，是下一个的输入。
src 里所有 js，经过处理 1，处理 2，然后压缩变成 min.js,中间的处理 pipe 可以 1 步，也可以是 n 步。
反正第一步处理的结果是第二步的输入，以此类推，就像生产线一样，每一步都是一个 task 是不是很好理解呢？
每个独立操作单元都是一个 task，使用 pipe 来组装 tasks。
于是 Gulp 就变成了基于 task 的积木式的工具。

常用插件
gulp-load-plugins：自动加载 package.json 中的 gulp 插件

gulp-rename：重命名

gulp-uglify：文件压缩

gulp-concat：文件合并

gulp-less：编译 less

gulp-sass：编译 sass

gulp-clean-css：压缩 CSS 文件

gulp-htmlmin：压缩 HTML 文件

gulp-babel: 使用 babel 编译 JS 文件

gulp-jshint：jshint 检查

gulp-imagemin：压缩jpg、png、gif等图片

gulp-livereload：当代码变化时，它可以帮我们自动刷新页面

Category web