【gulp】JS文件的压缩混淆与雪碧图

平台：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:


To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML

*/
.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;
}