Gulp前端自动化： Gulp的高度集成化开发环境，释放了前端开发中大量时间，如css压缩、js压缩、错误检查、合并js、压缩图片、压缩html、模块构造等，只要你能想到的基本都可以通过Gulp插件去实现。
前端自动化的目的 在一个项目过程中，重复而枯燥的工作太多了……绳命就这样浪费了。
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe） 思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。
功能：
版本控制
检查JS
图片合并
压缩CSS
压缩JS
编译SASS
目前最知名的构建工具： Gulp、Grunt、NPM + Webpack； 1
2
3
4
5
6
7
grunt是前端工程化的先驱
gulp更自然基于流的方式连接任务
Webpack最年轻，擅长用于依赖管理，配置稍较复杂
推荐使用Gulp，Gulp基于nodejs中stream，效率更好语法更自然,不需要编写复杂的配置文件
安装前准备： 在学习前，先谈谈大致使用gulp的步骤，给读者以初步的认识。首先当然是安装nodejs，通过nodejs的npm全局安装和项目安装gulp，其次在项目里安装所需要的gulp插件，然后新建gulp的配置文件gulpfile.js并写好配置信息（定义gulp任务），最后通过命令提示符运行gulp任务即可。
node 为了确保依赖环境正确，我们先执行几个简单的命令检查。
1
2
3
4
5
6
7
feibaichen@feibaichen-PC MINGW64 ~
$ node -v
v5.3.0
Node 是一个基于Chrome JavaScript V8引擎建立的一个解释器
检测Node 是否已经安装，如果正确安装的话你会看到所安装的Node 的版本号
npm 接下来看看npm，它是 node 的包管理工具，可以利用它安装 gulp 所需的包
1
2
3
4
5
6
feibaichen@feibaichen-PC MINGW64 ~
$ npm -v
3.3 .12
这同样能得到npm 的版本号，装 Node 时已经自动安装了npm
npm Node依赖包
说明：npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；
使用npm安装插件：命令提示符执行install [-g] [--save-dev]；``` 1
1、<name>：node插件名称。例：```npm install gulp-less --save-dev
2、-g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量； 非全局安装：将会安装在当前定位目录； 全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；
使用npm卸载插件：uninstall [-g] [--save-dev]``` PS：不要直接删除本地插件包 1
2
3
1、删除全部插件：```npm uninstall gulp-less gulp-uglify gulp-concat``` ……???太麻烦
2、借助rimraf：```npm install rimraf -g``` 用法：rimraf node_modules
4. 使用npm更新插件：```npm update <name> [-g] [--save-dev]
更新全部插件：update [--save-dev]```
当前目录已安装插件：list``` 1
2
3
4
5
6
7
8
9
PS：npm安装插件过程：从http://registry.npmjs.org下载对应的插件包（该网站服务器位于国外，所以经常下载缓慢或出现异常），解决办法往下看↓↓↓↓↓↓。
### 选装cnpm
因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。
来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”；
[官方网址：](http://npm.taobao.org "")
安装：命令提示符执行```npm install cnpm -g --registry=https://registry.npm.taobao.org
注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
feibaichen@feibaichen-PC MINGW64 /l/自动化
$ npm install cnpm -g --registry=https://registry.npm.taobao.org
npm WARN deprecated has-color@0.1.7: Renamed to supports-color. If you're usingchalk, upgrade to the latest version. https://github.com/chalk/supports-color
C:\U sers\l uuman\A ppData\R oaming\n pm\c npm -> C:\U sers\l uuman\A ppData\R oaming\n pm\n ode_modules\c npm\b in\c npm
C:\U sers\l uuman\A ppData\R oaming\n pm\c npm-sync -> C:\U sers\l uuman\A ppData\R oaming\n pm\n ode_modules\c npm\b in\c npm-sync
C:\U sers\l uuman\A ppData\R oaming\n pm\c npm-user -> C:\U sers\l uuman\A ppData\R oaming\n pm\n ode_modules\c npm\b in\c npm-user
C:\U sers\l uuman\A ppData\R oaming\n pm\c npm-check -> C:\U sers\l uuman\A ppData\R oaming\n pm\n ode_modules\c npm\b in\c npm-check
C:\U sers\l uuman\A ppData\R oaming\n pm\c npm-web -> C:\U sers\l uuman\A ppData\R oaming\n pm\n ode_modules\c npm\b in\c npm-web
C:\U sers\l uuman\A ppData\R oaming\n pm\c npm-doc -> C:\U sers\l uuman\A ppData\R oaming\n pm\n ode_modules\c npm\b in\c npm-doc
C:\U sers\l uuman\A ppData\R oaming\n pm\c npm-search -> C:\U sers\l uuman\A ppData\R oaming\n pm\n ode_modules\c npm\b in\c npm-search
C:\U sers\l uuman\A ppData\R oaming\n pm
├── abbrev@1.0.9
├── aproba@1.0.4
├─┬ cnpm@4.3.1
│ ├── auto-correct@1.0.0
│ ├── bagpipe@0.3.5
全局安装gulp 说明：全局安装gulp目的是为了通过她执行gulp任务；install gulp -g``` 1
查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。
feibaichen@feibaichen-PC MINGW64 /l/自动化
feibaichen@feibaichen-PC MINGW64 ~
npm WARN deprecated graceful-fs@3.0.8: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.
feibaichen@feibaichen-PC MINGW64 /l/Github
[18:39:18] CLI version 3.9.1
得到gulp的版本号，确认安装成功
└─┬ src — 源文件:
TestProject (项目名称)
|–src 开发环境1
2
3
4
### 创建package .json
我们先使用npm init来创建类似Nuget package 的package .config一样的文件，这样我们就知道项目依赖哪些插件，而且我们不需要把插件提交到代码库，其它程序员只需要使用 npm install 就可以安装所有配置的插件
$ npm init
See npm help json for definitive documentation on these fields
Use npm install <pkg> --save afterwards to install a package and
Press ^C at any time to quit.
{
Is this ok? (yes)
1
2
3
4
### 安装插件，加到项目依赖package.json中
npm install gulp --save-dev
$ npm install gulp –save-dev
npm WARN deprecated graceful-fs@3.0.8: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.1
2
npm install gulp-sass --save -dev
$ npm install gulp-sass –save-dev1
2
3
4
5
6
7
8
### 安装gulp功能插件依赖包
npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev
gulp功能模块的文件会放在项目所在的目录的./node_modules 下,并在package.json中添加插件名称。
### 引入插件包
npm install
当package.json中已经有提示插件依赖包，node.js将会直接下载所有依赖插件包。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| 插件 | 功能 |
| ---- | ---- |
| gulp-imagemin: | 压缩图片
| gulp-ruby-sass: | 支持sass，安装此版本需要安装ruby
| gulp-minify-css: | 压缩css
| gulp-jshint: | 检查js
| gulp-uglify: | 压缩js
| gulp-concat: | 合并文件
| gulp-rename: | 重命名文件
| gulp-htmlmin: | 压缩html
| gulp-clean: | 清空文件夹
| gulp-livereload: | 服务器控制客户端同步刷新（需配合chrome插件LiveReload及tiny-lr）
#### gulp-jshint
feibaichen@feibaichen-PC MINGW64 /f/Gulp/new
F:\Gulp\new
npm WARN EPEERINVALID gulp-jshint@2.0.0 requires a peer of jshint@2.x but none was installed.1
2
3
4
5
6
7
8
9
10
11
12
13
14
```text
Node .Js 、NPM、Ruby、Java 基础环境
Sublime + 插件 用于编写前端代码
Chrome、Firefox + Firebug 浏览器
Internet Explorer 进行兼容测试和预览页面UI、动画效果和交互功能
Node .js +Gulp 进行前端自动化构建、JS语法验证、CSS压缩，图片压缩等；
Koala 实时编译Less、Sass、Compass、CoffeeScript;
Github 存储自己的代码库 、git或SVN用于版本控制和团队Code Review
Tomcat、DedeAMPZ、MAMP 进行简单运行环境演示
Photoshop CC 切图 + Sprites 合并小图标
XMind 画出清晰的工作或业务逻辑思维图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
新建gulpfile.js 配置文件放在项目根目录下
演示项目目录结构
testProject (项目名称)
|–.git 通过git进行版本控制,项目自动生成这个文件
|–node_modules 组件包目录
|–dist **发布环境**（编译自动生成的）
|–css 样式文件(style.css style.min.css)
|–images 图片文件(压缩图片\合并后的图片)
|–js js文件(main.js main.min.js)
|–index.html 静态页面文件(压缩html)
|–src **开发环境**
|–sass sass文件
|–images 图片文件
|–js js文件
|–index.html 静态文件
|–gulpfile.js gulp配置文件
|–package.json 依赖模块json文件,在项目目录下npm install会安装项目所有的依赖模块，简化项目的安装程序
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
现在，项目文件夹都建好，组件也安装完毕了，我们需要编写gulpfile.js文件以指定gulp需要为我们完成什么任务。
gulpfile.js内容如下：
var gulp = require ('gulp' );
var jshint = require ('gulp-jshint' );
var sass = require ('gulp-sass' );
var concat = require ('gulp-concat' );
var uglify = require ('gulp-uglify' );
var rename = require ('gulp-rename' );
gulp.task('lint' , function (
gulp.src('./js/*.js' )
.pipe(jshint())
.pipe(jshint.reporter('default' ));
});
gulp.task('sass' , function (
gulp.src('./scss/*.scss' )
.pipe(sass())
.pipe(gulp.dest('./css' ));
});
gulp.task('scripts' , function (
gulp.src('./js/*.js' )
.pipe(concat('all.js' ))
.pipe(gulp.dest('./dist' ))
.pipe(rename('all.min.js' ))
.pipe(uglify())
.pipe(gulp.dest('./dist' ));
console .log('gulp task is done' );
});
…. // 其他任务类似
// 定义默认任务,执行gulp会自动执行的任务
// 监听js文件变化，当文件发生变化后会自动执行任务
gulp.watch('./js/*.js', function(){
gulp.run('lint','scripts');
});
});
1
2
3
4
5
6
7
8
9
10
11
现在，回到命令行窗口，可以直接运行gulp任务了。
gulp
这将执行定义的default 任务，就和以下的命令式同一个意思
gulp default
当然，我们可以运行在gulpfile.js中定义的任意任务，比如，现在单独运行sass任务：
gulp sass
编译会显示Finished,如果你的JS有什么不好的地方它会提醒，避免一些不必要的错误，十分贴心 1
2
3
4
5
6
7
8
9
10
常见提醒：
1. 禁止在同一行声明多个变量。
2. 请使用 ===/!==来比较true/false或者数值
3. 使用对象字面量替代new Array这种形式
4. 不要使用全局函数。
5. Switch语句必须带有default 分支
6. 函数不应该有时候有返回值，有时候没有返回值。
7. For循环必须使用大括号
8. If语句必须使用大括号
9. for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染。
gulp的插件数量很多，后面还可以根据自己的需要进行添加任务 1
2
3
4
5
6
7
8
9
10
11
常用的gulp插件参考
gulp-imagemin: 压缩图片
gulp-ruby-sass: 支持sass，安装此版本需要安装ruby
gulp-minify-css: 压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-htmlmin: 压缩html
gulp-clean: 清空文件夹
gulp-livereload: 服务器控制客户端同步刷新（需配合chrome插件LiveReload及tiny-lr）
gulp-livereload npm install gulp gulp-livereload –save-dev1
2
3
4
5
6
7
8
9
10
11
var gulp = require ('gulp' ),
livereload = require ('gulp-livereload' );
gulp.task('watch' , function (
var server = livereload();
gulp.watch('app/**/*.*' , function (file )
server.changed(file.path);
});
});
命令行下运行
前端自动化的目的 Gulp新手入门教程 基于Gulp的前端自动化工程搭建 http://www.sheyilin.cn/2016/02/gulp_introduce/ gulp官方网址： gulp插件地址： gulp 官方API： gulp 中文API： Gruntjs Grunt安装及配合组件构建前端开发一体化 grunt前端打包——css篇
SourceTree SourceTree UED团队前端自动化构建环境的搭建 前端构建大法 Gulp 系列 (四)：gulp实战
自动刷新[gulp入门]gulp-connect浏览器自动刷新 Gulp.js-livereload 不用F5了，实时自动刷新页面来开发
1
2
3
4
5
6
7
8
9
10
11
var gulp = require ('gulp' ),
livereload = require ('gulp-livereload' );
gulp.task('f5' ,function (
var server = livereload();
gulp.watch('app/**/*.*' ,function (file )
server.changed(file.path);
});
})
Gulp构建前端自动化工作流之：入门介绍及LiveReload的使用 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var livereload = require ('gulp-livereload' ),
webserver = require ('gulp-webserver' );
gulp.task('webserver' , function (
gulp.src( './' )
.pipe(webserver({
livereload: true ,
open: true
}));
});
gulp.task('watch' ,function (
gulp.watch( '*.html' , ['html' ])
});
gulp.task('default' ,['webserver' ,'watch' ]);
var gulp = require ('gulp' ),
livereload = require ('gulp-livereload' ),
webserver = require ('gulp-webserver' )
gulp.task('webserver' ,function (
gulp.src('./' )
.pipe(webserver({
livereload : true ,
open : true ,
}))
})
gulp.task('f5' ,function (
gulp.watch('*.html' ,['html' ])
})
gulp.task('web' ,['webserver' ,'f5' ])
报错： 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$ gulp build
fs.js:856
return binding.readdir(pathModule._makeLong(path));
^
Error: ENOENT: no such file or directory, scandir 'L:\自动化\new\node_modules\.3.8 .0 @node -sass \vendor'
at Error (native)
at Object.fs.readdirSync (fs.js:856 :18 )
at Object.getInstalledBinaries (L:\自动化\new\node_modules\.3.8 .0 @node -sass \lib\extensions.js:119 :13 )
at foundBinariesList (L:\自动化\new\node_modules\.3.8 .0 @node -sass \lib\errors.js:20 :15 )
at foundBinaries (L:\自动化\new\node_modules\.3.8 .0 @node -sass \lib\errors.js:15 :5 )
at Object.module.exports.missingBinary (L:\自动化\new\node_modules\.3.8 .0 @node -sass \lib\errors.js:45 :5 )
at Object.<anonymous> (L:\自动化\new\node_modules\.3.8 .0 @node -sass \lib\index.js:15 :28 )
at Module._compile (module.js:398 :26 )
at Object.Module._extensions..js (module.js:405 :10 )
at Module.load (module.js:344 :32 )
解决方案是执行以下方法：
feibaichen@feibaichen-PC MINGW64 /l/自动化/new
$ cnpm rebuild node -sass
> node -sass @3.8 .0 install L:\自动化\new\node_modules\gulp-sass\node_modules\node -sass
> node scripts /install.js
Binary downloaded and installed at L:\自动化\new\node_modules\.3.8 .0 @node -sass \vendor\win32-x64-47 \binding.node
> node -sass @3.8 .0 postinstall L:\自动化\new\node_modules\gulp-sass\node_modules\node -sass
> node scripts /build.js
"L:\自动化\new\node_modules\.3.8.0@node-sass\vendor\win32-x64-47\binding.node" exists.testing binary.Binary is fine; exiting.
node -sass @3.8 .0 L:\自动化\new\node_modules\gulp-sass\node_modules\node -sass
使用 gulp 构建一个项目 安装前准备 安装完成Gulp之后我就要频繁的使用它，进行代码自动化处理。由于服务来自外国，可以被墙了。淘宝 NPM 镜像
新建文件package.json 1
2
3
4
5
6
7
8
9
10
11
12
13
feibaichen@feibaichen -PC MINGW64 /l/ 自动化/Gulp
$ npm init
name: (Gulp) test
version: (1.0 .0 ) 1.0 .0
description: test description
entry point: (index.js)
test command:
git repository:
keywords:
author: feibaichen
license: (ISC)
About to write to L: \自动化\Gulp\package .json:
最终会在当前目录中创建 package.json 文件并生成类似如下代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"name" : "gulp-demo" ,
"version" : "1.0.0" ,
"description" : "gulp-demo" ,
"main" : "index.js" ,
"scripts" : {
"test" : "echo \"Error: no test specified\" && exit 1"
},
"repository" : {
"type" : "git" ,
"url" : "git@github.com:feibaichen/Game.git"
},
"keywords" : [
"H5"
],
"author" : "feibaichen li" ,
"license" : "MIT" ,
"bugs" : {
"url" : "https://github.com/feibaichen/Game/issues"
},
"homepage" : "http://feibaichen.github.io/Game/" ,
}
安装gulp依赖包 1
npm install gulp --save -dev
此时打开 package.json 会发现多了如下代码1
2
3
"devDependencies" : {
"gulp" : "^3.8.11"
}
安装gulp功能插件依赖包 未配置文档 1
npm install gulp-uglify gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-minify-css gulp-autoprefixer gulp-less gulp-ruby-sass gulp-imagemin gulp-util
1
2
3
4
5
此时，package.json 将会更新
"devDependencies" : {
"colors" : "^1.0.3" ,
"gulp" : "^3.8.11" ,
}
已配置文档 当你将这份 gulpfile.js 配置分享给你的朋友时，就不需要将 node_modules/ 发送给他，他只需在命令行输入
设计目录结构 我们将文件分为2类，一类是源码，一类是编译压缩后的版本。文件夹分别为 src 和 dist。(注意区分 dist 和 ·dest 的区别)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
TestProject (项目名称)
|– .git 通过git进行版本控制,项目自动生成这个文件
|– node_modules 组件包目录
|– dist **发布环境**（编译自动生成的）
|– css/ 样式文件(style.css style.min.css)
|– images/ 图片文件(压缩图片\合并后的图片)
|– js/ js文件(main.js main.min.js)
|– index.html 静态页面文件(压缩html)
|– src **开发环境**
|– sass/ *.scss *.sass 文件夹
|– less/ less文件夹
|– images/ 图片文件夹
|– fonts/ 字体文件夹
|– js/ js文件夹
|– index.html 静态文件
|– gulpfile.js gulp配置文件
|– package.json 依赖模块json文件,在项目目录下npm install会安装项目所有的依赖模块，简化项目的安装程序
gulp-util 1
2
3
4
5
6
7
8
var gulp = require('gulp' )
var gutil = require('gulp-util' )
gulp.task('default' , function () {
gutil.log('message' )
gutil.log(gutil.colors .red ('error' ))
gutil.log(gutil.colors .green ('message:' ) + "some" )
})
Browser Sync自动刷新 Browser Sync 帮助我们搭建简单的本地服务器并能实时刷新浏览器，它还能 同时刷新多个设备。
不只是自动刷新
1
2
3
4
5
6
7
8
9
10
11
[11 :33 :17 ] Finished 'dev' after 6.07 μs
[BS] Access URLs:
-------------------------------------
Local: http:
External: http:
-------------------------------------
UI: http:
UI External: http:
-------------------------------------
[BS] Serving files from: dist/
[BS] Watching files...
快速拷贝部署文件 在已经有成熟的gulp构建文件，新建文件夹，将文件gulpfile.js、package.json、src文件夹。
cnpm install gulp引入gulp
