gulp快速入门

Gulp是基于流的前端自动化构建工具

使用步骤：

1.安装node和npm

　　访问国外服务器网速很差时，安装依赖模块时会缺乏文件。能够安装国内的镜像，以后使用cnpm命令代替npm命令。

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

2.全局安装gulp

　　$npm install -g gulp

　　查看gulp的版本：$gulp –v

　　结果：cli version -3.0.2为全局安装的，local version-3.0.2 为本地安装的。

3.在项目根目录新建package.json文件

　　$npm ini

　　按提示输入相关配置信息便可。若是在别的地方再次搭建开发环境时，不须要一个一个模块安装，只须要把package.json文件拷贝过去，而后运行$npm istall --save-dev命令便可安装全部模块包。

4.本地安装gulp

　　$npm install gulp  --save-dev

　　$npm install [<@scope>/]<name>@<version>

　　卸载插件：npm uninstall <name> [-g] [--save-dev];(直接删除文件会报错)

5. 安装gulp的相关插件

　　$npm install module-name -save 把模块和版本号添加到package.json的dependencies部分

　　$npm install gulp-less -save-dve 把模块和版本号添加到package.json的devdependencies部分

6. 编写gulpfile.js文件定义执行的任务

　　在项目根目录下建立gulpfile.js文件，里面定义须要执行的任务。同时新建一个发布目录，和开发目录分开，专门存放处理好的静态资源，未来发布时直接将发布目录下的全部文件拷到服务器便可。

7.运行gulf任务

　　CLI执行方式，默认执行gulpfile.js这个特定名字的js文件中的任务：$gulp defaultTask

　　若是任务不在项目根目录的gulpfile.js中定义，须要手动指定gulpfile的路径，以下所示：

   $gulp  minifyCssTask  --gulpfile  ./child/task.js

　　webstorm开发工具中：右键点击gulpfile.js，选择”Show Gulp Tasks”

经常使用命令：

$npm install gulp –g

安装到全局环境里面，包安装在Node安装目录下的node_modules文件夹中，通常在 \Users\用户名\AppData\Roaming\ npm\目录下，可使用npm root -g查看全局安装的目录。用户能够在命令行中直接运行该模块包支持的命令。

$npm install gulp --save-dev

包安装在指定项目的node_modules文件夹下，--save将配置保存到配置文件中，-dev同时把配置写入devDependencies字段中。

gulp经常使用方法

1. gulp.src(globs[, options])
src方法是按照指定的路径将源文件转为Vinyl fs并输出至别的插件。gulp借鉴了Unix操做系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，相似jQuery的链式操做。当前Node项目的根路径用’./’表示，或者直接从和gulpfile.js平级的目录开始，’/’表示的是盘符根目录。

globs：匹配符合特定规则的文件路径，类型为字符串或字符串组成的数组。

glob匹配规则：

* 匹配0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出如今末尾。*结尾时能够匹配到路径分隔符不会被匹配到

   "js/*.js"：获取js目录下的全部js文件；

  "js/*"：获取js目录下的全部文件，不能匹配子目录下的文件。

** 能够匹配路径分隔符，用于匹配0个或多个子目录，须要单独出现。若是出如今末尾，还能匹配任意文件。

　　"js/**/*.js"：匹配 js 目录及子目录下全部js文件，如 js/a.js 或 js/a/b/c/d.js。

?  匹配文件路径中的一个字符，不会匹配到路径分隔符，也不能匹配空字符

　　"js/a?.js"：能匹配 js/ab.js，不能匹配 js/a.js。

匹配指定范围内的一个字符，若是指定范围的首字符是  或 ，则为匹配不在指定范围内的一个字符。[...]!^

　　"js/a[0-3].js"：获取js目录下以a开头，第二个字符为0-3之间的js文件。

　　"js/[^ab].js"：匹配 js/c.js，不匹配 js/cb.js、js/ac.js。

!(pattern|pattern|pattern) 匹配（彻底且精确地匹配，且不可组合）不符合任何模型之一的字符。注意 | 先后不能有空格，下同。

