1. Gulp

之前也提到了Gulp，其实Gulp更像是一个集成工具，Gulp提供了一套pipeline的工具集，然后也提供了一些列的支持Gulp标准的插件，然后Gulp可以将各个插件集成到Gulp的pipeline中执行。

像我们之前提到的bundle，ES6 -> ES5，minify，uglify，以及文件的copy等等，都可以通过Gulp集成到一个任务序列中执行。

2. babel

babel用来进行从ES6 -> ES5的语言转化，因为不是现金所有的浏览器都支持ES6，所以如果需要考虑浏览器兼容性，在每一次进行js文件打包的时候都要做一次babel translation。

3. bundle

我们之前也提到过，browserify用来做js的bundle，本例中，使用另一种工具做bundle -- merge-stream。

而且在Gulp中，基本上每一个流行的工具，都能在npm中找到Gulp的Plugin。

4. Demo

4.1 安装插件

# 在demo文件夹中执行
cd demo
# 创建npm项目
npm init
# 全局安装gulp，否则无法执行gulp命令
npm i -g gulp
# 安装gulp以及插件: 
# gulp: 用来创建gulp task
# gulp-copy: 用来copy文件
# gulp-order: 用来指定gulp中的执行文件顺序
# gulp-concat: 用来指定merge之后的文件名
# gulp-sourcemaps: 用来enable调试信息
# del: 用于删除文件及文件夹
# merge-stream: 用来bundle
# @babel/core: babelify的依赖项
# babelify: gulp中的babel插件，用于做ES6->ES5的translation
# @babel/preset-env: 用来设置要设置的babel之后的es版本
npm i -D gulp gulp-copy gulp-order gulp-concat gulp-sourcemaps del merge-stream @babel/core babelify @babel/preset-env

4.2 创建`gulpfile.js`

gulpfile.js是gulp项目的描述文件，当在项目文件夹中执行gulp命令时，gulp工具会自动扫描文件夹中的gulpfile.js文件，然后执行其中的task。

var gulp = require('gulp');
var merge = require('merge-stream');
var order = require('gulp-order');
var del = require('del');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('clean', function () {
    return del(['bundle.js']);
});

/**
 * 第一步，定义nerge-stream的文件集合
 * 第二步，初始化sourcemaps，enable js map
 * 第三步，定义bundle的顺序
 * 第四步，指定es标准
 * 第五步，指定输出文件名称
 * 第六步，enable debug
 * 第七步，定义输出路径
 * 
 * Note: 这里将bundle.js输出到当前文件夹，为了方便vscode调试，发现执行gulp的路径需要与bundle文件输出路径相同，否则vscode无法命中断点。
*/
gulp.task('bundle', function () {
    return  merge(gulp.src(['./init.js', './promiseEventloop.js'])//  merge(gulp.src(['./*.js', '!./gulpfile.js'])
        .pipe(sourcemaps.init())
        .pipe(order(['init.js', '*.js']))
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(concat('bundle.js'))
        .pipe(sourcemaps.write({ includeContent: false, sourceRoot: './' })) // enable debugging
        .pipe(gulp.dest('./')));
});

exports.build = gulp.series('clean', 'bundle');

// package.json 配置babel的demo
"devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/preset-env": "^7.16.7",
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-copy": "^4.0.1",
    "gulp-order": "^1.2.0",
    "gulp-sourcemaps": "^3.0.0",
    "merge-stream": "^2.0.0"
    //.......
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  }

在bundle.js文件中就输出了bundle过后的ES5的js代码。

02.gulp+bundle+babel