Gulp4.0入门和实战

gulp4.0入门和实战

我最近遇到须要优化web的性能的任务，而后就捣鼓了一些对资源文件优化压缩的方案。因为以前的项目中有使用到gulp，因此在须要处理的web项目中也优先使用这个技术。

先聊聊gulp是什么？
gulp被称为基于流的自动化构建工具，也是用NodeJS编写的额。使用NodeJs对文件流的异步处理，能够对资源文件（js和css以及图片）进行优化处理，包括文件的合并和文件内容的压缩。最重要的是，这些工做都是自动化的，只要咱们编写好gulpfile.js文件便可！
相较于webpack, gulp也更简单，更基于面向过程的编程，适合需求简单的打包压缩工做。

最新版本的gulp是4.x，和以前的3.x的gulp有所不一样，把cli分离出去了，因此须要单独安装gulp-cli。
在项目中使用gulp就简单三步：

1. 安装gulp-cli

npm install gulp-cli -save

2. 安装gulp

npm install gulp -D --save

3. 建立gulpfile.js

这第三步是和业务有关的，好比我想对一些css和js文件进行优化，那么须要引入gulp和须要的plugin，代码以下。

// 引入gulp对象和插件
const {src, dest} = require('gulp');
const {series} = require('gulp');
const cssMin = require('gulp-minify-css');
const uglify=require('gulp-uglify');
const concat = require('gulp-concat');

而后封装两个方法，分别处理css文件和js文件。首先是针对css文件的处理，以下：

function dealCss() {
    return src([
        './myapp/static/css/mobile.css',
        './myapp/static/css/all.css',
        './myapp/static/css/tablet.css',
        './myapp/static/css/wag.css'
    ]).pipe(concat('base.min.css')) // 合并成指定文件
        .pipe(cssMin()) // 压缩
        .pipe(dest('./myapp/css')); // 设置输出路径

上面的代码就把mobile.css、all.css和tablet.css以及wag.css合并成一个文件base.min.css，并作了压缩优化（minize）。
在编写一个js文件的处理，以下：

function dealJs() {
   return src([
       './myapp/js/image.js',
       './myapp/js/bar.js',
       './myapp/js/search.js',
       './myapp/js/tiny-images.js'
   ]).pipe(concat('imagepage.min.js'))
       .pipe(uglify({ mangle : false }))
       .pipe(dest('./myapp/pure/js/'));
}

最后就是把这两个定义的方法（在gulp来看就是须要被回调的任务）放置到任务队列里面，有两种选择，一种是使用并行的方式执行，一种是使用同步的方法执行，也就是一个任务执行完再按照顺序执行下一个任务。

这里咱们不缺时间，就顺序执行便可：

exports.default =series(dealCss, dealJs);

完整的代码以下所示：

// 引入gulp对象和插件
const {src, dest} = require('gulp');
const {series} = require('gulp');
const cssMin = require('gulp-minify-css');
const uglify=require('gulp-uglify');
const concat = require('gulp-concat');

function dealCss() {
    return src([
        './myapp/static/css/mobile.css',
        './myapp/static/css/all.css',
        './myapp/static/css/tablet.css',
        './myapp/static/css/wag.css'
    ]).pipe(concat('base.min.css')) // 合并成指定文件
        .pipe(cssMin()) // 压缩
        .pipe(dest('./myapp/css')); // 设置输出路径
    
function dealJs() {
   return src([
       './myapp/js/image.js',
       './myapp/js/bar.js',
       './myapp/js/search.js',
       './myapp/js/tiny-images.js'
   ]).pipe(concat('imagepage.min.js'))
       .pipe(uglify({ mangle : false }))
       .pipe(dest('./myapp/pure/js/'));
}

exports.default = series(dealCss, dealJs);

执行gulp命令就能够自动完成上面两个任务，gulp真的很高效！

还能够选择并行的执行多个任务，只须要把最后一行代码改成：

exports.default = parallel(dealCss, dealJs);

parallel()可让多个任务被并行执行，一个任务发生错误，其余任务不受影响。而series必行安顺序执行，因此一旦有报错，后面的任务就不会被执行。一般若是有报错，咱们确定须要解决它，因此在平常优化资源的场景下选择series更为经常使用。