2

我正在尝试将我们的构建过程从现有的自定义 bash 构建脚本迁移到 gulp。我们连接了几个未压缩的开源 JS 文件，如 bootstrap、lazyload ......以及我们自己的 JS 文件。我们按顺序对每个 JS 文件（也删除它们的许可证）进行 uglify，根据需要将自定义许可证文本添加到其中一些文件并连接以创建输出 JS 文件。自定义许可证文本当前在 bash 脚本中保存为字符串。

如何在不创建中间文件的情况下在 gulp 中实现这一点？是否也可以选择性地避免丑化一些 JS 脚本？

4

1 回答 1

2

好的，我花了一些时间学习 gulp 和它的插件，这是一个工作版本。这里的要点是在从 JSON 配置文件中检索到的每个 JS 上使用 foreach，将流推送到数组，最后在数组流上使用合并。

以下是使用的插件和定义的 JSON 结构：

var gulp = require('gulp');

var each = require('foreach');
var debug = require('gulp-debug');
var gulpif = require('gulp-if');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat-util');

var es = require('event-stream');
var cache = require('gulp-cached');
var remember = require('gulp-remember');

// Structure that holds the various JS files and their handling
var Config = {
  js: {
    output_dir: 'path/to/output/file/',
    output_file: 'outputfile.js',
    src: [{
      name: 'bootstrap',
      src: ['path/to/bootstrap.js'],
      run_lint: false,
      run_uglify: true,
      license: '/* bootstrap license */'
    }, {
      name: 'lazyload',
      src: ['path/to/lazyload.js'],
      run_lint: false,
      run_uglify: true,
      license: '/* lazyload license */'
    }, {
      name: 'inhouse-js',
      src: ['path/to/inhouse/ih-1.js', 'path/to/inhouse/ot/*.js'],
      run_lint: true,
      run_uglify: true,
      license: ''
    }]
  }
}

构建任务，带有缓存，因为我们将在开发中使用它：

gulp.task('build', ['build:js']);

gulp.task('build:js', function() {
  var streams = [];

  each(Config.js.src, function(val, key, array) {
    var stream = gulp.src(val.src)
      .pipe(cache('scripts'))
      .pipe(gulpif(val.run_lint, jshint('.jshintrc')))
      .pipe(gulpif(val.run_lint, jshint.reporter('jshint-stylish')))
      .pipe(gulpif(val.run_uglify, uglify({
                                     compress: {
                                       drop_console: true
                                     }
      })))
      .pipe(concat.header(val.license + '\n'));

    streams.push(stream);
  });

  es.merge.apply(this, streams)
    .pipe(remember('scripts')) // add back all files to the stream
    .pipe(concat(Config.js.output_file))
    .pipe(gulp.dest(Config.js.output_dir));
});

如果您想调试，一个不错的选择是在上面的“gulp-remember”插件调用周围插入调试插件，如下例所示：

.pipe(debug({title: 'before remember:'}))
.pipe(remember('scripts')) // add back all files to the stream
.pipe(debug({title: 'after remember:'}))

这是监视任务：

gulp.task('watch', function() {
  var watch_list = [];
  each(Config.js.src, function(val, key, array) {
    watch_list.push.apply(watch_list, val.src);
  });

  // Watch .js files
  var watcher = gulp.watch(watch_list, ['build']);

  watcher.on('change', function(event) {
    console.log('File '+ event.path +' was '+ event.type +', running tasks..');
    if (event.type === 'deleted') { // if a file is deleted, forget it
      delete cache.caches['scripts'][event.path];
      remember.forget('scripts', event.path);
    }
  })
});

您可以使用lazypipe() 在正常构建中重用部分 build:js 任务。

于 2015-02-27T21:41:01.450 回答