Home Web Front-end HTML Tutorial 使用grunt对css中的background图片自动生成雪碧图_html/css_WEB-ITnose

使用grunt对css中的background图片自动生成雪碧图_html/css_WEB-ITnose

Jun 21, 2016 am 09:14 AM

公司研发的系统为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']);};
Copy after login

package.json:

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

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;...
Copy after login


Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

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.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

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.

What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

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

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

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

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

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...

How to implement adaptive layout of Y-axis position in web annotation? How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

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: Essential Tools for Web Developers HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

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.

See all articles