gulp 壓縮css
一、安裝 gulp-minify-css 模塊
提示：你需要使用命令行的 cd 切換到對應目錄后進行安裝操作。
在命令行輸入
npm install gulp-minify-css
安裝成功后你會看到如下信息：(安裝時間可能會比較長取決於網絡)
D:\wamp\www\BootsDataTable>npm install gulp-minify-css
npm WARN deprecated gulp-minify-css@1.2.4: Please use gulp-clean-css
test@1.0.0 D:\wamp\www\BootsDataTable
`-- gulp-minify-css@1.2.4
+-- clean-css@3.4.19
| +-- commander@2.8.1
| | `-- graceful-readlink@1.0.1
| `-- source-map@0.4.4
| `-- amdefine@1.0.0
+-- object-assign@4.1.0
`-- vinyl-bufferstream@1.0.1
`-- bufferstreams@1.0.1
`-- readable-stream@1.1.14
`-- isarray@0.0.1
二、參照 使用 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