使用grunt对css中的background图片自动生成雪碧图_html/css_WEB-ITnose
公司研发的系统为B/S架构,用户使用浏览器访问系统时,使用浏览器自带工具查看,对图片的请求数极多,多为小图片。
今天想对这个现状进行改善,网上查到一种雪碧图的方案,其实就是使用工具将数量很多的小图片拼成一张大图片,然后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;...

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
