Question

我正在尝试使用'gulp-inject'将一个连接的css文件注入我的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));
});

Gulp多个src

1 个答案: