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

Question

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

为了正确渲染，需要向我的模板传递构建目录中的文件列表。我使用 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

解决特定问题的最简单方法是使用 synchronous mode for 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));
});