2

ビルド プロセスを既存のカスタム bash ビルド スクリプトから gulp に移行しようとしています。ブートストラップ、レイジーロードなどのいくつかの非圧縮オープンソース JS ファイルと独自の JS ファイルを連結します。各 JS ファイルを順番に醜くし (ライセンスも削除します)、必要に応じてそれらの一部にカスタム ライセンス テキストを追加し、連結して出力​​ 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 に答える