gulp 入門 使用gulp壓縮css

2022-07-26 01:18:21 字數 2096 閱讀 2854

壓縮 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的合併壓縮可以為乙個任務 的壓縮也可以為乙個任務,...