續Gulp使用入門三步壓縮CSS

標籤：

gulp 壓縮css

一、安裝 gulp-minify-css 模組

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

在命令列輸入

npm install gulp-minify-css

安裝成功後你會看到如下資訊：(安裝時間可能會比較長取決於網路)

D:\wamp\www\BootsDataTable>npm install gulp-minify-css
npm WARN deprecated [email protected]: Please use gulp-clean-css
[email protected] D:\wamp\www\BootsDataTable
`-- [email protected]
+-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
`-- [email protected]
`-- [email protected]
`-- [email protected]
`-- [email protected]

二、參照 使用 gulp 壓縮 JS 建立 gulpfile.js 檔案編寫代碼

在對應目錄建立 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 () {
// 監聽檔案修改，當檔案被修改則執行 css 任務
gulp.watch(‘css/*.css‘, [‘css‘])
});

// 使用 gulp.task(‘default‘) 定義預設任務
// 在命令列使用 gulp 啟動 css 任務和 auto 任務
gulp.task(‘default‘, [‘css‘, ‘auto‘])

三、建立 css 檔案

在 gulpfile.js 對應目錄建立 css 檔案夾，並在 css/ 目錄下建立 a.css 檔案。

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

四、運行 gulp 查看效果

在命令列輸入 gulp +斷行符號

gulp
[10:48:27] Using gulpfile D:\wamp\www\BootsDataTable\gulpfile.js
[10:48:27] Starting ‘css‘...
[10:48:27] Finished ‘css‘ after 3.83 ms
[10:48:27] Starting ‘auto‘...
[10:48:27] Finished ‘auto‘ after 19 ms
[10:48:27] Starting ‘default‘...
[10:48:27] Finished ‘default‘ after 11 μs

gulp 會建立 dist/css 目錄，並建立 a.css 檔案，此檔案存放壓縮後的 css 代碼。 dist/css/a.css

續Gulp使用入門三步壓縮CSS