Gulp gulpfile.js 模块化

Gulpfile 模块化

大部分用户起初是将所有业务逻辑都写到一个 gulpfile 文件中。随着文件的变大，无论怎么重构都会显得很臃肿；

如果 task 较多或者较复杂，可以创建 gulpfile.js 目录，在目录中拆分 task 为多个文件，只要保证该目录下有个 index.js 作为入口即可。

每个任务（task）可以被分割为独立的文件，然后导入到 gulpfile 文件中并组合，这样的方式。这不仅使事情变得井然有序，而且可以对每个任务（task）进行单独测试，或者根据条件改变组合。

步骤如下

• 创建 gulpfile.js 的目录，
• 该目录中创建一个名为 index.js 的文件，该文件被当作 gulpfile.js 使用。
• 该目录中还可以包含各个独立的任务（task）模块。

gulpfile.js/index.js

代码如下

// test.js 文件内像传统gulpfile.js一样的写法
const test = require('./test');

exports.default = function () {
  // 使用 test 下的默认任务
  return test.default()
}

gulpfile.js/test.js

代码如下

const { src, dest } = require('gulp');
// babel
// npm install --save-dev gulp-babel @babel/core @babel/preset-env
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

exports.default = function () {
  return src('src/*.js')
    // 把 src 下面的文件经过babel转义
    .pipe(babel({
      presets: ['@babel/env']
    }))
    // 添加vendor下的文件
    .pipe(src('vendor/*.js'))
    // 把源文件移动到output/
    .pipe(dest('output/'))
    .pipe(uglify())
    // 把源文件，改为`.mini.js` 移动到output
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
}

运行的如下