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');

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

Answer 2

正确答案是：使用 gulp 连接 JS 文件没有合法的必要。因此，您永远不应该这样做。

相反，请查看适当的 JS 打包器，这些打包器会根据某些既定格式（如 commonsjs、amd、umd 等）正确连接您的文件。

以下是更合适的工具列表：

请注意，我的回答是在 2020 年底左右，所以如果您是在遥远的未来阅读本文，请记住 javascript 社区发展迅速，因此可能会出现新的更好的工具。

Answer 3

var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('js', function (done) {
    // array of all the js paths you want to bundle.
    var scriptSources = ['./node_modules/idb/lib/idb.js', 'js/**/*.js'];
    gulp.src(scriptSources)
        // name of the new file all your js files are to be bundled to.
        .pipe(concat('all.js'))
        // the destination where the new bundled file is going to be saved to.
        .pipe(gulp.dest('dist/js'));
    done();
});

Answer 4

使用此代码将多个文件捆绑为一个。

gulp.task('scripts', function() {
      return gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js']) //files separated by comma
        .pipe(concat('script.js'))   //resultant file name
        .pipe(gulp.dest('./dist/')); //Destination where file to be exported
    });

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

4 个答案: