前端工程化（Gulp、Webpack）-Gulp

简介

用自动化构建工具增强你的工作流程！

官网：https://gulpjs.com/

中文网：https://www.gulpjs.com.cn/

基于Nodejs的自动任务运行器，采用流的方式，借鉴了Unix操作系统的管道（pipe）思想，仅在最后一步才输出文件到磁盘，快速高效。

官方仅提供5个API（4.0又增加了几个），利用这5个API我们可以完成测试、检查、合并、压缩、格式化、自动刷新、部署、监听等任务。而且因为只有5个API，上手也是特别简单。

官方API

gulp.src(globs[, options])

匹配需要处理的源文件

• globs：源文件匹配路径

可以使用的模式:

“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文件)；

// 例
gulp.src(['style/**/*.scss','!style/{extend,page}/*.scss'])

• options[Object]：有3个属性buffer、read、base

options.buffer：  类型：Boolean  默认：true 设置为false，将返回file.content的流并且不缓冲文件，处理大文件时非常有用；

options.read：  类型：Boolean  默认：true 设置false，将不执行读取文件操作，返回null；

options.base：  类型：String  设置输出路径以某个路径的某个组成部分为基础向后拼接

gulp.dest(path[, options])

任务完成后文件输出的路径

• path: 文件将被写入的路径（输出目录）,也可以传入一个函数，在函数中返回相应路径;
• options[Object]: 有两个属性

options.cwd：  类型：String  默认：process.cwd()：输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效；

options.mode：  类型：String  默认：0777 八进制权限字符，用以定义所有在输出目录中所创建的目录的权限；

// 例
.pipe(gulp.dest('./build/minified_templates'));

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

定义一个任务

• name：任务的名字，不能使用空格
• deps：前置任务，一个包含任务列表的数组，这些任务会在你当前任务运行之前完成（记得使用正确的异步执行方式：使用cb或者返回stream或promise ）。

//callback
// 在 shell 中执行一个命令
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
  // 编译 Jekyll
  exec('jekyll build', function(err) {
    if (err) return cb(err); // 返回 error
    cb(); // 完成 task
  });
});

//返回stream
gulp.task('somename', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
  return stream;
});

//返回promise
var Q = require('q');

gulp.task('somename', function() {
  var deferred = Q.defer();

  // 执行异步的操作
  setTimeout(function() {
    deferred.resolve();
  }, 1);

  return deferred.promise;
});

• fn：定义任务所要执行的一些操作。

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

监视文件，并且可以在文件发生改动时候执行指定任务

• glob：要监听的文件入口，可以是一个也可以是多个（数组表示）
• tasks：文件改变要执行的任务的名称数组
• cb：文件改变要执行的回调函数

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

gulp.start(taskName1,taskName2,...)

执行指定任务

• taskName：任务名称

开始使用

一、安装

• 全局安装

npm install --global gulp

• 项目依赖安装

npm install --save-dev gulp

二、创建配置文件

在文件根目录创建一个名为gulpfile.js的文件。

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

三、新建任务

根据自己需要，安装插件并且配置相应的任务。

以下通过几个案例来学习：

清除文件（del）

var gulp = require('gulp'),
    del = require('del');
gulp.task('clear', function (cb) {
    del(['static/css', 'static/html', 'static/js', 'static/picture', 'static/skin', 'tour.xml'], cb);
});    

Less编译及压缩（gulp-less、gulp-clean-css）

var gulp = require('gulp'),
    less = require('gulp-less'),
    cleanCSS = require('gulp-clean-css');
 
gulp.task('runLess', function () {
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(cleanCSS({
            compatibility: 'ie8', //兼容
            keepSpecialComments: '*' //是否保留前缀
        }))
        .pipe(gulp.dest('src/css'));
});

图片压缩(gulp-imagemin,gulp-changed)

var gulp = require('gulp'),
    changed = require('gulp-changed'),
    imagemin = require('gulp-imagemin');
gulp.task('picmin', function () {
    return gulp.src('./dev/static/picture/**/*.{jpg,jpeg,png,gif,ico,JPG}')
        .pipe(changed('./static/picture')) //缓存起来，只有图片变动时才压缩，提高效率
        .pipe(imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
        }))
        .pipe(gulp.dest('./static/picture'));
});

启动本地服务器（browserSync）

var gulp = require('gulp'),
    browserSync = require('browser-sync').create();
gulp.task('server', function () {
    browserSync.init({
        server: {
            baseDir: './', // 在 dist 目录下启动本地服务器环境，自动启动默认浏览器
            proxy: '10.6.63.234'
        }
    });
});

默认任务

可以定一个名为default的task，这个task就是默认的任务（直接运行gulp即可），可以在这里运行其他的任务，个人习惯把整套构建流程都放在这里调用。
插件可以在网上搜索或者在npm官网查找，一般以gulp开头，每个插件的配置有所不同，可以在插件介绍页查看，就不一一介绍了。

四、运行任务

在命令行中运行任务

gulp taskName //运行指定名字的task
gulp          //运行默认任务

可以在package.json的scripts中配置常用操作，然后通过npm run 方式调用

常用技巧

参见：https://www.gulpjs.com.cn/doc...

配合webpack

参见：https://www.jianshu.com/p/972...