如何在 Gulp 任务中正确读取多个文件

Question

我有一个 Gulp 任务，它渲染一个包含 Lodash 模板的文件并将其放在我的构建目录中。我使用gulp模板进行渲染。

为了正确呈现，需要从我的构建目录中传递我的模板文件列表。我使用 glob 获得此列表。由于 glob API 是异步的，我被迫像这样编写我的任务：

gulp.task('render', function() {
    glob('src/**/*.js', function (err, appJsFiles) {
        // Get rid of the first path component.
        appJsFiles = _.map(appJsFiles, function(f) {
            return f.slice(6);
        });
        // Render the file.
        gulp.src('src/template.html')
            .pipe(template({
                scripts: appJsFiles,
                styles: ['style1.css', 'style2.css', 'style3.css']
            }))
            .pipe(gulp.dest(config.build_dir));
    });
});

这对我来说似乎不优雅。有没有更好的方法来编写这个任务？

Answer 1

解决特定问题的最简单方法是使用 glob 的同步模式，该模式位于您链接到的文档中。 然后返回gulp.src的结果。

gulp.task('render', function() {
    var appJsFiles = _.map(glob.sync('src/**/*.js'), function(f) {
        return f.slice(6);
    });
    // Render the file.
    return gulp.src('src/template.html')
        .pipe(template({
            scripts: appJsFiles,
            styles: ['style1.css', 'style2.css', 'style3.css']
        }))
        .pipe(gulp.dest(config.build_dir));
});

Answer 2

如果您希望任务异步运行，请进行回调。

gulp.task('render', function(cb) {
    glob('src/**/*.js', function (err, appJsFiles) {
        if (err) {
            return cb(err);
        }
        // Get rid of the first path component.
        appJsFiles = _.map(appJsFiles, function(f) {
            return f.slice(6);
        });
        // Render the file.
        gulp.src('src/template.html')
            .pipe(template({
                scripts: appJsFiles,
                styles: ['style1.css', 'style2.css', 'style3.css']
            }))
            .pipe(gulp.dest(config.build_dir))
            .on('end', cb);
   });
});