gulp入门 - 爱码网

1、gulp简介

　　gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

gulp具有以下优点：

　　通过代码优于配置的策略，gulp让简单的任务简单，复杂的任务可管理。

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

　　通过最少的API，掌握gulp毫不费力，构建工作尽在掌握：如一系列流管道。

　　gulp严格的插件指南如你期望的那样简洁高质的工作。

　　相关网址：

　　官网：http://gulpjs.com/

　　中文网： http://www.gulpjs.com.cn/

　　插件：http://gulpjs.com/plugins/

　　Gitbook：https://wizardforcel.gitbooks.io/gulp-doc/content/2.html

2、gulp使用引导

　　2.1 快速开始　　

　　1. 全局安装

npm install -g gulp

　　2. 在项目文件夹根目录下安装

 npm install gulp –save-dev

　　3. 新建gulpfile.js

　　4. 编写文件内容并运行

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

　　2.2 核心API　

http://www.ydcss.com/archives/424

　　我们首先来说一下gulp.js工作方式。在gulp中，使用的是Nodejs中的stream(流)，首先获取到需要的stream，然后可以通过stream的pipe()方法把流导入到你想要的地方。

　　2.3 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)

　　以下面例子来加深理解：

* 能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js

*.* 能匹配 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

　　2.4 gulp.task

　　task定义一个gulp任务

　　语法：gulp.task(name,[,deps],fn)

　　name：类型(必填) String 指定任务的名称(不应该有空格)；

　 deps: 类型(可选) StringArray，该任务依赖的任务(注意：被依赖的任务需要返回当前任务的事件流，请参考下面的示例)

