Gulp 注入忽略 css 如果 dist 文件夹首先被清除
Gulp inject ignores css if the dist folder was first cleaned
我有一个简单的 gulp 脚本。流程是:
- 删除 dist 文件夹
- 将 .html 和 .css 文件移动到新的 dist 文件夹
- 编译 typescript 并将生成的 .js 移动到 dist 文件夹
- 模仿 .js
- 将 .js 和 .css 注入 .html
问题是,如果我先删除 dist 文件夹,则注入仅适用于 .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'));
});
您 运行 进入了竞争条件,因为您在几个地方没有正确发出 async completion 信号:
del
doesn't take a callback cb
, it returns a Promise。您需要 return 任务中的 Promise:
gulp.task('clean', function () {
return del(['dist']);
});
流也需要从您的任务中 returned。你没有在你的 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'));
});