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

Question

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

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

Answer 1

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

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

Prepend custom strings to JS files while concatenating

gulp

gulp-concat

gulp-uglify