平台:node
环境:gulp
插件:gulp-uglify用于压缩混淆JS文件;gulp.spritesmit用于制作雪碧图
【JS文件压缩混淆】
var gulp = require("gulp");
var uglifyjs = require("gulp-uglify");//压缩混淆js
gulp.task("hunxiao",function(){
return gulp.src("src/img/*.*") //JS文件地址
.pipe(uglifyjs())
.pipe(gulp.dest("build")) //混淆后文件输出地址
})
【雪碧图】
var gulp = require("gulp");
var spritesmith = require('gulp.spritesmith'); //雪碧图
gulp.task('sprite', function () {
var spriteData = gulp.src('src/img/*.png').pipe(spritesmith({ //需要混合的图片路径
imgName: 'sprite.png', //合并后图片的名称
cssName: 'sprite.css' //生成的CSS文件
}));
return spriteData.pipe(gulp.dest('sprite')); //文件输出路径
});
CSS文件示例:
/*
Icon classes can be used entirely standalone. They are named after their original file names.
Example usage in HTML:
`display: block` sprite:
<div class="icon-home"></div>
To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
// CSS
.icon {
display: inline-block;
}
// HTML
<i class="icon icon-home"></i>
*/
.icon-logo_1 {
background-image: url(sprite.png);
background-position: 0px 0px;
width: 300px;
height: 300px;
}
.icon-logo_2 {
background-image: url(sprite.png);
background-position: -300px 0px;
width: 300px;
height: 300px;
}