From 23ba88c27921b708f70751a97ce4a7775840ad85 Mon Sep 17 00:00:00 2001 From: xing-zhi Date: Wed, 21 Mar 2018 10:32:30 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E7=B2=BE=E7=81=B5?= =?UTF-8?q?=E5=9B=BE=E8=BE=93=E5=87=BA=E8=B7=AF=E5=BE=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 23 ++++++++++++++++++++--- README_ZH.md | 26 ++++++++++++++++++++++---- lib/loader.js | 21 ++++++++++++--------- 3 files changed, 54 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 3d946bb..5c6a6b1 100644 --- a/README.md +++ b/README.md @@ -68,7 +68,7 @@ It's very easy to adapt Retina screen. You just need to use double size images a sprite-loader will collect all the background and background-image attributes in css files to combine. Except for following circumstance: 1. Images that set the background-position and background-size. - + ``` /* ignore images that set background-position */ .bg1{background: url(1.png) no-repeat -10px -10px;} @@ -76,11 +76,28 @@ sprite-loader will collect all the background and background-image attributes in .bg2{background: url(2.png); background-size: 10px 10px;} ``` 2. Image url that contain #spriteignore string. - + ``` /* ignore all images that contain #spriteignore */ .bg3{background: url(3.png#spriteignore);} ``` - +### 4.Set the output path of the sprite +You can set the output path of the sprite through configure the `outputPath` option, which can be an absolute path with `output.path` as the root or a relative path relative to the `output.path`. + +The path setted will be transformed to an absolute path with `output.path` as the root, and the `output.publicPath` will be prepended when set the background image url in CSS. + +```javascript +const spriteLoader = { + loader: 'sprite-loader', + options: { + outputPath: '/static/imgs/sprites/' + } +} +``` + +Why transform the path to an absolute path with `output.path` as the root? + +Because sprite is one kind of image resource, it should be inside the image directory when deployed. + ## Licence MIT diff --git a/README_ZH.md b/README_ZH.md index 96f482a..736e554 100644 --- a/README_ZH.md +++ b/README_ZH.md @@ -65,7 +65,7 @@ Retina屏适配非常简单，你只需将图片存为2倍大小，且命名为x sprite-loader会收集样式文件中所有的background,background-image属性的图片进行合并，但以下几种情况除外。 1. 设置了background-position，background-size的图片。 - + ``` /* 忽略有background-position的图片 */ .bg1{background: url(1.png) no-repeat -10px -10px;} @@ -73,11 +73,29 @@ sprite-loader会收集样式文件中所有的background,background-image属性 .bg2{background: url(2.png); background-size: 10px 10px;} ``` 2. url带#spriteignore参数的图片。 - + ``` /* 忽略有#spriteignore的图片 */ .bg3{background: url(3.png#spriteignore);} ``` - + +### 4.设置精灵图的输出路径 +通过设置`outputPath`选项设置精灵图的输出路径。该选项可以是以`output.path`为根目录的绝对路径或者相对于`output.path`的相对路径。 + +设置的路径在内部会被转化为以`output.path`为根目录的绝对路径，同时在CSS中设置背景图的路径时，`output.publicPath`会被添加在路径的前面。 + +```javascript +const spriteLoader = { + loader: 'sprite-loader', + options: { + outputPath: '/static/imgs/sprites/' + } +} +``` + +为什么`outputPath`最终被解析为以`output.path`为根目录的绝对路径？ + +因为精灵图作为一种图片资源，部署时应该和其他图片位于同一个目录。 + ## 协议 -MIT \ No newline at end of file +MIT diff --git a/lib/loader.js b/lib/loader.js index 6937704..a49a1d9 100644 --- a/lib/loader.js +++ b/lib/loader.js @@ -107,16 +107,19 @@ function createSpriteImage(images, repeatType, query) { } function emitSprite(name, buffer) { - let options = (loaderUtils.getOptions ? loaderUtils.getOptions(this) : loaderUtils.parseQuery(this.query)) || {}; - let outputPath = options.outputPath || ''; - let cssImagePath = options.cssImagePath || this._compiler.options.output.publicPath; - let nameTpl = name || '[hash].png'; + const options = (loaderUtils.getOptions ? loaderUtils.getOptions(this) : loaderUtils.parseQuery(this.query)) || {}; + const outputPath = options.outputPath || ''; + const publicPath = this._compiler.options.output.publicPath; + const projectOutputPath = this._compiler.options.output.path; + const nameTpl = name || '[hash].png'; + const url = loaderUtils.interpolateName(this, nameTpl, {content: buffer}); + const theAbsoluteOutputPath = path.isAbsolute(outputPath) ? outputPath : `/${path.relative(projectOutputPath, outputPath)}`; + const theSpriteFilePath = path.resolve(theAbsoluteOutputPath, url); + const theImageUrlInCSS = path.resolve(publicPath + theAbsoluteOutputPath + url); - let url = loaderUtils.interpolateName(this, nameTpl, {content: buffer}); - this.emitFile(outputPath+url, buffer); + this.emitFile(theSpriteFilePath, buffer); - //return this._compiler.options.output.publicPath + url; - return cssImagePath+url; + return theImageUrlInCSS; } function toPx(num) { @@ -261,4 +264,4 @@ module.exports.loader = function (content) { }) .then(cssText => callback(null, cssText)) .catch(e => callback(e)); -}; \ No newline at end of file +}; From 1b8af16ab597b551d4bad22e42f84ce1febb4922 Mon Sep 17 00:00:00 2001 From: ranwu Date: Thu, 19 Apr 2018 16:30:16 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E8=B7=A8=E5=B9=B3=E5=8F=B0=E7=9A=84?= =?UTF-8?q?=E7=B2=BE=E7=81=B5=E5=9B=BE=E8=BE=93=E5=87=BA=E8=B7=AF=E5=BE=84?= =?UTF-8?q?=E5=8F=8A=E4=BF=AE=E6=AD=A3CSS=E4=B8=AD=E7=B2=BE=E7=81=B5?= =?UTF-8?q?=E5=9B=BE=E8=B7=AF=E5=BE=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/loader.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/loader.js b/lib/loader.js index a49a1d9..061a638 100644 --- a/lib/loader.js +++ b/lib/loader.js @@ -109,13 +109,13 @@ function createSpriteImage(images, repeatType, query) { function emitSprite(name, buffer) { const options = (loaderUtils.getOptions ? loaderUtils.getOptions(this) : loaderUtils.parseQuery(this.query)) || {}; const outputPath = options.outputPath || ''; - const publicPath = this._compiler.options.output.publicPath; - const projectOutputPath = this._compiler.options.output.path; + const projectkOutputOptions = this._compiler.options.output; + const projectPublicPath = projectkOutputOptions.publicPath; const nameTpl = name || '[hash].png'; const url = loaderUtils.interpolateName(this, nameTpl, {content: buffer}); - const theAbsoluteOutputPath = path.isAbsolute(outputPath) ? outputPath : `/${path.relative(projectOutputPath, outputPath)}`; - const theSpriteFilePath = path.resolve(theAbsoluteOutputPath, url); - const theImageUrlInCSS = path.resolve(publicPath + theAbsoluteOutputPath + url); + const normalizedOutputPath = outputPath.replace(/^\.?\/?/, ''); + const theSpriteFilePath = `${normalizedOutputPath}/${url}`.replace(/\/\//g, '/'); + const theImageUrlInCSS = (projectPublicPath + normalizedOutputPath + url).replace(/\/\//g, '/'); this.emitFile(theSpriteFilePath, buffer);