gulp

Gulp 允许你使用现有 JavaScript 知识来书写 gulpfile 文件，或者利用你所掌握的 gulpfile 经验来书写普通的 JavaScript 代码。

gulp有项目上线，HTML,CSS,JS 文件压缩合并，语法转换(es6,less...)，公共文件抽离，修改文件浏览器自动刷新等作用。

gulp执行基本流程

1.安装gulp

npm install --save-dev gulp

2创建gulpfile.js文件

• gulpfile.js文件会在运行gulp的时候自动被加载。

• 此文件可用类似 src()、dest()、series() 或 parallel() 函数之类的 gulp API，纯avaScript 代码或 Node 模块，任何导出（export）的函数都将注册到 gulp 的任务（task）。

任务分为私有和公有任务,私有不能通过gulp调用，导出的任务才属于公有任务。

const { series } = require('gulp');
//私有任务
function cb(){
  //任务详情
}
exports.default = cb；

3,执行gulp命令

gulp

gulp创建任务

务分为私有和公有任务,私有不能通过gulp调用，导出的任务才属于公有任务。

导出任务

const { series } = require('gulp'); 
function clean(cb) { 
   // body omitted cb();
 } 
 
 function build(cb) { 
  // body omitted cb(); 
 } 
 exports.build = build; exports.default = series(clean, build);

组合任务：

const { series，parallel } = require('gulp'); 
function transpile(cb) { 
 // body omitted cb(); 
} 

function bundle(cb) { 
 // body omitted cb(); 
} 
exports.build = series(transpile, bundle);
exports.build = parallel(transpile, bundle);

• series:任务顺序执行、
• parallel：任务并行执行
• series() 和 parallel() 可以被嵌套到任意深度

异步任务

gulp只支持异步任务，不再支持同步任务:

• 当从任务（task）中返回 stream、promise、event emitter、child process 或 observable 时，成功或错误值将通知 gulp 是否继续执行或结束。如果任务（task）出错，gulp 将立即结束执行并显示该错误。

• 当使用series()组合多个任务时，任何一个任务的错误将导致整个任务组合结束，并且不会进一步执行其他任务。当使用 parallel() 组合多个任务（task）时，一个任务的错误将结束整个任务组合的结束，但是其他并行的任务（task）可能会执行完，也可能没有执行完。

处理文件

• gulp 暴露了 src()处理文件，会生成一个node流。src() 也可以放在管道（pipeline）的中间，但是新加入的文件只对后续的转换有用。src() 可以工作在三种模式下：缓冲（buffering）、流动（streaming）和空（empty）模式。
• dest() 接受一个输出目录作为参数，并且它还会产生一个node流，通常作为终止流。dest() 可以用在管道（pipeline）中间用于将文件的中间状态写入文件系统。

const { src, dest } = require('gulp');
exports.default = function() { 
  return src('src/*.js') 
           .pipe(babel()) 
           .pipe(dest('output/'))
           .pipe(src('vendor/*.js'))
           .pipe(dest('output/')); 
}

gulp插件

常用插件：

    1.gulp-htmlmin:html文件压缩   
    2.gulp-css:压缩css  
    3.gulp-babel:JavaScript语法转化,es6转成es5
    4.gulp-less:less语法转化成css  
    5.gulp-uglify:压缩混淆JavaScript
    6.gulp-file-include:公共文件包含  
    7.browsersync:浏览器实时同步

插件使用：

插件经常是使用 .pipe() 方法并放在 src() 和 dest() 之间。他们可以更改经过流（stream）的每个文件的文件名、元数据或文件内容。

const { src, dest } = require('gulp'); 
const uglify = require('gulp-uglify'); 
const rename = require('gulp-rename'); 
exports.default = function() { 
    return src('src/*.js')    
             .pipe(uglify())                
             .pipe(rename({ extname: '.min.js' }))  
             .pipe(dest('output/')); }