前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

前端集合 RSS订阅
Home » 前端集合 » 利用Grunt, 把我们从前端切图拼图中解放出来

利用Grunt, 把我们从前端切图拼图中解放出来

发布者:前端集合 // 发布时间:2014-07-05 00:38:00 // 分类:前端集合 // 访问: 15,699 次 // 热度:

利用Grunt, 把我们从前端切图拼图中解放出来

前端有一项重要的工作就是切图, 然后把图标拼成sprite, 在目前这个node.js, grunt满天飞的年代, 还手工拼图, 也太out了吧.

想办法把我们从繁复的工作中解脱出来, 利用工具更有效率的工作, 也是前端的一项重要工作嘛.

今天我们要介绍下grunt-css-sprite这个package.

具体如何操作呢?

----src
--------js
--------css
--------index.html
----build
----package.json
----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']);
};

Tags: 前端, grunt, 前端切图, 前端拼图

如何利用Grunt单独压缩各个JS和CSS文件,并生成对应的Source Map>>  << 一个多月没更新了
Top