Gulp 4 构建 JavaScript

• 构建时根据命令行参数替换字符
• 过滤文件
• 对文件进行排序
• 合并压缩输出

// defaultTask.js
const { src, dest} = require('gulp');
const argv = require('yargs').argv
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const debug = require('gulp-debug');
const filter = require('gulp-filter');
const order = require('gulp-order');
const rename = require('gulp-rename');
const replace = require('gulp-replace');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');

// 受 src(globs, {base}) 中 '/**/*.js' globs 模式，或 {base: './'} 影响，需要相对路径
const ORDER = [ 
	'src/app.js',
	'src/add.js',
	'src/reduce.js',
	'src/sum.js',
	'src/main.js'
]

const FILTER = filter('src/app.js', {restore: true});

function defaultTask(cb) {
  src('src/*.js', { base: './', allowEmpty: true })
  	.pipe(sourcemaps.init())
  	.pipe(FILTER)
  	.pipe(debug({title: 'replace:'}))
  	.pipe(replace('APP_I18N', () => {
  		if (argv && argv.i18n) {
  			return argv.i18n;
  		} else {
  			return 'en';
  		}
  	}))
  	.pipe(FILTER.restore)
  	.pipe(debug({title: 'restore:'}))
  	.pipe(order(ORDER))
  	.pipe(debug({title: 'order:'}))
    .pipe(babel({ presets: ['@babel/env'] }))
    .pipe(concat('main.js'))
    .pipe(dest('output/'))
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(sourcemaps.write('.'))
    .pipe(dest('output/'));
  cb();
}

exports.default = defaultTask

// module.exports 初始值为 {} 空对象
// exports 指向 module.exports，图方便，可直接在 exports 对象上添加方法，表示对外输出的接口
// 不能直接将 exports 指向一个值，这样将会断开 exports 对 module.exports 的引用
// 模块对外接口仅一个，可用 module.exports = fn/obj; 输出
// require() 返回的是 module.exports，不是 exports

// gulpfile.js
// series 用于同类型事务、资源中不同操作，有先后顺序，下一个依赖上一个
// parallel 用于不同类型事务、资源间的操作，可以并行，互不影响
const { series, parallel } = require('gulp');

const defaultTask = require('./defaultTask').default;

exports.build = series(defaultTask);

{
  "name": "test_gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "gulp build --i18n cn"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-debug": "^4.0.0",
    "gulp-filter": "^6.0.0",
    "gulp-order": "^1.2.0",
    "gulp-rename": "^1.4.0",
    "gulp-replace": "^1.0.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2",
    "yargs": "^14.2.0"
  }
}