我有一个使用Gulp和SASS的项目,当我运行gulp watch
时,它成功运行第一个更改,没有任何问题。
当我进行任何进一步的更改时会出现问题 - 它们似乎没有注册并且似乎被忽略了。
这是我的Gulpfile.js代码:
var theme_name = 'project-theme';
var gulp = require('gulp'),
cleanCSS = require('gulp-clean-css'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename');
var paths = {
styles: {
src: 'wp-content/themes/' + theme_name + '/gulp/sass/theme.scss',
folder: 'wp-content/themes/' + theme_name + '/gulp/sass/*.scss',
dest: 'wp-content/themes/' + theme_name + '/assets/css/'
},
scripts: {
src: 'wp-content/themes/' + theme_name + '/gulp/jquery/*.js',
dest: 'wp-content/themes/' + theme_name + '/assets/js/'
}
};
gulp.task('styles', function() {
return gulp
.src(paths.styles.src, {
sourcemaps: true
})
.pipe(sass())
.pipe(cleanCSS())
.pipe(rename({
basename: 'main',
suffix: '.min'
}))
.pipe(gulp.dest(paths.styles.dest));
});
gulp.task('scripts', function() {
return gulp
.src(paths.scripts.src, {
sourcemaps: true
})
.pipe(uglify())
.pipe(concat('main.min.js'))
.pipe(gulp.dest(paths.scripts.dest));
});
gulp.task('watch', function() {
gulp.watch(paths.scripts.src, gulp.series('scripts'));
gulp.watch(paths.styles.folder, gulp.series('styles'));
});
gulp.task('default', gulp.parallel('styles', 'scripts', 'watch'));
我看过Stack Overflow上的其他类似问题,他们没有给我任何成功。任何帮助将不胜感激。
我找到了解决方案。我现在明白的是,Gulp并不知道任务已经完成,因此无视所有进一步的变化。
为了解决这个问题,我将第48和49行更改为:
gulp.watch(paths.styles.folder).on('change',gulp.series('styles'));
gulp.watch(paths.scripts.src).on('change', gulp.series('scripts'));
所有其他更改现在由gulp watch
注册。
希望这可以帮助任何有类似问题的人。