　　"js/!(a|b).js"：匹配 js 目录下的 aa.js、ab.js、ba.js、c.js 不匹配 a.js、b.js。

　　"!src/a.js" : 不包含src下的a.js文件；

?(pattern|pattern|pattern) 匹配多个 pattern 中 0 或 1 个（精确匹配，不能够组合）。

　　"js/?(a|b).js"：匹配 js 目录下的 a.js、b.js，不匹配 ab.js

+(pattern|pattern|pattern) 至少匹配多个 pattern 中的一个。与*(pattern|pattern|pattern) 不用的是，它必须1个及以上，不能为空。

　　"js/+(a|b)b.js"：匹配 js 目录下的 ab.js、bb.js、ababab.js，不能匹配 abcd.js（也就是说：只容许匹配出如今范围内的字符） ，也不能像 js/*(a|b)b.js 那样匹配 b.js。

*(a|b|c)  匹配括号中多个 pattern 中0或任意多个（pattern可相互组合）。

　　"js/*(a|b|c).js"：匹配 js 目录下的 a.js、ab.js、abc.js、ba.js，不匹配 abcd.js（也就是说：只容许匹配出如今范围内的字符）。

@(pattern|pattern|pattern) 匹配多个 pattern 中的任意一个（即不能够组合，且不能为空或大于1个）。与 ?(pattern|pattern|pattern) 区别是不可为空。

　　"js/@(a|b)b.js"：匹配 js 目录下的 ab.js、bb.js，不匹配 b.js、abb.js、abc.js。

{} 匹配多个属性

　　src/{a,b}.js匹配a.js和b.js文件，src/*.{jpg,png,gif}匹配src下全部jpg/png/gif文件

! 排除文件，当有多种匹配模式时可使用数组，注意前后顺序，后面的规则会覆盖前面的。

　　gulp.src([*.js,'!b*.js']) //匹配全部js文件，但排除掉以b开头的js文件

options：控制文件流和输出路径，可选配置。

　　options.buffer：是否以buffer形式返回file.content，默认是true。

　　options.read：是否读取该文件，fals返回的file.content为null，默认为true。

　　options.base：用于切除输入流的路径，base指定的部分路径将不做为dest的输入路径，base默认值为第一个glob规则以前的全部路径。

gulp.src('client/js/**/*.js') // `**/*.js`为glob规则，默认的base为`client/js/`
  .pipe(minify())
  .pipe(gulp.dest('build'));  //输出'build/somedir/somefile.js'，base部分client/js/被省略
 
gulp.src('client/js/tools/helper.js') // `helper.js`为glob规则，默认的base为client/js/tools/
  .pipe(minify())
  .pipe(gulp.dest('build'));  // Writes 'build/helper.js'
//若是要保留以前的目录结构，使用{base:’.’},输出build/client/js/tools/helper.js`
 
gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 输出'build/js/somedir/somefile.js'

2.gulp.dest(path[, options])

dest方法将操做完成后的文件流输出到指定目录。能够pipe到多个文件夹，若是某个文件夹不存在，会自动建立它。只能指定路径，不能指定文件名。文件名采用源文件的名字。

文件被输出的路径是以dest()所给的目标路径根据src()相对路径计算而来，src()的base参数会改变输出路径。

path：指定文件的输出路径，参数类型为字符串或函数。当前项目根目录以’./’表示。

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

task定义一个gulp任务

name： 指定任务的名称，参数类型为String，名字中不要有空格，未来能够直接运行；

deps： 该任务依赖的任务（被依赖的任务须要return当前任务的事件流），[String]

fn： 执行该任务的具体操做，若是省略，则只完成依赖的任务。fn一般为调用对应插件的方法，不必定在全部依赖的任务完成后才执行，格式以下：

gulp.task('buildStuff', [‘taskOne’,’taskTwo’],function() {
  // Do something that "builds stuff"
  var stream = gulp.src(/*some source path*/)
  .pipe(somePlugin())
  .pipe(someOtherPlugin())
  .pipe(gulp.dest(/*some destination*/));
  return stream;      //返回才能让后面的任务按顺序依赖当前任务，不然为并行执行    
　　//taskOne/taskTwo的fn方法中须要返回流对象/Promise对象或使用cb，并在deps中声明，才能保证当前的操做在依赖的任务完成后执行
  });

