用 gulp.spritesmith 自动化雪碧图

时间 2019-11-11

标签 gulp.spritesmith gulp spritesmith 自动化雪碧栏目 JavaScript 繁體版

原文原文链接

1、安装nodejs以后，要设置两个环境变量php

在计算机右击属性---高级系统设置---高级---环境变量打开窗口css

新建2个环境变量，它们的值分别是nodejs根目录下的node_modules路径及npm的路径node

1.变量：NODE_PATH 值：D:\www\nodejs\node_modulessql

2.变量：PATH 值：D:\www\nodejs\npm npm

2、进入images上一层目录，运行gulp

npm install gulp gulp.spritesmith

3、新建gulpfile.jsui

var gulp = require('gulp'); var spritesmith = require('gulp.spritesmith'); gulp.task('sprite', function () { var spriteData = gulp.src('images/*.png').pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })); return spriteData.pipe(gulp.dest('output/')); });

4、运行命令，在output文件夹生成 sprite.png 、sprite.cssspa

gulp sprite