서브 작업에 꿀꺽 찌름을 컴파일하십시오.

Question

나는 꿀꺽 거리기 작업을합니다. : sass, serve, watch.

내가 sass 파일을 변경하면이 컴파일이 브라우저에서 실시간으로 표시됩니다.

어떤 도움이 필요합니까?

var gulp = require('gulp'), 
    browserSync = require('browser-sync'), 
    postcss = require('gulp-postcss'), 
    autoprefixer = require('autoprefixer'), 
    sass = require('gulp-sass'); 

gulp.task('serve', function() { 
    browserSync.init({ 
    notify: false, 
    port: 3005, 
    server: { 
     baseDir: ["app"], 
     routes: { 
     '/bower_components': 'bower_components' 
     } 
    } 
    }) 

    gulp.watch(['app/**/*.*']).on('change', browserSync.reload); 
}); 

gulp.task('sass', function() { 

    var processors = [ 
    autoprefixer({ browsers: ['last 2 versions']}) 
    ]; 

    return gulp.src('./app/sass/*.scss') 
    .pipe(sass().on('error',sass.logError)) 
    .pipe(postcss(processors)) 
    .pipe(gulp.dest('./app/css')); 
}); 

gulp.task('watch', ['sass'], function() { 
    gulp.watch('./app/sass/*.scss', ['sass']); 
}); 

gulp.task('default', ['sass']); 

Answer 1

에만 컴파일 된 CSS를 다시로드 browsersync해야 당신의 말대꾸 작업 파이프에 .pipe(browserSync.reload({stream: true})) 추가. 여기

는

gulp.task('sass', function() { 
    var processors = [ 
     autoprefixer({ browsers: ['last 2 versions']}) 
    ]; 

    return gulp.src('./app/sass/*.scss') 
     .pipe(sass().on('error',sass.logError)) 
     .pipe(postcss(processors)) 
     .pipe(gulp.dest('./app/css')) 
     .pipe(browserSync.reload({stream: true})); 
});