deps为多个任务时，默认的gulp会一次性同时运行全部的task而且不作任何等待，执行的顺序没有保证。若是须要严格按照顺序执行，须要特别处理（如上所述，前一个任务返回特定对象而且当前任务须要声明依赖前一个任务）。

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

watch方法是用于监听指定文件的变化，文件一修改就会执行指定的任务或回调函数
glob：须要处理的源文件通配符路径。

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

tasks：须要执行的任务的名称数组；

cb(event)：文件变化时执行的回调函数，event对象描述了所监控到的变更

event.type：发生的变更的类型：added, changed 或者 deleted。

event.path：触发了该事件的文件的路径。

gulp.watch('js/**/*.js', ['uglify','reload']);

gulp.watch('js/**/*.js', function(event) {

  console.log('File ' + event.path + ' was ' + event.type);

});

Node的stream有4种，Readable（只读）、Writable（只写）、Duplex（双向）、Transform（操做被写入数据，而后读出结果）。可是Node的stream只处理内容，没有办法处理目录相关的操做。因此gulp使用的是Vinyl File Object Stream，Vinyl主要用路径（path）和内容（contents）两个属性来描述文件。

能够用vinyl-source-stream把普通的Node Stream转换为Vinyl File Object Stream，在gulp内使用。

//引入工具包
var gulp = require('gulp'); //加载本地gulp
var jshint = require("gulp-jshint");    //js代码检查
var less = require("gulp-less");    //编译less文件生成css文件
var cssMinify = require('gulp-clean-css');  //压缩css文件
var concat = require("gulp-concat");//将多个js文件合并为一个
var uglify = require("gulp-uglify");//将js文件压缩，若是js有语法错误，任务会终止
var rename = require("gulp-rename");//将文件重命名，参数为String/fn，能够在文件名前配置输出路径
var del = require("del");   //删除文件，原生的Node模块，也须要install
//在编译文件以前删除上次一些没必要要的文件，如上次build的temp文件等
gulp.task('clean:mobile', function (cb) {   //cb是gulp传入的回调函数
  del([
    './src/mobile/**/*',    // 删除`mobile`目录中的全部文件及目录；若以文件后缀结尾，目录会保存
    '!./src/mobile/deploy.json'  // 不但愿删掉的这个文件
  ], cb);
});
//编译less，压缩css
gulp.task('less', function () {
    gulp.src("./src/less/**/*.less")   
        .pipe(less())   //调用less模块，将less文件编译为css文件，文件名不变
        .pipe(cssMinify(
              {
　　　　　　　　　　compatibility: 'ie9,-properties.ieFilters', //兼容ie9以上，不保留滤镜
                 debug:true
               },
               function (detail){
               　　console.log(details.name + ': ' + details.stats.originalSize);
                  console.log(details.name + ': ' + details.stats.minifiedSize);
　　　　　　　　 }
　　　　　　))  //将css文件压缩
        .pipe(gulp.dest("./build/css"));    //输出目录
});
//检查脚本语法
gulp.task('jshint', function () {
    return gulp.src('./src/js/**/*.js')
            .pipe(jshint())     //检查js语法
            .pipe(jshint.reporter('default'));  //对错误进行提示
});
//合并js，并压缩
gulp.task('scripts',['jshint'], function () {
    gulp.src('./src/js/**/*.js')
        .pipe(concat('all.js'))     //合并后的文件名字
        .pipe(gulp.dest('./dest'))  //合并后的输出目录
        .pipe(rename("all.min.js"))     //将文件重命名
        .pipe(uglify().on('error', function(e){console.log(e);}))           //压缩文件。添加error事件，若是报错，能够缩小查找范围
        .pipe(gulp.dest("./build"))
});
//default执行所有依赖的任务
gulp.task('default',['clean:mobile','less','scripts']);