Gulp watch 只执行一次
Gulp watch executes only one time
我知道新 gulp 版本有很多问题。我不得不更改我的 gulpfile.js,现在当我 运行 它时,它只执行一次。我尝试在 gulp.watch
函数上使用 return
,但它什么也没做。
这是我的代码:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var runSequence = require('run-sequence');
var iconfont = require('gulp-iconfont');
var async = require('async');
var consolidate = require('gulp-consolidate');
var sassLint = require('gulp-sass-lint');
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
});
gulp.task('sass-lint', function () {
return gulp.src('app/scss/**/*.s+(a|c)ss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
});
gulp.task('watch', gulp.series('sass'), function (){
gulp.watch('app/scss/**/*.scss', gulp.series(gulp.parallel('sass' , 'sass-lint' )));
});
gulp.task('build', function (callback) {
runSequence(['sass'],
callback
)
});
gulp.task('iconfont', function(done){
var iconStream = gulp.src(['app/images/svg/*.svg'])
.pipe(iconfont({
fontName: 'icons',
}));
async.parallel([
function handleGlyphs(cb) {
iconStream.on('glyphs', function(glyphs, options) {
gulp.src('conf/_iconfont-template.scss')
.pipe(consolidate('lodash', {
glyphs: glyphs,
fontName: 'icons',
fontPath: '../fonts/',
className: 's'
}))
.pipe(gulp.dest('app/scss/utilities/'))
.on('finish', cb);
});
},
function handleFonts (cb) {
iconStream
.pipe(gulp.dest('app/fonts/'))
.on('finish', cb);
}
], done);
});
这是我在终端中得到的:
你的问题主要在这里:
// your version
gulp.task('watch', gulp.series('sass'), function (){
// should be:
gulp.task('watch', gulp.series('sass', function (done) {
gulp.task
现在只接受两个参数。
其他评论:
你的'watch'任务的这一部分很奇怪:
gulp.series(gulp.parallel('sass' , 'sass-lint' )));
gulp.series 在那里什么都不做,大概你想要 :
gulp.parallel('sass' , 'sass-lint' ));
最终 'watch'
任务,带有 done
回调以指示异步完成。
gulp.task('watch', gulp.series('sass', function (done){
gulp.watch('app/scss/**/*.scss', gulp.parallel('sass' , 'sass-lint'));
done();
}));
- 您不再需要
run-sequence
插件。您可以将 'build'
任务改为使用 gulp.series
。
我知道新 gulp 版本有很多问题。我不得不更改我的 gulpfile.js,现在当我 运行 它时,它只执行一次。我尝试在 gulp.watch
函数上使用 return
,但它什么也没做。
这是我的代码:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var runSequence = require('run-sequence');
var iconfont = require('gulp-iconfont');
var async = require('async');
var consolidate = require('gulp-consolidate');
var sassLint = require('gulp-sass-lint');
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
});
gulp.task('sass-lint', function () {
return gulp.src('app/scss/**/*.s+(a|c)ss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
});
gulp.task('watch', gulp.series('sass'), function (){
gulp.watch('app/scss/**/*.scss', gulp.series(gulp.parallel('sass' , 'sass-lint' )));
});
gulp.task('build', function (callback) {
runSequence(['sass'],
callback
)
});
gulp.task('iconfont', function(done){
var iconStream = gulp.src(['app/images/svg/*.svg'])
.pipe(iconfont({
fontName: 'icons',
}));
async.parallel([
function handleGlyphs(cb) {
iconStream.on('glyphs', function(glyphs, options) {
gulp.src('conf/_iconfont-template.scss')
.pipe(consolidate('lodash', {
glyphs: glyphs,
fontName: 'icons',
fontPath: '../fonts/',
className: 's'
}))
.pipe(gulp.dest('app/scss/utilities/'))
.on('finish', cb);
});
},
function handleFonts (cb) {
iconStream
.pipe(gulp.dest('app/fonts/'))
.on('finish', cb);
}
], done);
});
这是我在终端中得到的:
你的问题主要在这里:
// your version
gulp.task('watch', gulp.series('sass'), function (){
// should be:
gulp.task('watch', gulp.series('sass', function (done) {
gulp.task
现在只接受两个参数。
其他评论:
你的'watch'任务的这一部分很奇怪:
gulp.series(gulp.parallel('sass' , 'sass-lint' )));
gulp.series 在那里什么都不做,大概你想要 :
gulp.parallel('sass' , 'sass-lint' ));
最终 'watch'
任务,带有 done
回调以指示异步完成。
gulp.task('watch', gulp.series('sass', function (done){
gulp.watch('app/scss/**/*.scss', gulp.parallel('sass' , 'sass-lint'));
done();
}));
- 您不再需要
run-sequence
插件。您可以将'build'
任务改为使用gulp.series
。