2016-01-13

gulp学习笔记

gulp简介
安装及使用
gulp的API学习
常用插件
1. 最后

gulp简介

gulp是基于nodeJs的一种对代码构建的构建工具，可以自动化完成项目任务，包括javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。即相比于 grunt 的频繁 IO操作，gulp的流操作，能更快地更便捷地完成构建工作。

gulp与grunt的区别

Grunt主要是以文件为媒介来运行它的工作流，即通过临时文件。而glup是通过文件流stream，虚拟对象，效率更高。即相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。
grunt的插件更为全面，但是gulp的插件也够用。

安装及使用

首先安装nodeJs和npm

安装gulp

//以全局方式安装gulp
npm install -g gulp
//全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次
npm install gulp
//如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上--save-dev
npm install --save-dev gulp

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

建立gulpfile.js文件
运行gulp任务

gulp的API学习

gulp.src()
gulp.task()
gulp.dest()
gulp.watch()

API学习部分是参照此文，总结的非常到位。

gulp.src()

gulp.src是用来获取stream的，但是这个stream的内容不是原始的文件流，而是一个虚拟文件对象流(vinyl files),这个虚拟的对象中存储着原始文件的路径、文件名、内容等。就是要读取操作的文件就ok了。

1	gulp.src(globs[, options])

globs参数是文件匹配模式，用来匹配文件路径，可以指定具体的文件路径。
当有多个文件时，这是参数是个数组。
options是可选参数，一般不需要用到。

关于globs的匹配规则

*匹配文件路径中的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)

加深理解的例子见这里

gulp.dest()

用来写文件。

1	gulp.dest(path[,options])

path是写入文件的路径
options是可选参数，一般不需要用到。

传入的路径参数与最终生成文件的关系

gulp使用流程：

通过gulp.src()方法获取到我们想要处理的文件流。
然后把文件流通过pipe方法导入到gulp的插件中。
最后，经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法把流中的内容写入到文件中。
gulp.dest()传入的路径参数只能指定到要生成文件的目录，而不是文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，生成的文件名是由导入到它的文件流决定的。

关系：
gulp.dest(path[,options])生成的文件路径是我们传入的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.src()方法中的base属性来灵活改变dest()生成的文件路径。
当我们没有在gulp.src()方法中配置base属性时，base的默认值为通配符开始出现之前那部分路径，上面我们说的gulp.dest()所生成的文件路径的规则，其实也可以理解成，用我们给gulp.dest()传入的路径替换掉gulp.src()中的base路径，最终得到生成文件的路径。例如：

