grunt 中应用 grunt-spritesmith

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

hdchangchang

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

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hdchangchang/article/details/47972153

本文介绍如何在已有Grunt项目中利用grunt-spritesmith插件将一组图片转换为图片精灵，并修改相应CSS变量，提升网页加载速度与用户体验。

grunt-spritesmith插件地址：https://github.com/Ensighten/grunt-spritesmith

grunt-spritesmith：Grunt task for converting a set of images into a spritesheet and corresponding CSS variables. 翻译过来就是：grunt-spritesmith是一个grunt任务，它把一些图片转换合成一张图片精灵并修改相应的css中的值。

① 在已有的grunt项目中添加安装 grunt-spritesmith 插件：

npm install grunt-spritesmith --save
<pre name="code" class="plain">npm install grunt-spritesmith --save-dev

② 编写 grunt.js 文件,下面列出相关配置

module.exports = function (grunt) {

  // Time how long tasks take. Can help when optimizing build times
  require('time-grunt')(grunt);

  // Automatically load required grunt tasks
  require('jit-grunt')(grunt, {
      useminPrepare: 'grunt-usemin',
      sprite: 'grunt-spritesmith' //别名
  });
  
grunt.initConfig({
...
    sprite:{
      all: {
        src: '<%= config.app %>/images/sprite/*.png',
        dest: '<%= config.app %>/images/spritesheet.png',
        destCss: '<%= config.app %>/styles/_icon.scss',
        // imgPath: '', //指定css样式表中 img路径
        padding: 10,
        // algorithm: 'left-right', // 图标在 spriesheet中的排列方式
        algorithmOpts: {sort: true} //图标排列 是否按顺序
        // engine: , 现在安装的是gm
        // imgOpts: {quality: 10}
        //可选: 指定CSS格式 (默认根据destCSS中的后缀设置格式)
        // (stylus, scss, scss_maps, sass, less, json, json_array, css)
        // cssFormat: ,
        // cssTemplate: ,
        // cssHandlebarsHelpers: ,
        // cssVarMap: ,
        // cssSpritesheetName: ,
        // cssOpts: ,
      }
    }
...
})

... //这里根据具体业务定义何时执行 任务sprite