Gulp

Gulp详解

一、简介

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确工具自动完成；
我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

gulp 和 grunt 非常类似，但是grunt

1、插件职能不够单一
2、插件完成了本不该由插件完成的事情
3、配置过于复杂
4、由于糟糕的流程控制导致的临时文件/目录

二、使用

（1）安装nodejs 和npm

gulp是基于nodejs，理所当然需要安装nodejs，官网http://nodejs.org/

（2）全局安装gulp

npm install gulp -g
gulp -v查看时候安装成功

（3）本地安装gulp插件

npm init
npm install gulp --save-dev

（4）新建gulpfile.js文件（重要）

gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）

代码示例

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less');
//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});
 
gulp.task('default',['testLess', 'elseTask']); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务
 
//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组) 
//gulp.dest(path[, options]) 处理完后文件生成路径

（5）运行gulp

9.1、说明：命令提示符执行gulp 任务名称；
9.2、编译less：命令提示符执行gulp testLess；
9.3、当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]。

（6）常用插件总结

gulp教程之gulp中文API
gulp教程之gulp-less
gulp教程之gulp-uglify
gulp教程之gulp-concat
gulp教程之gulp-jshint
gulp教程之gulp-htmlmin
gulp教程之gulp-imagemin
gulp教程之gulp-minify-css
gulp教程之gulp-rev-append
gulp教程之gulp-autoprefixer

1、gulp.src(globs[, options])

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

1.2、globs：需要处理的源文件匹配符路径。类型(必填)：String or StringArray；

通配符路径匹配示例：
“src/a.js”：指定具体文件；

“*”：匹配所有文件    例：src/*.js(包含src下的所有js文件)；
“**”：匹配0个或多个子文件夹  例：src/**/*.js(包含src的0个或多个子文件夹下的js文件)；
“{}”：匹配多个属性 例：src/{a,b}.js(包含a.js和b.js文件)  src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；
“!”：排除文件  例：!src/a.js(不包含src下的a.js文件)；

var gulp = require('gulp'),
    less = require('gulp-less');
 
gulp.task('testLess', function () {
    //gulp.src('less/test/style.less')
    gulp.src(['less/**/*.less','!less/{extend,page}/*.less'])
        .pipe(less())
        .pipe(gulp.dest('./css'));
});

1.3、options：类型(可选)：Object，有3个属性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'));  // Writes 'build/somedir/somefile.js'
 
gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build'));  // Writes 'build/js/somedir/somefile.js'

2、gulp.dest(path[, options])
2.1、说明：dest方法是指定处理完后文件输出的路径；

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

2.2、path：类型(必填)：String or Function 指定文件输出路径，或者定义函数返回文件输出路径亦可；

2.3、options：类型(可选)：Object，有2个属性cwd、mode；

options.cwd：类型：String 默认：process.cwd()：前脚本的工作目录的路径当文件输出路径为相对路径将会用到；
options.mode：类型：String 默认：0777 指定被创建文件夹的权限；

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

3.1、说明：task定义一个gulp任务；

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

3.3、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'));
});

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

4、gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

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

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

4.3、opts：类型(可选)：Object 具体参看https://github.com/shama/gaze；

4.4、tasks：类型(必填)：StringArray 需要执行的任务的名称数组；

4.5、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...');
    });
});