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

轉載于:https://www.cnblogs.com/thomaspha/p/5884328.html

總結

以上是生活随笔為你收集整理的续Gulp使用入门三步压缩CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。