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);
}));