Gulp 快速入门

一、gulp介绍

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

---

二、工程化的作用

1. 自动压缩JS文件
2. 自动压缩CSS文件
3. 自动合并文件
4. 自动编译sass
5. 自动压缩图片
6. 自动刷新浏览器

---

三、Node环境安装

1. window下，下载node安装即可。 node下载地址：http://nodejs.cn/download/ ,安装比较简单，基本一直下一步即可，安装路径随意。
2. 安装完成后，终端输入如下命令 显示版本号即安装成功。
3. node -v

---

四、gulp安装

(一) 推荐安装cnpm：

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。网址：http://npm.taobao.org

(二) 安装：命令提示符执行

npm install cnpm -g --registry=https://registry.npm.taobao.org

(三) 全局安装gulp

1. 在com中执行

  cnpm install gulp –g

2. 查看是否正确安装：命令提示符执行gulp –v，出现版本号即为正确安装

---

五、gulp插件安装（编译/压缩/合并/代码检查/即时刷新）

(一) 项目文件根目录新建package.json

注：package.json是基于nodejs项目必不可少的配置文件，它是存在项目根目录的普通json文件重点内容

1. 进入你的项目文件

2. 执行命令cnpm init来新建package.json

3. 检测package.json是否成功新建查看项目文件根目录，是否新建package.json，且内容是否和你终端中输入的一致。 package.json内容如下：

{   
  "name": "test", 
  "version": "1.0.0", 
  "description": "我是描述", 
  "main": "index.js", 
  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  
  "author": "",  
  "license": "ISC"
}

注：可不使用cnpm init方式，可选择手动创建package.json配置文件

4. 在项目中新建配置文件package.json配置文件是为了将来项目迁移使用，测试demo时，可以不需要

 {
   “name”:”test”, //项目名称（必须）
   “version”: “1.0.0”, //项目版本（必须）
   “description”:”This is for study gulp project!”, //项目描述（必须）
   “author”:{ 
      //项目作者信息 
      “name”:”zzl”,
      “email”:[[email protected]](mailto:[email protected])
    },

 “devDependencies”:{
    //项目依赖的插件，这个不用写，待会装完插件自动生成       
    “gulp”:”^3.8.11”,
    “gulp-less”:”^3.0.0”
  }
}

注：由于json文件里是不能写注释的，所以实际开发的时候，记得把注释去掉

5. Package.json的作用 当有一个新的项目需要建立，或者有人跟你合作开发时，我们不需要把项目中所有用到的模块（文件大小可能上百兆）都上传到git,只需要给项目带上一个配置文件 而对方拿到项目后，只需要一个命令npm install Node就可以自动读取项目的配置文件，并将所有依赖模块自动下载，这样不是更快捷，更方便吗？

(二) 本地安装gulp插件

注：全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能

(三) 进入你的项目文件路径中后，执行

cnpm install gulp --save-dev

(四) 安装gulp-sass插件（拿该插件进行示例）进入你的项目文件路径中后，执行

cnpm install gulp-sass  --save-dev

(五) 常用插件

1. sass的编译（gulp-sass）

2. less编译 （gulp-less）

3. 重命名（gulp-rename）

4. 自动添加css前缀（gulp-autoprefixer）

5. 压缩css（gulp-minify-css）

6. js代码校验（gulp-jshint）

7. 合并js文件（gulp-concat）

8. 压缩js代码（gulp-uglify）

9. 压缩图片（gulp-imagemin）

10. 自动刷新页面（gulp-livereload，谷歌浏览器亲测，谷歌浏览器需安装livereload插件）

11. 图片缓存，只有图片替换了才压缩（gulp-cache）

12. 更改提醒（gulp-notify）

(六) 安装以上插件

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev

---

六、gulp使用

(一)创建一个gulpfile.js在根目录下，gulp只有四个API：tast,watch,src和dest

1. Task：这个API用来创建任务，在命令下可以输入gulp test来执行test任务。

2. Watch: 这个API用来监听任务。

3. Src: 这个API设置需要处理的文件的路径，可以是多个文件以数组的形式[main.scss，vender.scss],也可以是正则表达式/**/*.scss。

4.Dest: 这个API设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本

(二) 载入插件

1. 接下来，我们需要建立一个gulpfile.js档案，并且载入这些插件：

var gulp = require('gulp'), 
sass = require('gulp- sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');

---

七、 Gulp API

(一) 工作方式

gulp的使用流程一般是：
首先通过gulp.src()方法获取到想要处理的文件流，
然后把文件流通过pipe方法导入到gulp的插件中，
最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中。
例如：

var gulp = require('gulp');
gulp.src('script/jquery.js') // 获取流的api
.pipe(gulp.dest('dist/foo.js')); // 写放文件的api

(二)globs的匹配规则

我们重点说说gulp用到的globs的匹配规则以及一些文件匹配技巧，我们将会在后面用到这些规则。 　gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件：

