CSS 再怎麼開起開壓縮,頂多縮個幾十k,uncss可以搜尋html內所用的class、id,再將.css
內的多餘class or id移除,達到最佳化的壓縮。
注意
雖然標題很聳動,但是有個問題比較麻煩,就是他無法偵測動態產生的標籤,像是js產生的,所以在移除時可能會有些錯誤…。uncss有提供解決的方案,就是使用忽略,但實際上有可能自己都忘記忽略。
使用gulp
在先前的文章有介紹過gulp,本篇也是會用gulp。
首先先安裝gulp-uncss
$ npm install gulp-uncss –save-dev
簡單使用
npm可參考:https://www.npmjs.com/package/gulp-uncss
文件:https://github.com/giakki/uncss#within-nodejs
var gulp = require('gulp');
var uncss = require('gulp-uncss');
gulp.task('default', function() {
return gulp.src('site.css') //輸入的css
.pipe(uncss({
html: ['index.html', 'posts/**/*.html', 'http://example.com'], //檢查的頁面(網址也可)
ignore: ['.ui-datepicker','dropdown'] // 忽略的class or id
}))
.pipe(gulp.dest('./out')); //輸出
});
壓縮範例如下
這次的壓縮並沒有針對js的問題加以修正,僅是範例而已。
壓縮前
壓縮後
透過這個方法,可以有效的壓縮css,但其實在使用上並沒有那麼容易(需要補上ignore)。