javascript - Gulp多个src

Question

我正在尝试使用“gulp-inject”将串联的 css 文件注入(inject)到我的 index.html 中，然后对我的文件进行版本控制。我可以让它单独工作，但我想做的是在单个任务中编译所有内容，以便我可以针对某些文件和index.html运行 assetVersion() 。我遇到的问题是我的“styles.min.css”没有写入磁盘，我不确定如何组合流来实现我的目标。有人可以帮忙吗？

gulp.task('compile',['clean'],function() { 

    // CSS - minify, concat to one file and copy
    gulp.src(paths.css + '*', { base: paths.base })
        .pipe(cleanCSS())
        .pipe(concat('styles.min.css'))
        .pipe(gulp.dest(paths.dist + paths.css));

    // Images - minify and copy
    gulp.src(paths.images + '*', { base: paths.base })
        .pipe(imagemin())
        .pipe(gulp.dest(paths.dist));

    // Index.html - inject the concatenated css, asset version and copy to dist
    gulp.src(paths.index)
        .pipe(inject(gulp.src(paths.dist + paths.css + 'styles.min.css', {read: false})))
        .pipe(debug())
        .pipe(assetVersion())
        .pipe(gulp.dest(paths.dist)); 

});

Answer 1

您可以使用run-sequence强制同步运行每个任务。

var runSequence = require('run-sequence')

gulp.task('compile', ['clean'], function() {
    return runSequence(['compile:css', 'compile:images'], 'compile:version');
});

gulp.task('compile:css', function() {

    // CSS - minify, concat to one file and copy
    return gulp.src(paths.css + '*', { base: paths.base })
        .pipe(cleanCSS())
        .pipe(concat('styles.min.css'))
        .pipe(gulp.dest(paths.dist + paths.css));
});

gulp.task('compile:images', function() {
    // Images - minify and copy
    return gulp.src(paths.images + '*', { base: paths.base })
        .pipe(imagemin())
        .pipe(gulp.dest(paths.dist));
});

gulp.task('compile:version', function() {
    // Index.html - inject the concatenated css, asset version and copy to dist
    return gulp.src(paths.index)
        .pipe(inject(gulp.src(paths.dist + paths.css + 'styles.min.css', { read: false })))
        .pipe(debug())
        .pipe(assetVersion())
        .pipe(gulp.dest(paths.dist));
});