gulp.src(script/lib/*.js) //没有配置base参数，此时默认的base路径为script/lib
    //假设匹配到的文件为script/lib/jquery.js
    .pipe(gulp.dest('build')) //生成的文件路径为 build/jquery.js

gulp.src(script/lib/*.js, {base:'script'}) //配置了base参数，此时base路径为script
    //假设匹配到的文件为script/lib/jquery.js
    .pipe(gulp.dest('build')) //此时生成的文件路径为 build/lib/jquery.js

gulp.task()

gulp.task方法用来定义任务，内部使用的是Orchestrator，其语法为：

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

name为任务名。
deps是当前定义的任务需要依赖的其他任务，是一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数。
fn为任务函数，我们把任务要执行的代码都写在这里面。

要知道是执行多个任务时来控制任务执行的顺序。
gulp中执行多个任务，可以通过任务依赖来实现。

1 2	//只要执行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');
});

那如果我们想等待异步任务中的异步操作完成后再执行后续的任务，该怎么做呢？
见这里。

gulp.watch()

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

1	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']);

另一种语法：

1	gulp.watch(glob[, opts, cb])

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

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

常用插件

1.自动加载插件gulp-load-plugins
安装：

1	npm install --save-dev gulp-load-plugins

当使用的插件非常多的时候，如果在gulpfile.js文件中使用require的方法加载，那必定是非常麻烦的事情，可以采用这个插件来提高效率。

1
2
3

var gulp = require('gulp');
//加载gulp-load-plugins插件，并马上运行它
var plugins = require('gulp-load-plugins')();

然后我们要使用gulp-rename和gulp-ruby-sass这两个插件的时候，就可以使用plugins.rename和plugins.rubySass来代替了,也就是原始插件名去掉gulp-前缀，之后再转换为驼峰命名。
gulp-load-plugins并不会一开始就加载所有package.json里的gulp插件，而是在我们需要用到某个插件的时候，才去加载那个插件。最后要提醒的一点是，因为gulp-load-plugins是通过你的package.json文件来加载插件的，所以必须要保证你需要自动加载的插件已经写入到了package.json文件里，并且这些插件都是已经安装好了的。
2.重命名gulp-rename
安装：

1	npm install --save-dev gulp-rename

用来重命名文件流中的文件名。用gulp.dest()方法写入文件时，文件名使用的是文件流中的文件名，如果要想改变文件名，那可以在之前用gulp-rename插件来改变文件流中的文件名。

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    uglify = require("gulp-uglify");
 
gulp.task('rename', function () {
    gulp.src('js/jquery.js')
    .pipe(uglify())  //压缩
    .pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js
    .pipe(gulp.dest('js'));
    //关于gulp-rename的更多强大的用法请参考https://www.npmjs.com/package/gulp-rename
});

3.js文件压缩gulp-uglify
安装：

1	npm install --save-dev gulp-uglify

用来压缩js文件，使用的是uglify引擎。

var gulp = require('gulp'),
    uglify = require("gulp-uglify");
 
gulp.task('minify-js', function () {
    gulp.src('js/*.js') // 要压缩的js文件
    .pipe(uglify())  //使用uglify进行压缩,更多配置请参考：
    .pipe(gulp.dest('dist/js')); //压缩后的路径
});

4.css文件压缩gulp-minify-css
安装：

1	npm install --save-dev gulp-minify-css

用于压缩css文件。

var gulp = require('gulp'),
    minifyCss = require("gulp-minify-css");
 
gulp.task('minify-css', function () {
    gulp.src('css/*.css') // 要压缩的css文件
    .pipe(minifyCss()) //压缩css
    .pipe(gulp.dest('dist/css'));
});

5.html文件压缩gulp-minify-html
安装：

1	npm install --save-dev gulp-minify-html

用于html文件压缩。

var gulp = require('gulp'),
    minifyHtml = require("gulp-minify-html");
gulp.task('minify-html', function () {
    gulp.src('html/*.html') // 要压缩的html文件
    .pipe(minifyHtml()) //压缩
    .pipe(gulp.dest('dist/html'));
});

6.js代码检测gulp-jshint
安装：

1	npm install --save-dev gulp-jshint

用来检测js代码

var gulp = require('gulp'),
    jshint = require("gulp-jshint");
 
gulp.task('jsLint', function () {
    gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter()); // 输出检查结果
});

7.文件合并gulp-concat

安装

1	npm install --save-dev gulp-concat

用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等，这样就能减少页面的http请求数了

var gulp = require('gulp'),
    concat = require("gulp-concat");
 
gulp.task('concat', function () {
    gulp.src('js/*.js')  //要合并的文件
    .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
    .pipe(gulp.dest('dist/js'));
});

8.less和sass的编译gulp-less,gulp-sass
安装

1	npm install --save-dev gulp-less

less使用gulp-less

var gulp = require('gulp'),
    less = require("gulp-less");
 
gulp.task('compile-less', function () {
    gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('dist/css'));
});

安装

1	npm install --save-dev gulp-sass

sass使用gulp-sass

var gulp = require('gulp'),
    sass = require("gulp-sass");
 
gulp.task('compile-sass', function () {
    gulp.src('sass/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});

9.图片压缩gulp-imagemin
安装

1	npm install --save-dev gulp-imagemin

来压缩jpg、png、gif等图片。

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png图片压缩插件

gulp.task('default', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()] //使用pngquant来压缩png图片
        }))
        .pipe(gulp.dest('dist'));
});

10.自动刷新gulp-livereload
安装

1	npm install --save-dev gulp-livereload

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

var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload');

gulp.task('less', function() {
  gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('css'))
    .pipe(livereload());
});

gulp.task('watch', function() {
  livereload.listen(); //要在这里调用listen()方法
  gulp.watch('less/*.less', ['less']);
});

最后

本来想自己慢慢写学习笔记的，后来发现这篇blog，实在太给力了，基本是学习一遍，搬运过来了。

学习gulp相关资料：