如何设置gulp将多个文件捆绑成一个？

Question

这似乎是一个非常简单的问题,但花了最后3个小时来研究它,发现如果不使用watchify,每次保存新文件都会很慢.

这是我的目录树:

gulpfile.js
package.json

www/
  default.htm
     <script src="toBundleJsHere/file123.js"></script>

  toBundletheseJs/
    componentX/
       file1.js
    componentY/
       file2.js
    componentZ/
      file3.js

  toPutBundledJsHere/
      file123.js

要求.在文件夹中每次创建或保存文件时,toBundleTheseJs/我希望将此文件重新分组toBundleJsHere/

我需要在package.json文件中包含哪些内容？

什么是我需要写入我的gulp文件的最小值？

这应该尽可能快,所以认为我应该使用browserify并观察.我想了解最小步骤,所以使用像jspm这样的包管理器这一点太过分了.

谢谢

Answer 1

首先,你应该听取所需目录的变化:

watch(['toBundletheseJs/**/*.js'], function () {
        gulp.run('bundle-js');
    });

然后bundle-js任务应该捆绑您的文件.推荐的方法是gulp-concat:

var concat = require('gulp-concat');
var gulp = require('gulp');

gulp.task('bundle-js', function() {
  return gulp.src('toBundletheseJs/**/*.js')
    .pipe(concat('file123.js'))
    .pipe(gulp.dest('./toPutBundledJsHere/'));
});