Gulp Sass編譯只有兩個保存

Question

我一直在試圖編譯@imports的更改以及那些主要的SCSS文件，基本上有這個工作。

我的設置問題：要查看更改，我必須將文件保存兩次（不管它們是主文件還是導入文件）。對此的想法非常感謝。

的目錄結構很簡單：

- > SCSS
- > SCSS /諧音

這裏是我的gulpfile的相關部分：

var gulp = require('gulp'); 
 
var $ = require('gulp-load-plugins')(); 
 
var autoprefixer = require('gulp-autoprefixer'); 
 
var rename = require('gulp-rename'); 
 
var sync = require('browser-sync').create(); // create a browser sync instance. 
 

 
var sassPaths = [ 
 
    'bower_components/foundation-sites/scss', 
 
    'bower_components/motion-ui/src' 
 
]; 
 

 
var paths = { 
 
    'assets': 'assets', 
 
    'dev': 'assets/styles/dev' 
 
}; 
 

 
// DEV CSS 
 

 
    gulp.task('dev-styles', function() { 
 
    return gulp.src(['scss/**/*.scss', 'scss/*.scss']) 
 
    .pipe($.sass({ 
 
     includePaths: sassPaths, 
 
     outputStyles: 'expanded' 
 
    }) 
 
     .on('error', $.sass.logError)) 
 
    .pipe(autoprefixer({ 
 
     browsers: ['last 2 versions', 'ie >=9'] 
 
    })) 
 
    .pipe(rename({ 
 
     suffix: '.dev' 
 
    })) 
 
    .pipe(gulp.dest('paths.dev')); 
 
    }); 
 

 

 
// DEFAULT WATCH 
 

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

 
    sync.init({ 
 
     injectChanges: true, 
 
     proxy: 'localhost/basic-modx' 
 
    }); 
 
\t 
 
\t gulp.watch([ 'scss/**/*.scss', 'scss/*.scss' ], ['dev-styles']); 
 
    gulp.watch([ 'scss/**/*.scss', 'scss/*.scss' ]).on('change', sync.reload); 
 
});

Answer 1

你的手錶設置奇怪。我懷疑重載瀏覽器的第二個事件在第一個實際傳輸scss之前完成，因此重載時沒有任何變化。因此你必須點擊保存兩次。

更好的方式從browserSync documentation是讓你「DEV-風格」的任務是這樣結尾的重載：

gulp.task('dev-styles', function() { 
    return gulp.src(['scss/**/*.scss', 'scss/*.scss']) 
    .pipe($.sass({ 
     includePaths: sassPaths, 
     outputStyles: 'expanded' 
    }) 
    .on('error', $.sass.logError)) 
    .pipe(autoprefixer({ 
     browsers: ['last 2 versions', 'ie >=9'] 
    })) 
    .pipe(rename({ 
     suffix: '.dev' 
    })) 
    .pipe(gulp.dest('paths.dev')); 
    .pipe(sync.stream()); 
}); 

，擺脫第二gulp.watch聲明。