前端工程化（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：任务名称

开始使用

1、安装

• 全局安装

npm install --global gulp

• 项目依赖安装

npm install --save-dev gulp

2、建立配置文件

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

var gulp = require('gulp');

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

3、新建任务

根据本身须要，安装插件而且配置相应的任务。

如下经过几个案例来学习：

清除文件（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开头，每一个插件的配置有所不一样，能够在插件介绍页查看，就不一一介绍了。

4、运行任务

在命令行中运行任务

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

能够在package.json的scripts中配置经常使用操做，而后经过npm run 方式调用

经常使用技巧

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

配合webpack

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