博客移至 https://www.dodoblog.cn/blog?id=5befc928e0feb34495b57035
我們在寫頁面的時候，用到sass less等css預處理器的時候，雖然寫的很爽，但是有一個麻煩就是老是要不停的去編譯文件
例如我們寫一個variable.scss時，希望引入這個scss文件的index.scss list.scss都發生變化。可能還有很多很多。那我們應該怎么做呢
還有如果我們希望html變化了就重新編譯一下scss
諸如此類，ok我們現在就開始着手解決問題。
1. 我們上次講了編譯less的方法，參見如何用gulp編譯less，我們會在這個的基礎上開始講解。
2. 由於我更加鍾愛sass，我們現在回引入新的npm依賴，gulp-sass去編譯我所寫的sass文件，用法和gulp-less相同
解決多個sass文件同時編譯，可以用通配符*來表示所有文件
gulp.task('sass',function(){ gulp.src('./stylesheets/sass/*.scss') //*表示所有的scss文件 .pipe(sass()) .pipe(gulp.dest('./stylesheets/css')) })
會把對應的scss全部編譯成scss，而且不會去編譯對應的variable和mixin
但是我們不想每次改變輸入一次gulp，於是乎我們希望這些步驟可以自動完成的話，就需要用gulp的watch方法去監聽文件變化了。
我們的需求是監聽sass文件夾下的所有文件，如果發生變化就立馬執行sass任務。
gulp.task('watch',function(){ gulp.watch('./stylesheets/**/*.scss',['sass']); })
所以我們添加以上代碼，**是指所有深度的文件夾，包括varible和mixin
運行gulp watch命令實現監聽
同時如果我們也可以添加更多的監聽命令
gulp.task('watch',function(){ gulp.watch('./stylesheets/**/*.scss',['sass']); gulp.watch('./index.html',['sass']); })
例如監聽index.html頁面什么的，也去更新css文件。
我在我們就可以運用gulp完成監聽咯。我們的前端自動化大業又向前走進了一大步。啦啦啦