javascript - 如果首先清理 dist 文件夹，Gulp 注入(inject)将忽略 css

Question

我有一个简单的 gulp 脚本。流程是:

1. 删除 dist 文件夹
2. 将 .html 和 .css 文件移动到新的 dist 文件夹
3. 编译 typescript 并将生成的 .js 移动到 dist 文件夹
4. 模仿.js
5. 将 .js 和 .css 注入(inject) .html

问题是，如果我先删除 dist 文件夹，则注入(inject)仅适用于 .js 文件。但是，如果我跳过 dist 文件夹的清理，它会创建一个正确的 .html(因为 .js 和 .css 都存在于 index.html 中)。有没有人遇到过这个问题？如果是这样，您是如何修复的？我猜这与流水线有关。

Gulp 版本:“^3.9.1”

var gulp = require('gulp');
var ts = require('gulp-typescript');
var minify = require('gulp-minify');
var inject = require('gulp-inject');
var del = require('del');

gulp.task('default', ['clean'], function () {
    gulp.start('scripts')
});

gulp.task('clean', function (cb) {
    del(['dist'], cb)
});

gulp.task('move', function () {
    console.log('-- gulp is running task "move"');
    gulp.src(['app/**/*.html', 'app/**/*.css'])
        .pipe(gulp.dest('dist'));
});

gulp.task('compile', ['move'], function () {
    console.log('-- gulp is running task "compile"');
    return gulp.src('app/**/*.ts')
        .pipe(ts({
            noImplicitAny: true,
            out: 'app.js'
        }))
        .pipe(gulp.dest('dist'));
});

gulp.task('compress', ['compile'], function () {
    console.log('-- gulp is running task "compress"');
    gulp.src('dist/**/*.js')
        .pipe(minify({
            ext: {
                src: '-debug.js',
                min: '.js'
            },
            noSource: true
        }))
        .pipe(gulp.dest('dist'))
});


gulp.task('scripts', ['compress'], function () {
    console.log('-- gulp is running task "scripts"');
    var target = gulp.src('dist/index.html');
    var sources = gulp.src(['dist/**/*.js', 'dist/**/*.css'], {read: false});
    return target.pipe(inject(sources, {relative: true}))
        .pipe(gulp.dest('dist'));
});

Answer 1

你遇到竞争条件是因为你没有正确发出信号 async completion在几个地方:

del不接受回调 cb，它返回 Promise .您需要从您的任务中返回该 Promise:

gulp.task('clean', function () {
  return del(['dist']);
});

流也需要从您的任务中返回。你没有在你的 move 和 compress 任务中这样做(除其他外)这意味着 gulp-inject 可能在所有 .css 文件已复制到 dist/。

gulp.task('move', function () {
  console.log('-- gulp is running task "move"');
  return gulp.src(['app/**/*.html', 'app/**/*.css'])
    .pipe(gulp.dest('dist'));
})

gulp.task('compress', ['compile'], function () {
  console.log('-- gulp is running task "compress"');
  return gulp.src('dist/**/*.js')
    .pipe(minify({
        ext: {
            src: '-debug.js',
            min: '.js'
        },
        noSource: true
    }))
    .pipe(gulp.dest('dist'));
});