利用Grunt, 把我们从前端切图拼图中解放出来
前端有一项重要的工作就是切图, 然后把图标拼成sprite, 在目前这个node.js, grunt满天飞的年代, 还手工拼图, 也太out了吧.
想办法把我们从繁复的工作中解脱出来, 利用工具更有效率的工作, 也是前端的一项重要工作嘛.
今天我们要介绍下grunt-css-sprite这个package.
具体如何操作呢?
- 1.假设你目录结构是这样的
----src
--------js
--------css
--------index.html
----build
----package.json
----Gruntfile.js- 2.在package.json, 主要声明好依赖就好
- 3.在Gruntfile.js里, 编写如下配置
配置的注释很清晰, 这里就不用解释了. 有了这个以后, 妈妈以后再也不用担心我手动拼图了.
module.exports = function(grunt) {
// 构建任务配置
grunt.initConfig({
//读取package.json的内容，形成json数据
pkg: grunt.file.readJSON('package.json'),
// 自动雪碧图
sprite: {
options: {
// sprite背景图源文件夹，只有匹配此路径才会处理，默认 images/slice/
imagepath: 'src/slice/',
// 映射CSS中背景路径，支持函数和数组，默认为 null
imagepath_map: null,
// 雪碧图输出目录，注意，会覆盖之前文件！默认 images/
spritedest: 'build/img/',
// 替换后的背景路径，默认 ../images/
spritepath: '../img/',
// 各图片间间距，如果设置为奇数，会强制+1以保证生成的2x图片为偶数宽高，默认 0
padding: 2,
// 是否使用 image-set 作为2x图片实现，默认不使用
useimageset: false,
// 是否以时间戳为文件名生成新的雪碧图文件，如果启用请注意清理之前生成的文件，默认不生成新文件
newsprite: false,
// 给雪碧图追加时间戳，默认不追加
spritestamp: true,
// 在CSS文件末尾追加时间戳，默认不追加
cssstamp: true,
// 默认使用二叉树最优排列算法
algorithm: 'binary-tree',
// 默认使用`pngsmith`图像处理引擎
engine: 'pngsmith'
},
autoSprite: {
files: [{
// 启用动态扩展
expand: true,
// css文件源的文件夹
cwd: 'src/css/',
// 匹配规则
src: '*.css',
// 导出css和sprite的路径地址
dest: 'build/css/',
// 导出的css名
ext: '.sprite.css'
}]
}
}
});
// 加载指定插件任务
grunt.loadNpmTasks('grunt-css-sprite');
// 默认执行的任务
grunt.registerTask('default', ['sprite']);
};