設置gulp-sass像sass一樣工作--watch

我正嘗試將一個項目遷移到gulp-sass工作流程。在線閱讀一些教程後，我已經建立了非常基本的gulpfile：設置gulp-sass像sass一樣工作--watch

var gulp = require('gulp'), 
    sass = require('gulp-sass'), 
    concat = require('gulp-concat'); 

gulp.task('styles', function() { 
    return gulp.src('scss/*.scss') 
    .pipe(sass({ 
     'sourcemap=none': true 
    })) 
    .pipe(gulp.dest('css/')) 
}); 

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

我要生成從每一個*.scss文件不以下劃線開始*.css文件。

我的問題是：使用當前的gulpfile，gulp會檢測.scss文件的更改並重建所有庫，而不是僅構建受更改影響的庫。

例如，我有我的項目2個庫：

lib1，這@imports諧音p1和p2
lib2，這@imports諧音p2和p3

如果我編輯部分p1，我只想要lib1被更新。

如果我編輯部分p3，我只想更新lib2。

如果我編輯部分p2，我想同時更新lib1和lib2。

當前設置更新了我在任何源代碼中進行的每個編輯的兩個庫。

換句話說，我希望gulp-sass的行爲方式與sass --watch相同。這可能嗎？怎麼樣？

謝謝！

來源

2015-11-07 Karolis

目前你的目標都SCSS文件在你的手錶任務：

gulp.watch('scss/**/*.scss', ['styles']);

您可以縮小下來到子文件夾或者特定文件。您可以擊穿你的手錶任務分爲兩個部分，例如：

gulp.watch('scss/p1/**/*.scss', ['stylesP1', 'stylesP2']); 
gulp.watch('scss/p2/**/*.scss', ['stylesP2', 'stylesP3']);

然後創建2級風格的任務相匹配：

gulp.task('stylesP1', function() { /* Your task actions */ }); 
gulp.task('stylesP2', function() { /* Your task actions */ }); 
gulp.task('stylesP3', function() { /* Your task actions */ });

來源

2015-11-07 17:07:45 Amielucha

你的建議的方式，我會創造更多的一口任務對於我想要製作的每個css庫。另一方面，'sass --watch'足夠聰明，可以理解'@ import'指令，並且只生成受編輯影響的文件。這是我想要實現的。我想爲每個不以下劃線開頭的'* .scss'文件名生成一個'* .css'樣式表，並且需要自動完成並且不更新所有其他未被修改的庫。 – Karolis

可能與'gulp.src（['！sass/_ *。scss']）有關' – 2015-11-08 07:32:54

這個問題不是匹配文件名，而是知道每個文件的依賴性。當部分p1更新時，gulp應該知道lib1取決於該文件，而lib2不取決於該文件。 – Karolis

設置gulp-sass像sass一樣工作--watch

回答

相關問題