gulp-css-spriter 雪碧圖合併

相信作前端的同窗都作過這樣的事情，爲優化圖片，減小請求會把拿到切好的圖標圖片，經過ps（或者其餘工具）把圖片合併到一張圖裏面，再經過css定位把對於的樣式寫出來引用的html裏面。gulp-css-spriter 讓這一切別的更簡單了。

本文只介紹gulp-css-spriter的使用，其它相關文章請自行Google瞭解^_^。

　　第一步: 

npm install gulp-css-spriter

　　第二步:(主要就看三行代碼便可，注意：合併以前的html頁面裏面的標籤寬高必需要和背景圖寬高同樣，且不能用背景定位，不然會出現問題！！！)

gulp.task('html', ['styles', 'scripts'], () => {
  var timestamp = +new Date();//定義一個時間戳
  return gulp.src('app/*.html')
    .pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
    .pipe($.if('*.js', $.uglify()))
    .pipe($.if('*.css', $.cssnano({safe: true, autoprefixer: false})))
    .pipe($.if('*.css', $.cssSpriter({
            // The path and file name of where we will save the sprite sheet
            'spriteSheet': './dist/images/sprite'+timestamp+'.png', //這是雪碧圖自動合成的圖。 很重要
            // Because we don't know where you will end up saving the CSS file at this point in the pipe,
            // we need a litle help identifying where it will be.
            'pathToSpriteSheetFromCSS': '../images/sprite'+timestamp+'.png' //這是在css引用的圖片路徑，很重要
        })))
    // .pipe($.if('*.html', $.htmlmin({collapseWhitespace: true})))
    .pipe($.if('*.html', $.htmlmin({collapseWhitespace: false})))
    .pipe(gulp.dest('dist'));
});

　　OK，至此你應該已經完成了，可是你可能發現css裏面的backgroundimg都被合併了，那就對了gulp-css-spriter默認會對樣式文件裏，全部的background/background-image的圖片合併，但實際項目中，咱們不是全部的圖片都須要合併。

background-image: url(../images/icon-3.png?__sprite);//有?__sprite後綴的合併
background-image: url(../images/pics1.png); //不合並 

　　修改一下文件能夠按需合併。( 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 且判斷url是否有?__spriter後綴

                if(transformedDeclaration.property === 'background-image' && /\?__spriter/i.test(transformedDeclaration.value)) {

                    transformedDeclaration.value = transformedDeclaration.value.replace('?__spriter','');
                    return cb(transformedDeclaration, declarationIndex, declarations);
                }
                // Background is a shorthand property so make sure `url()` is in there 且判斷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);
                    }
                }

　　

本文標題:gulp-css-spriter 雪碧圖合併

原創做者:Jiao Shou

發佈時間:2016年10月13日 - 09:20

最後更新:2016年10月13日 - 21:09

原始連接:http://www.cnblogs.com/jiaoshou/p/5955184.html

許可協議:轉載本篇文章時請務必以超連接形式標明文章原文連接和做者信息。

掃描二維碼,分享此文章