gulp顺序执行+监听执行

原文链接：http://fenxianglu.cn/article/187

由于老项目的原因，维护的时候不得不重拾gulp架手架功能，不过在处理的过程中总是出现各种不可思议的结果，在网上查找了很多资料调试都不行，最终还是因为多了一个return的原因导致在watch的时候总是只执行一次，不过还好找到并解决了，根本原因还是对gulp脚本架不够熟悉啊。

下面把相应的依赖包和gulp.js内容贴出来仅供参考。

package.json：

{
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "chalk": "^2.4.2",
    "gulp": "^3.9.1",
    "gulp-babel": "^8.0.0",
    "gulp-chinese2unicode": "^1.0.1",
    "gulp-clean": "^0.4.0",
    "gulp-replace": "^1.0.0",
    "gulp-sequence": "^1.0.0",
    "gulp-uglify": "^3.0.0"
  }
}

gulp.js

const gulp = require('gulp');
const babel = require('gulp-babel');
const chinese2unicode = require('gulp-chinese2unicode');  // 中文转unicode
const clean = require('gulp-clean');                      // 请理文件
const uglify = require('gulp-uglify');                    // js压缩
const gulpSequence = require('gulp-sequence');            // 同步
const chalk = require('chalk');                           // 粉笔

gulp.task('clean', function() {
    return gulp.src('./public/dist', {read: false, allowEmpty: true}).pipe(clean({force: true})); // 这里要return不然会并行
});
gulp.task('js', function() {
    gulp.src('./public/js/**/*.js') // 这里不能return，不然只会执行一次
    .pipe(babel({
        presets: ['@babel/preset-env']
    }))
    .pipe(uglify({mangle: true, compress: false}))
    .pipe(chinese2unicode())
    .on('error', function (err) {
       console.log(err.toString());
    })
    .pipe(gulp.dest('./public/dist/js'))
});
gulp.task('build', function(callback) {
    gulpSequence('clean', 'js', callback);
});

// 监听js变动
gulp.task('watch', function () {
    // 方式1：
    // var watcher = gulp.watch('./public/js/**/*.js', function() {
    //     gulp.run('build'); 
    // });
    // 方式2：
    gulp.watch('./public/js/**/*.js', ['build']);
});

命令行：

> gulp watch