gulp基础和常用插件介绍

摘要：前提前端工程化是如今前端团队规范化管理项目和代码的概念，而前端工程化中往往是离不开前端自动化或打包工具这两种工具。参数介绍可以理解成一种类似于正则表达式的匹配模式，其值可以为匹配形式，文件路径，或者文件路径数组。

前提：前端工程化是如今前端团队规范化管理项目和代码的概念，而前端工程化中往往是离不开前端自动化或打包工具这两种工具。本文将详细介绍其中一种常用的前端自动化工具---gulp.js

- 入门：

安装方式：

  全局安装： npm install --g gulp
  局部（项目安装）： npm install --save-dev gulp

gulp配置文件：

在项目根目录下创建一个gulpfile.js文件，其中default任务为主任务，其他为功能任务；
语法：

var gulp = require("gulp");
gulp.task("default",function(){...});

运行方式：

在命令行中直接输入gulp运行，或者在webstorm中在对应的gulpfile.js点中，然后右键，选择show gulp task方式就能运行；

- gulp的API：

一）gulp.src方法：

定义：该方法会匹配对应的文件，并以虚拟文件流（包含路径，文件名，内容）的形式返回；

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

特点：因为返回的文件流是类似于Readable Streams的形式，所以可以利用pipe管道的方式传输，处理文件流。

参数介绍：

a）globs：可以理解成一种类似于正则表达式的匹配模式，其值可以为匹配形式，文件路径，或者文件路径数组。
*：匹配任何字符串但不识别路径分隔符（‘/’）

eg： gulp.src("./build/*.js")   匹配build文件中所有js文件

**：匹配任何字符串包括‘/’

eg：gulp.src("**.js")  匹配任何路径下的js文件

[...] ： 枚举

eg:  gulp.src("[abc].js")     匹配a.js或者b.js或者c.js

[!...] : 枚举中括号中以外的一切字符串

eg：gulp.src("[!abc].js")    匹配d.js等等js文件

? : 职匹配一个字符串

eg：gulp.src("?.js")   匹配a.js等等js文件

b）option：里面有buffer，read，base配置项，其中base项是关于文件流保存的路径相关（具体放在dest方式中阐述）

二）gulp.dest方法：

定义：将文件流写入到指定的路径文件中，并继续输出该文件流；
语法：gulp.dest(path [,option])
注意事项：
a)文件流写入的文件名只能由流入的文件流定义；
b）path是路径，不能是文件名；
c）src中base项默认是匹配符之前的字符串路径，但也可以人为设置，例子阐述：

gulp.src("a/b/*/[ab].js")
    .pipe(gulp.dest("./build"))

解释：默认base为a/b，塞进文件流的文件名为*/[ab].js，所以新建的文件的路径为./build/*/[ab].js

gulp.src("a/b/*/c/d.js",{base:"a"})
    .pipe(gulp.dest("./build"))

解释：base现是a，塞进文件流的文件名为b/*/c/d.js,所以新建的文件路径为./build/b/*/c/d.js

d）dest方法输出的文件流也可以被pipe传输；

三）gulp.task方法：

定义： 在gulp中定义一个任务，其中主任务为default；
语法： gulp.task(name [,deps] ,fn)
参数：

  name是任务名；
  deps是依赖的任务数组，是在当前任务之前执行的；
  fn：当前任务内容；

情景：
a) gulp.task("default",function(){...})：最简单模式；
b）gulp.task("default",["A1","A2"]):default是由A1,A2两个任务组成的；
c）gulp.task("default", ["A1","A2"],function(){...}):先执行完A1,A2，再执行default任务；

question： 若任务列表A1,A2中，A1存在异步操作，则执行A2时，A1还很可能未执行完；
resolve：
A) fn任务函数可以引进一个回调函数参数，该参数可以告诉外界该任务是否执行完；

eg：   gulp.task("A1",function(cb){
           setTime(function(){
           console.log(1);
           cb();
           },2000);
        })
        gulp.task("A2",function(){console.log(2);})
        gulp.task("default",["A1","A2"],function(){
             console.log(3)
        })
        输出结果为：2 1 3

B）任务函数返回一个流对象，适用于gulp.src方法；

gulp.task("A",function(){
             return gulp.src("./a.js")
                        .pipe(插件)
          })
gulp.task("deafult",["A"],function(){...})

C)返回一个Promise对象；

gulp.task("A",function(){
            return new Promise( (res,rej) => {
            })
          })
gulp.task("default",["A"]);

四）gulp.watch方法：

定义：该方法是用来监听文件的变化；
语法一：gulp.watch(glob [,opts] , tasks)
语法二：gulp.watch(glob [,opts] , function(event){...})
event是一个事件对象；
event.type为added（添加类型）；changed（改变类型）；deleted（删除类型）
event.path:变化的文件路径；

- 常用gulp插件：

gulp有很多插件，而本文列举出一些常用的插件

gulp-uglify插件

用途：用来压缩js文件
用法：

var uglify = require("gulp-uglify");
gulp.task("uglifyJS",function(cb){
    gulp.src("./demo/*.js")
        .pipe(uglify())
        .pipe(gulp.dest("build"));
    cb();
});

gulp-minify-css插件

用途：用来压缩css文件
用法：

var minifyCss = require("gulp-minify-css");
gulp.task("minifyCss",function(cb){
    gulp.src("./demo/*.css")
        .pipe(minifyCss())
        .pipe(gulp.dest("./build"));
    cb();
});

gulp-minify-html插件

用途：合并html文件
用法：

var miniHtml = require("gulp-minify-html");
gulp.task("miniHtml",function(cb){
    gulp.src("./src/*.html")
        .pipe(miniHtml())
        .pipe(gulp.dest("./build"));
});

gulp-connect插件

用途：自动刷新页面
用法：

var connect = require("gulp-connect");
gulp.task("connect",function(){
    connect.server({
        root:"src",
        livereload:true,
    })
});
gulp.task("watchHtml",function(){
    gulp.watch("./src/*.html",function(){
        gulp.src("./src/*.html")
            .pipe(connect.reload());
    })
});

gulp-jshint插件

用途：用来检查js语法
用法：

var jshint = require("gulp-jshint");
gulp.task("checkJs",()=>{
    gulp.src("./src/*.js")
        .pipe(jshint())
        .pipe(jshint.reporter())
});

gulp-concat插件

用途：合并多个js或者css文件
用法：

var concat = require("gulp-concat");
gulp.task("concat",()=>{
    gulp.src("./*/*.js")
        .pipe(concat("all.js"))
        .pipe(gulp.dest("./build"));
});

gulp-rename:

定义;将文件改名；
语法：
a）rename（filename）:将文件直接改为指定文件名；
b）rename（{dirname："A" ,basename："B" ,prefix："C-",suffix："-D", extname：".txt"}）:将文件名改为A/C-B-D.txt；
C）rename（function（path）{}）:path为一个对象，包含B）中所有属性；

var rename =require("gulp-rename");   
gulp.task("rename",()=>{              
    gulp.src("./demo/*.css")          
        .pipe(rename({                
            suffix:".min",            
            extname:".less"           
        }))                           
        .pipe(gulp.dest("./build"));  
})                                    

参考文档：
gulp文档