gulp css 壓縮 合併

//導入工具包 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 url
                if(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);
                    }
                }

如圖