gulp快速入门

Posted 2020-09-12 开发的点点滴滴

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

　　按提示输入相关配置信息即可

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中的任务：$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文件夹下，把安装包的信息写入package.json文件的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‘]);