连接时，将自定义字符串前置到JS文件

Question

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

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

Answer 1

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

以下是使用的插件和定义的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-memory"插件调用周围插入调试插件，比如这个例子：

.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任务的部分内容。