將gulp sass編譯成服務任務

Question

我做這個gulp任務：sass，serve，watch，但是我嘗試運行gulp sass時，吞噬gulp服務的gulp手錶是激活的，但它不工作。

我需要當我更改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

添加.pipe(browserSync.reload({stream: true}))你頂嘴任務管應browsersync重新加載只有編譯CSS。

這是你一飲而盡任務的示例

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