匹配符	说明
*	匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾
**	匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。
?	匹配文件路径中的一个字符(不会匹配路径分隔符)
[...]	匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法
!(pattern|pattern|pattern)	匹配任何与括号中给定的任一模式都不匹配的
?(pattern|pattern|pattern)	匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)?
+(pattern|pattern|pattern)	匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+
*(pattern|pattern|pattern)	匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)*
@(pattern|pattern|pattern)	匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern)

下面以例子来加深理解

匹配符	能匹配	不能匹配
*.*	a.js, style.css, a.b, x.y
*/*/*.js	a/b/c.js,x/y/z.js,	a/b.js,a/b/c/d.js
**	abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件
**/*.js	foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js
a/**/z	a/z, a/b/z ,a/b/c/z, a/d/g/h/j/k/z
a/**b/z	a/b/z,a/sb/z,	a/x/sb/z, 因为只有单**单独出现才能匹配多级目录
?.js	a.js,b.js,c.js
a??	a.b,abc,	ab/,因为它不会匹配路径分隔符
[xyz].js	只能匹配 x.js,y.js,z.js,	xy.js,xyz.js等, 整个中括号只代表一个字符
[^xyz].js	a.js,b.js,c.js等,	x.js,y.js,z.js

(三) src：获取流(源文件路径)

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

//使用数组的方式来匹配多种文件
gulp.src(['js/\*.js', 'css/*.css', '\*.html'])

(四) dest：写文件（目标文件路径）

gulp.dest()方法是用来写文件的，其语法为：

gulp.dest(path[,options])

path为写入文件的路径；

(五) watch：监听文件

gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。其语法为

gulp.watch(glob[, opts], tasks);

如：

gulp.task(“one”,function(){

});
gulp.task(“two”,function(){
});
gulp.watch('js/\*\*/*.js', [“one”,”two”]);

(六) task：定义任务

gulp.task方法用来定义任务，其语法为：

gulp.task(name[, deps], fn)

name为任务名；
deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数；
fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。
当你定义一个简单的任务时，需要传入任务名字和执行函数两个属性。
如：

gulp.task('greet', function () {
     console.log('Hello world!');
});

---

八、 结合sass的使用

(一) 建立任务

1. 编译sass,Autoprefix及缩小化
2. 首先，我们设置编译Sass。我们将编译Sass、接着通过Autoprefixer，最后储存结果到我们的目的地。接着产生一个缩小化的.min版本、自动重新整理页面及通知任务已经完成：

gulp.task('styles', function() {  
//编译sass
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'expanded' }))
//添加前缀
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
//保存未压缩文件到我们指定的目录下面
    .pipe(gulp.dest('dist/assets/css'))
//给文件添加.min后缀
    .pipe(rename({suffix: '.min'}))
//压缩样式文件
    .pipe(minifycss())
//输出压缩文件到指定目录
    .pipe(gulp.dest('dist/assets/css'))
//提醒任务完成
    .pipe(notify({ message: 'Styles task complete' }));
});

3. 说明：
   gulp.task('styles', function() { ... )};
   这个gulp.taskAPI用来建立任务。可以透过终端机输入$ gulp styles指令来执行上述任务。
4. return gulp.src('src/styles/main.scss') 用来定义一个或多个来源档案。
5. .pipe(sass({ style: 'expanded' })) 使用pipe()来找到哪个插件
6. .pipe(gulp.dest('dist/assets/css')); 这个是用来设定目的路径。

(二) JS代码校验、合并和压缩

//发布任务
gulp.task(“scripts”,function(){
     //js代码校验
     return gulp.src(“javascripts/*.js”)
     .pipe(jshint())
     .pipe(jshint.reporter(“default”))
     //js代码合并
     .pipe(concat(“all.js”))
     //给文件添加.min后缀
     .pipe(rename({suffix:”.min”}))
     //压缩脚本文件
     .pipe(uglify())
     //输出压缩文件到指定目录
     .pipe(gulp.dest(“assets”))
     //提醒任务完成
     .pipe(notify({message : “Scripts task complete”}));
});

(三) 图片压缩

Gulp.task(“images”,function(){
    return gulp.src(“images/*”)
      .pipe(cache(imagemin({optimizationLeve1: 3,progressive:true, interlaced:true})))
      .pipe(gulp.dest(“images”))
      .pipe(notify({message : “Images task complete”}));
});

(四) 事件监听

Gulp.task(“watch”,function(){
   gulp.watch(“stylesheets/\*.scss”,[‘styles’]);
   gulp.watch(“javascripts/\*.js”,[“scripts”]);
   gulp.watch(“images/\*”,[‘images’]);
   livereload.listen();
   gulp.watch([“assets/\*”]).on(“change”,livereload.changed);
});

(五) 运行

1. Gulp default
2. Gulp watch
3. 运行整个任务gulp

(六) 总结

1. 安装node
2. 安装gulp（全局gulp,本地gulp及所需插件）
3. 新建gulpfile.js文件
   3.1 引入模块
   3.2 创建任务
4. 运行 gulp 任务名
5. 我们自己设置的项目文件路径
   5.1 如：
   assets: 压缩后样式和脚本存放的目录
   images: 图片存放目录
   javascripts: 脚本存放目录
   stylesheets: 样式存放目录
   plugin: 插件存放目录
   gulpfile.js