sass / js / html 파일을 저장할 때 Gulp 감시 작업이 작동하지 않습니다.
Nov 16 2020
scss, HTML 및 js 파일이 변경 될 때 브라우저를 다시로드하려고하지만 gulp watch
명령을 실행할 때 브라우저가 다시로드되지 않거나 css / js / html 변경 사항을 볼 수 없습니다.
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
})
})
gulp.task('watch', gulp.series(['browserSync', 'sass']), function() {
gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
답변
Mark Nov 16 2020 at 08:02
여기에 표시된 몇 가지 사항을 변경해야합니다.
gulp.task('browserSync', function(done) { // done added here
browserSync.init({
server: {
baseDir: 'app'
},
});
done(); // done() called here
})
// gulp.task('watch', gulp.series(['browserSync', 'sass']), function() {
gulp.task('watch', gulp.series('browserSync', 'sass', function () { // see note below
gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
// gulp.watch('app/*.html', browserSync.reload);
gulp.watch("app/*.html", { events: 'all' }, function(cb) {
browserSync.reload();
cb();
});
gulp.watch('app/js/**/*.js', browserSync.reload);
})); // added a )
gulp.watch()
3 gulp.series()
이 아닌 2 개의 인수를 취 watch
합니다. 호출 을 포함하는 익명 함수를 포함하여 모든 함수를 포함해야 합니다. 그리고 어레이 브래킷을 잃어 버리십시오.
ShahnawazHossan Nov 16 2020 at 08:36
Mark의 솔루션 과 관련 .on('change', browserSync.relod)
하여 라이브 리로드를 보려면 원하는 시계 끝에 추가 하십시오.
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('sass', function () {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('browserSync', function (done) {
browserSync.init({
server: {
baseDir: 'app'
},
});
done();
})
gulp.task('watch', gulp.series('browserSync', 'sass', function () {
gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
gulp.watch('app/scss/**/*.scss').on('change', browserSync.reload);
gulp.watch('app/*.html').on('change', browserSync.reload);
gulp.watch('app/js/**/*.js').on('change', browserSync.reload);
}));