grunt 打包雪碧图 grunt-spritesmith

最新推荐文章于 2024-11-06 02:43:53 发布

踏着阳光

最新推荐文章于 2024-11-06 02:43:53 发布

阅读量245

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 js

本文链接：https://blog.youkuaiyun.com/qq_35014708/article/details/89021489

js 同时被 2 个专栏收录

55 篇文章

订阅专栏

html5

18 篇文章

订阅专栏

本文介绍如何利用grunt-spritesmith插件来自动批量生成雪碧图(sprites)及其对应的LESS或CSS文件。通过配置grunt任务，可以轻松指定图片来源、输出路径等参数。

安装

npm install grunt-spritesmith --save-dev

module.exports = function (grunt) {
  // Configure grunt
  grunt.initConfig({
    sprite:{
      all: {
        src: 'path/to/your/sprites/*.png',////素材图片
        dest: 'destination/of/spritesheet.png',// 默认雪碧图输出路径
        destCss: 'destination/of/sprites.css'//// 雪碧图less输出路径，也支持输出css
      }
    }
  });
 
  // Load in `grunt-spritesmith`
  grunt.loadNpmTasks('grunt-spritesmith');
};

运行