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

来源：互联网发布：真实恐怖故事知乎编辑：程序博客网时间：2024/05/17 04:27

平台：node

环境：gulp

插件：gulp-uglify用于压缩混淆JS文件；gulp.spritesmit用于制作雪碧图

【JS文件压缩混淆】

var gulp = require("gulp");var uglifyjs = require("gulp-uglify");//压缩混淆jsgulp.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;}

1 0