玩轉gulp之watch監聽文件自動編譯

博客移至 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完成監聽咯。咱們的前端自動化大業又向前走進了一大步。啦啦啦