[英]Gulp 4 - watch not watching changes
Today I migrated to Gulp 4 , but I'm not able to get my watch function to work. 今天我迁移到了Gulp 4 ,但是我无法让我的手表功能正常工作。
// Watch
gulp.task('watch', gulp.series('typescript', 'sass', 'browserSync', function(){
gulp.watch('./app/styles/**/*.scss', gulp.series('sass'));
gulp.watch('app/scripts/**/*.ts', gulp.series('typescript'));
gulp.watch('./app/*.html', browserSync.reload);
}));
typescript
, sass
, browserSync
will run but watch does not react to file changes. typescript
, sass
, browserSync
将运行,但手表不应对文件更改。
I just had the same problem. 我刚遇到同样的问题。 You don't actually have a reference to the initialized
browserSync
inside your watch
gulp task. 实际上,您没有在
watch
browserSync
任务中引用初始化的browserSync
。 Instead of having your browserSync.init
function in a separate browserSync
gulp task, move it to inside your watch
task, and it should work. 而不是在单独的
browserSync
任务中使用browserSync.init
函数,将其移动到watch
任务内部,它应该可以工作。 Hope this helps! 希望这可以帮助!
Example: 例:
gulp.task('watch', gulp.series(function (){
browserSync.init({
proxy:"http://localhost:8888",
injectChanges: true,
plugins: ["bs-html-injector?files[]=*.html"]
});
var html = gulp.watch('development/index.html');
html.on('change', function(path, stats) {
console.log('you changed the html');
browserSync.notify("Compiling, please wait!");
browserSync.reload("index.html");
})
var js = gulp.watch('development/**/*.js');
js.on('change', function(path, stats) {
console.log('you changed the js');
browserSync.notify("Compiling, please wait!");
browserSync.reload();
})
var css = gulp.watch('development/**/*.css');
css.on('change', function(path, stats) {
console.log('you changed the css');
browserSync.notify("Injecting CSS!");
browserSync.reload("*.css");
})
}));
Change gulp.watch('app/scripts/**/*.ts', gulp.series('typescript'));
改变
gulp.watch('app/scripts/**/*.ts', gulp.series('typescript'));
to a absolute gulp.watch('./app/scripts/**/*.ts', gulp.series('typescript'));
绝对
gulp.watch('./app/scripts/**/*.ts', gulp.series('typescript'));
Also i normally stick this syntax, per task. 此外,我通常坚持每个任务的语法。
var watcher = gulp.watch('js/**/*.js', gulp.parallel('concat', 'uglify'));
watcher.on('change', function(path, stats) {
console.log('File ' + path + ' was changed');
});
I had some issues too, and i found this tutorial of gulp 4 , this is my gulpfile to compile scss and watch the Scss files, concat and compile to a main.min.css with autoprefix. 我也有一些问题,我发现这个gulp 4的教程 ,这是我的gulpfile来编译scss并观察Scss文件,concat并使用autoprefix编译到main.min.css。
var gulp = require('gulp'),
concat = require('gulp-concat'),
autoprefixer = require('gulp-autoprefixer'),
sass = require('gulp-sass');
//task para o sass
var paths = {
styles: {
src: 'scss/**/*.scss',
dest: 'css'
}
};
function styles() {
return gulp
.src(paths.styles.src, {
sourcemaps: true
})
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(concat('main.min.css'))
.pipe(autoprefixer({
browser: ['last 2 version', '> 5%'],
cascade: false
}))
.pipe(gulp.dest(paths.styles.dest));
}
function watch() {
gulp.watch(paths.styles.src, styles);
}
var build = gulp.parallel(styles, watch);
gulp.task(build);
gulp.task('default', build);
I think that on the gulp v4 you need to use the gulp.parallel . 我认为在gulp v4上你需要使用gulp.parallel 。 I'm digging to learn more about the new version.
我正在挖掘以了解有关新版本的更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.