gulp-sass編譯慢？快來試試這種方法

原由：

多是由於公司項目太老舊，scss文件使用處理插件不多，不用說沒有sourcemap，cleancss，autoprefixer這些常見處理，最最坑爹的是，竟然沒有changed這個配置項，每次改變一個scss文件要把全部的scss所有編譯一遍（@#%￥#￥#，每次編譯一次我能喝兩口茶，小聲...）

這致使了項目css文件大、網頁加載速度慢，開發慢（每次出問題都要在css裏找到再回到scss文件裏定位問題，emmm...），css在不一樣瀏覽器上的兼容性通常（本身手寫瀏覽器前綴的時代已通過去了吧）的問題，因此在不影響項目運行和部署的前提下，我在gulp裏配置了這些東西（固然要把sourcemap文件夾寫入.gitignore文件中，別問我怎麼知道的），配置完成後，開發是很爽了，出現樣式的問題基本很快就能定位到，可是也開始出現了一些其餘的問題。

問題：

1.編譯速度沒有顯著提高，大約是從 3.5s 到了 600ms 左右（畢竟是使用了changed插件，可是我改變的樣式不多也會編譯好久）

2.語法錯誤沒有提示，而沒有語法錯誤的時候偶爾會報語法錯誤

解決過程：

1.首先我懷疑是VSCode插件衝突的問題，畢竟以前遇到過這樣的問題，因而我把VSCode裏面的插件所有關掉，然而問題並無獲得解決

2.使用其餘編輯器後，問題居然神奇的解決了，那麼問題在哪裏呢

3.最後查詢資料，在Stack Overflow上找到了問題的答案，原來是由於vscode文件保存的時間比Gulp-sass編譯慢致使的。

最終解決方案：

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

    setTimeout(function() {

     return gulp

            .src('./src/*.scss')

            .pipe(changed('./src', { extension: '.css' }))

            .pipe(sourcemaps.init())

            .pipe(sass().on('error', sass.logError))

            .pipe(postcss(processors))

            .pipe(cleanCSS())

            .pipe(sourcemaps.write('./sourcemaps'))

            .pipe(gulp.dest('./src'));

    }, 200);

});
複製代碼

讓gulp-sass延遲200ms執行，這樣配置後，不只語法錯誤會被捕獲到，並且編譯速度有了顯著提高（是的你沒有看錯...，從600ms左右變爲了100 μs左右，基本是秒編譯）

若是你以爲你的gulp-sass編譯速度不是很理想，不妨試試這種辦法(^_−)☆