gulp watch 동작안할 때.

gulp 4.0을 쓰면서 문법이 대대적으로 변경되었다.

 

기존 gulp.task 함수를 불러오기위해서 ['ssas'] 처럼 사용하던 문법이 gulp.series(['sass'])로 변경.

 

내가 할려던 것은 browser-sync와 gulp.watch를 동시에 실행시키는 것이였는데 browser-sync만 동작되고 watch는  실행되지 않았다. 

 

기존 코드

var browserSync = require('browser-sync');
gulp.task('browser-sync', function () {
    browserSync.init({
        server: {
            baseDir: "./src",
        }
    });

});


gulp.task('watch', gulp.series(['browser-sync']), function () {
    gulp.watch('./src/scss/*.scss', gulp.series(['sass'])); 
    gulp.watch('src/*.html').on('change', browserSync.reload); 
});

gulp.task('default',gulp.series(['watch']));

변경 후 코드

 

var browserSync = require('browser-sync');
gulp.task('watch', function () {
    browserSync.init({
        server: {
            baseDir: "./src",
            index: "/index.html"
        }
    });
    gulp.watch('./src/scss/**/*.scss', gulp.series(['sass'])); 
    gulp.watch('./src/*.html').on('change', browserSync.reload); 
});

gulp.task('default',gulp.series(['watch']));

 

 

개인적으로 javascirpt 문법에 미숙해서 생긴문제. gulp.task('함수명', task함수,'실행') 이렇게되는데 세개다 실행될거라고 생각해서 생긴문제...