gulp 入門 使用gulp壓縮css

壓縮 css **可降低 css 檔案大小，提高頁面開啟速度。

規律轉換為 gulp **

找到css/目錄下的所有 css 檔案，壓縮它們，將壓縮後的檔案存放在dist/css/目錄下。

一、安裝 gulp-minify-css 模組

在命令列輸入sudo npm install gulp-minify-css

安裝成功後，命令列顯示如下內容：

deprecated [email protected]: please use gulp-clean-css

[email protected] /users/fanyubo/documents/mycode/gulpdemo
└─┬ [email protected] 
├─┬ [email protected] 
│ ├─┬ [email protected] 
│ │ └── [email protected] 
│ └─┬ [email protected] 
│   └── [email protected] 
├── [email protected] 
├─┬ [email protected] 
│ └── [email protected] 
└─┬ [email protected] 
└── [email protected]

二、在gulpfile.js寫入如下內容：

// 獲取 gulp

var gulp = require('gulp');
// 獲取 uglify 模組（用於壓縮 js）
var uglify = require('gulp-uglify');
var cssuglify = require('gulp-minify-css');
// 壓縮 js 檔案
// 在命令列使用 gulp script 啟動此任務
gulp.task('script', function() ))
// 3. 另存壓縮後的檔案
.pipe(gulp.dest('dist/js'))
})gulp.task('auto',function())
gulp.task('css',function())
gulp.task('default',['script','auto','css'])

三、建立 css 檔案

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

body

四、執行 gulp 檢視效果

在命令列輸入gulp+default

[17:32:04] using gulpfile ~/documents/mycode/gulpdemo/gulpfile.js

[17:32:04] starting 'script'...
[17:32:04] finished 'script' after 10 ms
[17:32:04] starting 'auto'...
[17:32:04] finished 'auto' after 11 ms
[17:32:04] starting 'css'...
[17:32:04] finished 'css' after 4.39 ms
[17:32:04] starting 'default'...
[17:32:04] finished 'default' after 1.41 μs

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

內容如下：

body

gulp基本入門

gulp是乙個前端自動化構建的乙個工具 1.前置 1.1在使用gulp之前，先安裝node和npm 2.安裝gulp 2.1 npm install gulp 3.打包專案 3.1 新建gulpfile.js 獲取 gulp var gulp require gulp 獲取 uglify 模組 用於...

gulp入門教學

再去安裝 gulp uglify 建立gulpfile.js 建立壓縮後放檔案的位置 a 建立需要壓縮的檔案位置 b 進入gulpfile.js 編輯 var gulp require gulp var uglify require gulp uglify gulp.task script func...

gulp入門學習

我們本該將更多的精力放在更有意義的事情上 所以，grunt gulp這一類構件工具出現了，將我們解救於重複的工作中。就自己的理解，自動化構件工具的核心是將我們的工作流抽離為乙個個任務 task 根據我們自己的需求，css的合併壓縮可以為乙個任務 js的合併壓縮可以為乙個任務 的壓縮也可以為乙個任務，...