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

gulp-css-spriter 默認會合并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);}}

如圖

轉載于:https://www.cnblogs.com/bruce-gou/p/6131608.html

總結

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

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