grunt を使用して css_html/css_WEB-ITnose の背景画像のスプライト画像を自動生成する

同社が開発したシステムは B/S アーキテクチャを採用しており、ユーザーがブラウザを使用してシステムにアクセスすると、ブラウザ独自のツールを使用して画像を表示します。そのほとんどは小さな画像です。

今日はこの状況を改善したいと思います。実際、ツールを使用して多数の小さな画像を 1 つの大きな画像に結合し、この大きな画像を CSS で参照するというものです。画像の表示を指定する必要がありますが、この解決策には多くの手作業が必要です。

そこで、現在比較的成熟している grunt を使用して、フロントエンドのスタイル ファイルの自動処理、スプライト画像の自動生成、スタイル ファイルの自動修正を実行できないか考えました。検索した結果、解決策が見つかりました。以下は Gruntfile.js ファイルの一部です:

module.exports = function(grunt) {  // Project configuration.  grunt.initConfig({    // 自动雪碧图    sprite: {      options: {        // 映射CSS中背景路径，支持函数和数组，默认为 null        imagepath_map: null,        // 各图片间间距，如果设置为奇数，会强制+1以保证生成的2x图片为偶数宽高，默认 0        padding: 0,        // 是否使用 image-set 作为2x图片实现，默认不使用        useimageset: false,        // 是否以时间戳为文件名生成新的雪碧图文件，如果启用请注意清理之前生成的文件，默认不生成新文件        newsprite: false,        // 给雪碧图追加时间戳，默认不追加        spritestamp: true,        // 在CSS文件末尾追加时间戳，默认不追加        cssstamp: true,        // 默认使用二叉树最优排列算法        algorithm: 'binary-tree',        // 默认使用`pixelsmith`图像处理引擎        engine: 'pixelsmith'      },      sprite_module1: { //只对module1目录进行自动生成雪碧图处理        options : {          // sprite背景图源文件夹，只有匹配此路径才会处理，默认 images/slice/          imagepath: 'module1/images/',          // 雪碧图输出目录，注意，会覆盖之前文件！默认 images/          spritedest: 'module1/images/'        },        files: [{          // 启用动态扩展          expand: true,          // css文件源的文件夹          cwd: 'module1/',          // 匹配规则          src: ['**/*.css', '!**/*.sprite.css'],          // 导出css和sprite的路径地址          dest: 'module1/',          // 导出的css名          ext: '.sprite.css',          extDot: 'last'        }]      }    }  });    // 加载包含 "sprite" 任务的插件。  // grunt.loadNpmTasks('grunt-css-sprite'); //因为希望生成的雪碧图为.sprite.png结尾，对原来的grunt-css-sprite作了些改动，于是手动加载grunt_tasks  grunt.loadTasks('grunt_tasks');  grunt.registerTask('default', ['sprite']);};

package.json:

{  "name": "xxx",  "version": "x.x.x",  "devDependencies": {    "grunt": "0.4.5",    "async": "0.9.0",    "spritesmith": "1.3.0"  }}

grunt_tasks ディレクトリ構造は次のとおりです:

その中に

sprite.js があります。 https://github.com/ laoshu133/grunt-css-sprite プロジェクトから取得しました

css-spritesmith.js, imageSetSpriteCreator.js, place_after.png, place_before.png https://github.com/laoshu133 から取得しました/css-spritesmith プロジェクトですが、css-spritesmith.js ファイルが変更されました

...sliceData.timestamp = options.spritestamp ? timeNow : '';sliceData.timestamp = options.spritestamp ? ('?'+timeNow) : '';sliceData.imgDest = fixPath(path.join(options.spritedest, cssFilename + '.sprite.png'));sliceData.spriteImg = fixPath(path.join(options.spritepath, cssFilename + '.sprite.png')) +    sliceData.timestamp;sliceData.retinaImgDest = fixPath(sliceData.imgDest.replace(/\.png$/, '@2x.sprite.png'));sliceData.retinaSpriteImg = fixPath(path.join(options.spritepath, cssFilename + '@2x.sprite.png')) +  sliceData.timestamp;...