gulp-clean-css 和 gulp-make-css-url-version 的簡介:
成都創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、綏棱網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù),價格優(yōu)惠性價比高,為綏棱等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
gulp-clean-css 插件用來壓縮 css 文件。
gulp-make-css-url-version 插件用來給 css 文件里的 url 加版本號(根據(jù)引用文件的 MD5 生成版本號)。
一、gulp-clean-css 和 gulp-make-css-url-version 插件的使用
1、安裝 “gulp-clean-css 和 gulp-make-css-url-version”插件命令(在終端進(jìn)入到項目根目錄執(zhí)行)
npm install --save-dev gulp-load-plugins gulp-concat gulp-rename gulp-clean-css gulp-make-css-url-version
2、在項目根目錄下提供 "gulp-clean-css" 插件任務(wù)配置需要的 src 目錄和源文件(源文件放置到 src 目錄下)
mkdir src
3、在 gulpfile.js 文件中配置使用 "gulp-clean-css 和 gulp-make-css-url-version"
具體示例:
var gulp = require('gulp'),
cssmin = require('gulp-clean-css'),
cssurl = require('gulp-make-css-url-version'),
plugins = require('gulp-load-plugins')(); // 裝載插件
gulp.task('css', function () { // 自定義 "css" 任務(wù)
return gulp.src('src/css/*.css') // 模糊匹配 src/css 目錄下所有 css 文件
.pipe(cssurl()) // 給 css 文件里 url 引用加版本號(文件 MD5)
.pipe(plugins.concat('main.css')) // 合并匹配到的 css 文件并命名為 "main.css"
.pipe(cssmin({
advanced: false, // 類型:Boolean 默認(rèn):true 是否開啟高級優(yōu)化(合并選擇器等)
compatibility: 'ie7', // 類型:String 默認(rèn):' ' or '*' [ 啟用兼容模式:'ie7':IE7 兼容模式,'ie8':IE8 兼容模式,'*':IE9+ 兼容模式 ]
keepBreaks: true, // 類型:Boolean 默認(rèn):false 是否保留換行
keepSpecialComments: '*' // 保留所有特殊前綴,當(dāng)你用 autoprefixer 生成瀏覽器前綴時,如果不加這個參數(shù),有可能將會刪除你的部分前綴
}))
.pipe(plugins.rename('mainmin.css')) // 將匹配到的 css 文件合并壓縮后重命名為 "mainmin.css"
.pipe(gulp.dest('dist/css')); // 壓縮后的文件存放路徑
});
4、最后在終端運(yùn)行 "gulp css" 命令
PS:如果沒有錯誤提示信息,證明就沒什么問題了?,F(xiàn)在去項目根目錄下看是否生成 "dist/css" 目錄和目標(biāo)文件。未完待續(xù)。。。。