在连接时将自定义字符串添加到JS文件 [英] Prepend custom strings to JS files while concatenating

问题描述

我正尝试将我们的构建过程迁移到现有的自定义bash构建脚本中。我们连接了几个未启用的开源JS文件，比如bootstrap，lazyload ...和我们自己的JS文件。我们依次订购每个JS文件（同时删除它们的许可证），根据需要在其中一些文件上添加自定义许可证文本并连接以创建输出JS文件。自定义许可证文本当前保存为bash脚本中的字符串。

如何在不创建中间文件的情况下实现这个功能？
也可以有选择地避免uglifying一些JS脚本吗？

解决方案

好的，我花了一些时间学习吞咽和它的插件，这里是一个工作版本。这里的要点是使用从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'）; 
 
 //保存各种JS文件及其处理的结构
 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 * /'
}，{
名称：'lazyload'，
 src：['path / to / lazyload.js']，
 run_lint：false，
 run_uglify：true，
许可证：'/ * 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'，[ 构建：JS’]）; 
 $ b 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（{ b $ b compress：{
 drop_console：true 
} 
}）））
 .pipe（concat.header（val.license +'\\\
'））; 
 
 streams.push（stream）; 
}）; 
 
 es.merge.apply（this，streams）
 .pipe（remember（'scripts '））//将所有文件添加到流中
 .pipe（concat（Config.js.output_file））
 .pipe（gulp.dest（Config.js.output_dir））; 
}）; 
  
如果您想调试，一个好的选择是将插件'gulp-remember'plugin call above：
  .pipe（debug（{title：'before remember：'}））
 .pipe（记住（'scripts'））//将所有文件添加到流中
 .pipe（debug（{title：'after after：'}））
  
 
 
 
以下是手表任务： 
 
 
  gulp.task（'watch'，function（）{
 var watch_list = []; 
 each（Config.js.src，function（val，key，array）{
 watch_list。 push.apply（watch_list，val.src）; 
}）; 
 
 //观看.js文件
 var watch = gulp.watch（watch_list，['build'] ）; 
 
 watcher.on（'change'，function（event）{
 console.log（'File'+ event.path +''+ event.type +'，running任务..'）; 
 if（event.type ==='deleted'）{//如果文件被删除，忘记它
 delete cache.caches [脚本] [event.path]; 
 remember.forget（脚本，event.path）; 
} 
}）
}）; 
  
您可以使用lazypipe（）来重用部分构建：具有普通构建的js任务。 p> 
I am trying to migrate our build process to gulp from existing custom bash build script. We concatenate several unminified opensource JS files like bootstrap, lazyload, ... and our own JS files. We uglify each JS file (removing their licenses as well) in an order, prepend custom license text to some of them as required and concatenate to create the output JS file. The custom license text are currently kept as strings in the bash script.


How to achieve this in gulp without creating intermediate files?
Will it also be possible to selectively avoid uglifying some JS scripts?
解决方案
Ok, I spent some time learning up gulp and it's plugins and here is a working version. The points here are using the foreach on each JS retrieved from the JSON config file, pushing the streams to an array and finally using merge on the array streams.

Here are the plugins used and the JSON structure defined:
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: ''
    }]
  }
}
The build task, with caching as we will be using it in development also:
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));
});
If you would like to debug, a good option will be to insert debug plugin like this example around the 'gulp-remember' plugin call above:
.pipe(debug({title: 'before remember:'}))
.pipe(remember('scripts')) // add back all files to the stream
.pipe(debug({title: 'after remember:'}))
And here's the watch task:
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);
    }
  })
});
You can use lazypipe() to reuse parts of the build:js task with normal build.

                        
这篇关于在连接时将自定义字符串添加到JS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！