gulp sassをサーブタスクにコンパイル

Question

gulpサーブを監視するときにgulp sassを起動しようとしていますが、動作していません。

私は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

あなたSASSタスク管に.pipe(browserSync.reload({stream: true}))を追加するだけでコンパイルされたCSSをリロードbrowsersync行う必要があります。

ここでは、この代わりに gulp.task（ 'デフォルト'、[ '時計を']）してみてくださいあなたの一気タスク

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