gulp遇到的"坑"_gulp 打包样式没有加载出来-CSDN博客

本文链接：https://blog.csdn.net/weboof/article/details/53674129

在初次使用gulp时，可是遇到了几个让人头痛的”坑”，直观的以为gulp就是一个通道，把数据从一头传到了另一头，当然，管道的两头一边是我们开发使用的代码，一边是我们上线使用的代码。于是就开始了gulp的相爱相杀.

问题1：精灵图定位不准
还原事故：当时引用的是gulp-css-spriter插件，定义任务时，就是正常的定义一个task,然后引用相应的插件的方法。在写less时，并没有特意指定那个元素需当雪碧图进行引用。造成的后果就是gulp合并之后的雪碧图在页面上展示位置定位不准。
解决方案：

1.任务就是传统写法，如下

gulp.task('spriter', function() {
    return gulp.src(paths.css)//比如css这个样式里面什么都不用改，是你想要合并的图就要引用这个样式。
        .pipe(spriter({
            'spriteSheet': './xstatic/ximages/spritesheet.png', //这是雪碧图自动合成的图。 很重要
            'pathToSpriteSheetFromCSS': '../../ximages/spritesheet.png' //这是在css引用的图片路径，很重要
        }))
        .pipe(gulp.dest('./xstatic/xcss/css')); //最后生成出来
});

2.雪碧图的使用主要还是应用于小图标，所以我们不可能不对通过background引入的图片进行限定。 gulp-css-spriter默认会对样式文件里所有的background/background-image的图片合并，但实际项目中，我们不是所有的图片都需要合并。方法如下：

 background-image: url(../slice/p1-3.png?__spriter);//有?__spriter后缀的合并
 background-image: url(../slice/p-cao1.png); //不合并

我们的less文件引入图片时，可以按照上述方法进行按需引用，但是需要我们修改以下文件：
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);
                    }
                }

如图：
这里写图片描述

问题2：压缩后的js会出现问题，找不到 $还原事故：开发项目使用的是sea.js，对每一个js都进行了cmd封装,一切js的动态交互再本地测试时，均没有任何问题，但是一压缩之后就找不到$ ,网页无法正常显示。很显然，这肯定是gulp调皮了。经查阅，发现是gulp压缩时将$ 和require等关键字也同样进行了压缩，而没有关键字的支撑，我们的页面就没有了源头，所以需要我们排除混淆关键字，解决方法如下：

gulp.task('app_scripts', function(){
   return gulp.src(paths.js) //源文件下的所有js
        .pipe(assetRev())//配置版本号
        .pipe(replace("url:'xviews", "url:'/xviews"))
        .pipe($.uglify({
           //mangle: true,//类型：Boolean 默认：true 是否修改变量名
           mangle: {except: ['require' ,'exports' ,'module' ,'$']}//排除混淆关键字
       }))
        .pipe(gulp.dest(output + "xjs"));//复制到目标文件路径
});

问题3：通过gulp压缩后，低版本IE hack代码给干掉了
还原事故：刚开始开发的时候没有过多的关注ie低版本的问题，在项目上线之前统一开始解决ie低版本兼容问题，本地测试时，均没有问题，于是就放心的打包提测了，但是一测试，发现之前改的一些ie样式没有生效，最开始我以为是less转css阶段出现问题，由于我本地测试均ok，也就说明了问题是出在css代码进行压缩的时候。所以需要我们在压缩时，添加ie兼容模式解决方法如下：

gulp.task('app_styles', function(){
   return gulp.src(paths.css)
        .pipe(assetRev())
        .pipe(replace('url("../../ximages', 'url("/xstatic/ximages'))
        .pipe($.minifyCss({
            advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
            compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
        }))
        .pipe(gulp.dest(output + "xcss/css"));
});