Skip to content
Browse files

Merge pull request #10 from zeevl/in-english

English translation
  • Loading branch information...
2 parents 600e4f2 + fcee707 commit 67aec090dc47e636ce42dd496e48b6598cd21f54 @chyingp committed
Showing with 62 additions and 64 deletions.
  1. +19 −9 README.md
  2. +2 −2 package.json
  3. +41 −53 tasks/inline.js
View
28 README.md
@@ -1,18 +1,27 @@
# grunt-inline[![build status](https://secure.travis-ci.org/miniflycn/grunt-inline.png)](http://travis-ci.org/miniflycn/grunt-inline)
-> 将html页面里的外链资源,比如js、css、img,变成内联资源。比如:
-
-带有`__inline`标记的`link`标签,会变成内联样式
+Brings externally referenced resources, such as js, css and images, into
+a single file.
+
+For exmample:
+
+````
+<link href="css/style.css?__inline=true" rel="stylesheet" />
+````
+is replaced with
+````
+<style>
+/* contents of css/style.css */
+</style>
+```
- <link href="css/style.css?__inline=true" rel="stylesheet" />
+Javascript references are brought inline, and images in the html
+and css blocks are converted to base-64 data: urls.
-带有`__inline`标记的`img`标签,会变成内联base64字符串
+By default, only urls marked with `__inline` are converted, however this
+behavior can be overrided via the `tag:` option.
- <img src="img/icon.png?__inline=true" />
-带有`__inline`标记的`script`标签,会变成内联脚本
-
- <script src="js/erport.js?__inline=true"></script>
## Getting Started
This plugin requires Grunt `~0.4.1`
@@ -184,6 +193,7 @@ Then, after the `inline` task is run, the original content in `index.html` will
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [Grunt](http://gruntjs.com/).
## Release History
+* 2014-01-31 v0.2.3 radded tag option, encode url(..) images.
* 2013-10-31  v0.2.2 bug fix: img urls like 'background: url(http://www.example.com/img/bg.png)' will be transformed to 'background: url(url(http://www.example.com/img/bg.png))'
* 2013-10-30  v0.2.1 bug fix: when processing relative file path of img url in css stylesheet, forgot to transform "\" to "/" for windows users
* 2013-10-30  v0.2.0 new feature: Support for minifing js、css when they ar inlined into html.
View
4 package.json
@@ -5,8 +5,8 @@
"url": "https://github.com/chyingp"
},
"name": "grunt-inline",
- "description": "将标记为inline的<script><link>、<img>等资源进行内嵌",
- "version": "0.2.2",
+ "description": "Inlines <img>, <script> and <link> tags into the same file.",
+ "version": "0.2.4",
"keywords": [
"gruntplugin",
"inline",
View
94 tasks/inline.js
@@ -14,11 +14,7 @@ module.exports = function(grunt) {
var UglifyJS = require("uglify-js");
var CleanCSS = require('clean-css');
- grunt.registerMultiTask('inline', "将标记为inline的<script>、<link>、<img>等资源进行内嵌", function() {
- // grunt.log.writeln( typeof this.options('copy') );
- // grunt.log.writeln( JSON.stringify(this.options('copy')) );
-
- grunt.log.subhead('inline任务开始!!\n');
+ grunt.registerMultiTask('inline', "Replaces <link>, <script> and <img> tags to their inline contents", function() {
var files = this.filesSrc,
options = this.options({tag: '__inline'}),
uglify = !!options.uglify,
@@ -30,21 +26,18 @@ module.exports = function(grunt) {
var fileType = path.extname(filepath).replace(/^\./, '');
var fileContent = grunt.file.read(filepath);
- grunt.log.writeln('inline > 处理文件开始:'+ filepath);
-
+ grunt.log.write('Processing ' + filepath + '...')
+
if(fileType==='html'){
fileContent = html(filepath, fileContent, relativeTo, options);
}else if(fileType==='css'){
- //fileContent = html(filepath, fileContent);
+ fileContent = css(filepath, fileContent, relativeTo, options);
}
var destFile = getPathToDestination(filepath, dest);
- grunt.log.writeln('inline > 目标路径:'+ destFile);
grunt.file.write(destFile,fileContent);
- grunt.log.subhead('inline > 处理文件结束:'+ filepath);
+ grunt.log.ok()
});
- grunt.log.subhead('inline任务结束!!');
-
});
function isRemotePath( url ){
@@ -69,10 +62,9 @@ module.exports = function(grunt) {
}
function html(filepath, fileContent, relativeTo, options){
-
- if(relativeTo){
- filepath = filepath.replace(/[^\/]+\//g, relativeTo);
- }
+ if(relativeTo){
+ filepath = filepath.replace(/[^\/]+\//g, relativeTo);
+ }
fileContent = fileContent.replace(/<inline.+?src=["']([^"']+?)["']\s*?\/>/g, function(matchedWord, src){
var ret = matchedWord;
@@ -80,30 +72,24 @@ module.exports = function(grunt) {
if(isRemotePath(src) || !grunt.file.isPathAbsolute(src)){
var inlineFilePath = path.resolve( path.dirname(filepath), src );
- grunt.log.writeln('inline >inline file,src = ' + src + ', 实际路径:'+inlineFilePath);
-
if( grunt.file.exists(inlineFilePath) ){
ret = grunt.file.read( inlineFilePath );
}else{
- grunt.log.error('inline > '+inlineFilePath + ' 不存在!');
+ grunt.log.error("Couldn't find " + inlineFilePath + '!');
}
}
- grunt.log.debug('ret = : ' + ret +'\n');
return ret;
}).replace(/<script.+?src=["']([^"']+?)["'].*?><\/script>/g, function(matchedWord, src){
var ret = matchedWord;
- grunt.log.writeln('tag: ', options.tag, 'src', src)
- if(!isRemotePath(src) && src.indexOf(options.tag)!=-1){
+ if(!isRemotePath(src) && src.indexOf(options.tag)!=-1){
var inlineFilePath = path.resolve( path.dirname(filepath), src ).replace(/\?.*$/, ''); // 将参数去掉
- grunt.log.writeln('inline >inline script,src = ' + src + ', 实际路径:'+inlineFilePath);
-
var c = options.uglify ? UglifyJS.minify(inlineFilePath).code : grunt.file.read( inlineFilePath );
if( grunt.file.exists(inlineFilePath) ){
ret = '<script>\n' + c + '\n</script>';
}else{
- grunt.log.error('inline > '+inlineFilePath + ' 不存在!');
+ grunt.log.error("Couldn't find " + inlineFilePath + '!');
}
}
grunt.log.debug('ret = : ' + ret +'\n');
@@ -117,34 +103,11 @@ module.exports = function(grunt) {
var inlineFilePath = path.resolve( path.dirname(filepath), src ).replace(/\?.*$/, ''); // 将参数去掉
- grunt.log.writeln('inline > inline stylesheet,href = ' + src, ', 实际路径: ' + inlineFilePath);
-
if( grunt.file.exists(inlineFilePath) ){
var styleSheetContent = grunt.file.read( inlineFilePath );
-
- styleSheetContent = styleSheetContent.replace(/url\(["']*([^)'"]+)["']*\)/g, function(matchedWord, imgUrl){
- var newUrl = imgUrl
- if(isBase64Path(imgUrl) || isRemotePath(imgUrl)){
- return matchedWord;
- }
- console.log( 'filepath: '+ filepath);
- console.log( 'imgUrl: '+imgUrl);
- console.log( 'inlineFilePath: '+inlineFilePath);
- var absoluteImgurl = path.resolve( path.dirname(inlineFilePath),imgUrl );
- console.log( 'absoluteImgurl: '+absoluteImgurl);
- newUrl = path.relative( path.dirname(filepath), absoluteImgurl );
- console.log( 'newUrl: '+newUrl);
-
- if(grunt.file.exists(absoluteImgurl))
- newUrl = datauri(absoluteImgurl);
-
- return matchedWord.replace(imgUrl, newUrl);
- });
- styleSheetContent = options.cssmin ? CleanCSS.process(styleSheetContent) : styleSheetContent;
- ret = '<style>\n' + styleSheetContent + '\n</style>';
-
+ ret = '<style>\n' + css(inlineFilePath, styleSheetContent, relativeTo, options) + '\n</style>';
}else{
- grunt.log.error('inline > '+inlineFilePath + ' 不存在!');
+ grunt.log.error("Couldn't find " + inlineFilePath + '!');
}
}
grunt.log.debug('ret = : ' + ret +'\n');
@@ -157,12 +120,10 @@ module.exports = function(grunt) {
var inlineFilePath = path.resolve( path.dirname(filepath), src ).replace(/\?.*$/, ''); // 将参数去掉
- grunt.log.writeln('inline > inline img,src = ' + src, ', 实际路径: ' + inlineFilePath);
-
if( grunt.file.exists(inlineFilePath) ){
ret = matchedWord.replace(src, 'data:image/png;base64'+(new datauri(inlineFilePath)).content);
}else{
- grunt.log.error('inline > '+inlineFilePath + ' 不存在!');
+ grunt.log.error("Couldn't find " + inlineFilePath + '!');
}
}
grunt.log.debug('ret = : ' + ret +'\n');
@@ -172,4 +133,31 @@ module.exports = function(grunt) {
return fileContent;
}
+
+ function css(filepath, fileContent, relativeTo, options) {
+ if(relativeTo){
+ filepath = filepath.replace(/[^\/]+\//g, relativeTo);
+ }
+
+ fileContent = fileContent.replace(/url\(["']*([^)'"]+)["']*\)/g, function(matchedWord, imgUrl){
+ var newUrl = imgUrl
+ if(isBase64Path(imgUrl) || isRemotePath(imgUrl)){
+ return matchedWord;
+ }
+ grunt.log.debug( 'imgUrl: '+imgUrl);
+ grunt.log.debug( 'filepath: '+filepath);
+ var absoluteImgurl = path.resolve( path.dirname(filepath),imgUrl );
+ grunt.log.debug( 'absoluteImgurl: '+absoluteImgurl);
+ newUrl = path.relative( path.dirname(filepath), absoluteImgurl );
+ grunt.log.debug( 'newUrl: '+newUrl);
+
+ if(grunt.file.exists(absoluteImgurl))
+ newUrl = datauri(absoluteImgurl);
+
+ return matchedWord.replace(imgUrl, newUrl);
+ });
+ fileContent = options.cssmin ? CleanCSS.process(fileContent) : fileContent;
+
+ return fileContent;
+ }
};

0 comments on commit 67aec09

Please sign in to comment.
Something went wrong with that request. Please try again.