我正在研究 gulp 并实现 watch
功能。但 gulp watch
仅在第一次检测到更改。
我想编写代码,以便它检测CSS和JS文件的变化,并在开发环境中执行缩小和串联。
我正在使用以下代码:
var gulp = require('gulp');
var concat = require('gulp-concat');
var clean_css = require('gulp-clean-css');
var uglify = require('gulp-uglify');
gulp.task('style', function(){
gulp.src(['assets/css/style.css', 'assets/css/custom.css'])
.pipe(concat('build.min.css'))
.pipe(clean_css())
.pipe(gulp.dest('assets/build'));
});
gulp.task('script', function(){
gulp.src(['assets/js/jquery.js', 'assets/js/custom.js'])
.pipe(concat('build.min.js'))
.pipe(uglify())
.pipe(gulp.dest('assets/build'));
});
gulp.task('watch', function(){
gulp.watch('assets/css/*.css', gulp.series('style') );
gulp.watch('assets/js/*.js', gulp.series('script'));
});
最佳答案
这可能是因为 gulp 第一次不知道任务已经完成,因此当您下次修改文件时,它不会再次重新启动任务。只需在任务中添加 return
语句即可解决此问题:
gulp.task('style', function(){
return gulp.src(['assets/css/style.css', 'assets/css/custom.css'])
.pipe(concat('build.min.css'))
.pipe(clean_css())
.pipe(gulp.dest('assets/build'));
});
gulp.task('script', function(){
return gulp.src(['assets/js/jquery.js', 'assets/js/custom.js'])
.pipe(concat('build.min.js'))
.pipe(uglify())
.pipe(gulp.dest('assets/build'));
});
关于javascript - Gulp watch 仅检测第一个更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59554698/