Question

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

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

Answer 1

好的，我花了一些时间学习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-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任务和正常构建。

在连接时将自定义字符串添加到JS文件

1 个答案: