//導(dǎo)入工具包 require('node_modules里對(duì)應(yīng)模塊') var gulp = require('gulp'), //本地安裝gulp所用到的地方concat = require('gulp-concat'),//合并文件 --合并只是放一起--壓縮才會(huì)真正合并相同樣式less = require('gulp-less'),//編譯less文件cssmin = require('gulp-minify-css'),//壓縮css文件rename = require('gulp-rename'),//設(shè)置壓縮后的文件名autoprefixer = require('gulp-autoprefixer'),//給 CSS 增加前綴。解決某些CSS屬性不是標(biāo)準(zhǔn)屬性，有各種瀏覽器前綴的情況spriter=require('gulp-css-spriter');//合并圖片//編譯/加前綴 /合并/壓縮css gulp.task('css1', function () {var timestamp = +new Date();var flg = gulp.src('public/resources/views/css/**.less') //該任務(wù)針對(duì)的文件.pipe(less()) //編譯less .pipe(autoprefixer({browsers: ['last 2 versions','Safari >0', 'Explorer >0', 'Edge >0', 'Opera >0', 'Firefox >=20'],//last 2 versions- 主流瀏覽器的最新兩個(gè)版本cascade: true, //是否美化屬性值 默認(rèn)：true 像這樣：//-webkit-transform: rotate(45deg);// transform: rotate(45deg);remove:true //是否去掉不必要的前綴 默認(rèn)：true })).pipe(concat('main.css')) //合并css .pipe(cssmin()) //壓縮css.pipe(rename({suffix:'.min'})) //設(shè)置壓縮文件名.pipe(gulp.dest('public/resources/views/css/')) //輸出文件的存放地址return flg; //反饋給依賴他的模塊--，告訴執(zhí)行完畢 }); //合并css圖片 --執(zhí)行了css1 再執(zhí)行css2 gulp.task('css2',['css1'], function () {var timestamp = +new Date();gulp.src(['public/resources/views/css/main.min.css']) //該任務(wù)針對(duì)的文件 .pipe(spriter({// 生成的spriter的位置spriteSheet: 'public/resources/views/img/spritesheet' + timestamp + '.png',// 生成樣式文件圖片引用地址的路徑pathToSpriteSheetFromCSS: '../img/spritesheet' + timestamp + '.png',spritesmithOptions: {padding: 10}})).pipe(gulp.dest('public/resources/views/css/')); }); gulp.task('default',['css2']); //定義默認(rèn)任務(wù) elseTask為其他任務(wù)，該示例沒有定義elseTask任務(wù) //gulp.task(name[, deps], fn) 定義任務(wù) name：任務(wù)名稱 deps：依賴任務(wù)名稱 fn：回調(diào)函數(shù) //gulp.src(globs[, options]) 執(zhí)行任務(wù)處理的文件 globs：處理的文件路徑(字符串或者字符串?dāng)?shù)組) //gulp.dest(path[, options]) 處理完后文件生成路徑//運(yùn)行g(shù)ulp //說明：命令提示符執(zhí)行g(shù)ulp 任務(wù)名稱； //編譯less：命令提示符執(zhí)行g(shù)ulp testLess； //當(dāng)執(zhí)行g(shù)ulp default或gulp將會(huì)調(diào)用default任務(wù)里的所有任務(wù)[‘testLess’,’elseTask’]。

合并css中的圖片

css代碼

.one{background: url(../img/logo.png?__spriter) no-repeat;}.two{background: url(../img/fup.png?__spriter) no-repeat;}.three{background: url(../img/ffile.png?__spriter) no-repeat;}

在路勁后面加??__spriter 標(biāo)識(shí)要進(jìn)行合并

gulp-css-spriter 默認(rèn)會(huì)合并CSS中的所有圖片，要按需合并則需要修改

node_modules\gulp-css-spriter\lib\map-over-styles-and-transform-background-image-declarations.js 中的代碼

48行開始的if-else if代碼塊中，替換為下面代碼：// background-image always has a urlif(transformedDeclaration.property==='background-image'&&/\?__spriter/i.test(transformedDeclaration.value)){transformedDeclaration.value=transformedDeclaration.value.replace('?__spriter','');return cb(transformedDeclaration,declarationIndex,declarations);}//Backgroundisashorthandpropertysomakesure`url()`isinthere且判斷url是否有?__spriter后綴else if(transformedDeclaration.property === 'background'&&/\?__spriter/i.test(transformedDeclaration.value)){transformedDeclaration.value = transformedDeclaration.value.replace('?__spriter','');var hasImageValue = spriterUtil.backgroundURLRegex.test(transformedDeclaration.value);if(hasImageValue){return cb(transformedDeclaration,declarationIndex,declarations);}}

如圖

轉(zhuǎn)載于:https://www.cnblogs.com/bruce-gou/p/6131608.html

總結(jié)

以上是生活随笔為你收集整理的gulp css 压缩 合并的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。