使用 gulp 壓縮 CSS

壓縮 css 代碼可降低 css 文件大小，提高頁面打開速度。

我們接著將規(guī)律轉換為 gulp 代碼

規(guī)律

找到 css/ 目錄下的所有 css 文件，壓縮它們，將壓縮后的文件存放在 dist/css/ 目錄下。

gulp 代碼

你可以 下載所有示例代碼 或 在線查看代碼

當熟悉 使用 gulp 壓縮 JS 的方法后，配置壓縮 CSS 的 gulp 代碼就變得很輕松。

一、安裝 gulp-minify-css 模塊

提示：你需要使用命令行的 cd 切換到對應目錄后進行安裝操作。

學習使用命令行

在命令行輸入

npm install gulp-minify-css

安裝成功后你會看到如下信息：(安裝時間可能會比較長)

gulp-minify-css@1.0.0 node_modules/gulp-minify-css
├── object-assign@2.0.0
├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)
├── clean-css@3.1.8 (commander@2.6.0, source-map@0.1.43)
├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)
├── vinyl-bufferstream@1.0.1 (bufferstreams@1.0.1)
└── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, lodash._reevaluate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, multipipe@0.1.2, vinyl@0.4.6, chalk@1.0.0, lodash.template@3.3.2, dateformat@1.0.11)

二、參照 使用 gulp 壓縮 JS 創(chuàng)建 gulpfile.js 文件編寫代碼

在對應目錄創(chuàng)建 gulpfile.js 文件并寫入如下內容：

// 獲取 gulp
var gulp = require('gulp')

// 獲取 minify-css 模塊（用于壓縮 CSS）
var minifyCSS = require('gulp-minify-css')

// 壓縮 css 文件
// 在命令行使用 gulp css 啟動此任務
gulp.task('css', function () {
    // 1\. 找到文件
    gulp.src('css/*.css')
    // 2\. 壓縮文件
        .pipe(minifyCSS())
    // 3\. 另存為壓縮文件
        .pipe(gulp.dest('dist/css'))
})

// 在命令行使用 gulp auto 啟動此任務
gulp.task('auto', function () {
    // 監(jiān)聽文件修改，當文件被修改則執(zhí)行 css 任務
    gulp.watch('css/*.css', ['css'])
});

// 使用 gulp.task('default') 定義默認任務
// 在命令行使用 gulp 啟動 css 任務和 auto 任務
gulp.task('default', ['css', 'auto'])

你可以訪問 gulp-minify-css 以查看更多用法。

三、創(chuàng)建 css 文件

在 gulpfile.js 對應目錄創(chuàng)建 css 文件夾，并在 css/ 目錄下創(chuàng)建 a.css 文件。

/* a.css */
body a{
    color:pink;
}

四、運行 gulp 查看效果

在命令行輸入 gulp +回車

你將看到命令行出現如下提示

gulp
[17:01:19] Using gulpfile ~/Documents/code/gulp-book/demo/chapter3/gulpfile.js
[17:01:19] Starting 'css'...
[17:01:19] Finished 'css' after 6.21 ms
[17:01:19] Starting 'auto'...
[17:01:19] Finished 'auto' after 5.42 ms
[17:01:19] Starting 'default'...
[17:01:19] Finished 'default' after 5.71 μs

gulp 會創(chuàng)建 dist/css 目錄，并創(chuàng)建 a.css 文件，此文件存放壓縮后的 css 代碼。 dist/css/a.css