gulp.task(\'testLess\',function(){
  return gulp.src([\'less/style.less\'])
      .pipe(less())
      .pipe(gulp.dest(\'./css\'));
});

gulp.task(\'minicss\',[\'testLess\'],function(){
  //执行完testLess任务在执行minicss任务
  gulp.src([\'css/*.css\'])
    .pipe(minifyCss())
    .pipe(gulp.dest(\'./dist/css\'));
});

　　fn: 类型(必填): Function 该任务调用的插件操作；

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

　　任务依赖：如果任务相互之间没有依赖，任务就会按你书写的顺写来执行，如果有依赖的话，则会先执行依赖的任务。但是如果某个任务依赖的任务是异步的，就要注意了，gulp并不会等待那个所依赖的异步的任务完成，而是会接着执行后续的任务。

//只要执行default任务，就相当于把one，two，three这三个任务执行了
gulp.task(\'default\',[\'one\',\'two\',\'three\']);

　　那如果我们想等待异步任务中的异步操作完成之后再继续执行后续的操作该怎么做呢？有三种方式可以实现：

　　第一：在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成，这个回调函数就是任务函数的第一个参数。

gulp.task(\'one\',function(cb){//cb为任务函数提供回调，用来通知任务已经完成
  //one是一个异步执行的任务  
  exec(function(){
    console.log(\'one is finish\');
    cb(); //执行回调，表示这个异步已经完成
  },5000);
});

//这时two任务会在one任务中的异步操作完成后再执行
gulp.task(\'two\',[\'one\'],function(){
  console.log(\'two is finish\');
});

　　第二：定义任务时，返回一个流对象。适用于任务就是操作gulp.src获取到的流的情况。

gulp.task(\'one\',function(cb){
  var stream = gulp.src(\'client/**/*.js\')
      .pipe(exec()) //exec()中有某些异步操作
      .pipe(gulp.dext(\'build\'));
  return stream;    
})

gulp.task(\'two\',[\'one\'],function(){
  console.log(\'two is done\');
});

　　第三：返回一个Promise对象，例如

var Q = require(\'q\');
gulp.task(\'one\',function(){
  var deferred = Q.defer();
  //执行异步的操作
  setTimeout(function(){
    deferred.resolve();
  },1);
  return deferred.promise;
});

gulp.task(\'two\',[\'one\'],function(){
  console.log(\'two is done\')
});

　　2.5 gulp.src

　　语法：gulp.src(globs,[,options])

　　src方法是指定需要处理的源文件的路径，gulp借鉴了Unix操作系统的管道(pipe)思想，前一级的输出直接变成后一级的输入，gulp.sec返回当前文件流至可用插件。

　　globs：需要处理的源文件匹配符路径。类型（必填）：String or StringArray

　　options：类型（可选）：Object，有三个属性 buffer，read，base；

　　　　options.buffer：类型（Boolean）默认为true；设置为false，将返回file.content的流并且不缓冲文件，处理大文件时非常有用。

　　　　options.read：类型（Boolean）默认为true；设置为false，将不再执行读取文件的操作，返回null

　　　　options.base：类型（String）设置输出路径以某个路径的某个组成部分为基础向后拼接，具体看下面示例：

gulp.src(\'client/js/**/*.js\')
    .pipe(minify())
    .pipe(gulp.dest(\'build\'));

gulp.src(\'client/js/**/*.js\',{base:\'client\'})
    .pipe(minify())
    .pipe(gulp.dest(\'build\'));

　　多文件：当有多种匹配模式时可以使用数组

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

　　2.6 gulp.dest

　　gulp.dest（path，[，options]）

　　dest方法是指定处理完文件后输出的路径；

　　path：类型（必填）：String or Function 指定文件输出路径，或者定义函数返回文件输出路径；

　　options：类型（可选）：Object，有两个属性 cwd，mode；

　　options.cwd 类型（String）默认：process.cwd( ) 前脚本工作目录的路径，当文件输出路径为相对路径时将会用到；

　　options.mode 类型（String）默认：0777 指定被创建文件夹的权限；

gulp.src(\'./client/templates/*.jade\')
    .pipe(jade())
    .pipe(gulp.dest(\'./build/templates\'))
    .pipe(minify())
    .pipe(gulp.dest(\'./build/minified_templates\'));

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

　　2.7 gulp.watch

　　语法：gulp.watch（glob，[，opts]，task） or gulp.watch(glop,[，opts，cb])

　　说明：watch方法是用于监听文件变化，文件一修改就会执行指定的任务。

　　glob：需要处理的源文件匹配符路径。类型（必填）：String or StringArray；

　　opts：类型（可选）：Object 具体请参看：https://github.com/shama/gaze ；

　　tasks：类型（必填）：StringArray 需要执行的任务的名称数组；

　　cb（event）：类型（可选）：Function 每个文件变化执行的回调函数；

gulp.task(\'watch1\',function(){
  gulp.watch(\'less/**/*.less\',[\'testLess\']);
});

gulp.task(\'watch2\',function(){
  gulp.watch(\'js/**/*.js\',function(event){
    console.log(\'File\'+event.path+\'was\'+event.type+\',running tasks...\');    
  });
})

3、常用插件

删除文件和文件夹　　

del：https://github.com/sindresorhus/del

合并js文件

gulp-concat：https://github.com/contra/gulp-concat

合并css文件

gulp-concat-css

https://github.com/mariocasciaro/gulp-concat-css

重命名文件

gulp-rename：https://github.com/hparra/gulp-rename

　　压缩js

gulp-uglify：https://github.com/terinjokes/gulp-uglify

　　压缩css

gulp-cssnano：https://github.com/ben-eb/gulp-cssnano

　　压缩页面

gulp-minify-html：https://github.com/sanfords/gulp-minify-html

压缩照片

gulp-imagemin：https://github.com/sindresorhus/gulp-imagemin

自动打开浏览器

gulp-open：https://github.com/stevelacy/gulp-open

gulp-notify

gulp-notify：https://github.com/mikaelbr/gulp-notify

　　依赖自动加载

　　 gulp-load-plugins

　　gulp-load-plugins这个插件能帮你自动加载package.json文件里的gulp插件。假设你的package.json里的文件依赖是这样的：

{
  "devDependencies":{
    "gulp":"~3.6.0",
    "gulp-rename":"~1.2.0",
    "gulp-ruby-sass":"~0.4.3",
    "gulp-load-plugins":"~0.5.1"
  }
}

　　然后我们可以在gulpfile.js中使用gulp-load-plugins来帮我们加载插件：

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

　　然后我们要使用gulp-rename和gulp-ruby-sass这两个插件的时候，就可以使用plugins.rename和plugins.rubySass来代替了，也就是原始插件名去掉gulp-后缀，之后再转换为驼峰命名。

　　自动刷新页面

　　gulp-livereload：https://github.com