├── LICENSE
├── test
├── dist
│ ├── styles
│ │ └── main.css
│ └── index.html
├── package.json
└── Gruntfile.js
├── tasks
├── .DS_Store
└── inline.js
├── package.json
└── README.md
/LICENSE:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test/dist/styles/main.css:
--------------------------------------------------------------------------------
1 | .main{border: none;}
--------------------------------------------------------------------------------
/tasks/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/localnerve/grunt-inline/master/tasks/.DS_Store
--------------------------------------------------------------------------------
/test/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "grunt-inline",
3 | "version": "0.1.6",
4 | "repository": {
5 | "type": "git",
6 | "url": "https://github.com/chyingp/grunt-inline.git"
7 | },
8 | "engines": {
9 | "node": ">=0.8.0"
10 | },
11 | "devDependencies": {
12 | "grunt": "~0.4.1",
13 | "grunt-inline": "~0.1.8"
14 | }
15 | }
--------------------------------------------------------------------------------
/test/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | test
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/test/Gruntfile.js:
--------------------------------------------------------------------------------
1 | module.exports = function(grunt) {
2 |
3 | // Project configuration.
4 | grunt.initConfig({
5 |
6 | inline: {
7 | dist: {
8 | src: ['dist/index.html'],
9 | dest: ['dev/']
10 | }
11 | }
12 |
13 | });
14 |
15 | // Load the plugin that provides the "uglify" task.
16 | grunt.loadNpmTasks('grunt-inline');
17 |
18 | // Default task(s).
19 | grunt.registerTask('default', ['inline']);
20 |
21 | };
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "author": {
3 | "name": "程序猿小卡",
4 | "email": "chyingp@gmail.com",
5 | "url": "https://github.com/chyingp"
6 | },
7 | "name": "grunt-inline",
8 | "description": "将标记为inline的
16 | ## Getting Started
17 | This plugin requires Grunt `~0.4.1`
18 |
19 | If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
20 |
21 | npm install grunt-inline --save-dev
22 |
23 | Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
24 |
25 | grunt.loadNpmTasks('grunt-inline');
26 |
27 | ## The "grunt-inline" task
28 |
29 | ### Overview
30 | In your project's Gruntfile, add a section named `inline` to the data object passed into `grunt.initConfig()`.
31 |
32 | grunt.initConfig({
33 | inline: {
34 | dist: {
35 | src: [ 'dist/index.html' ]
36 | },
37 | },
38 | })
39 | ### Options
40 |
41 | #### dest
42 | If dest is assigned, the the source file will be copied to the destination path. eg:
43 | `dist/index.html` will be processed and then copied to `dest/index.html`
44 |
45 | ```
46 | grunt.initConfig({
47 | inline: {
48 | dist: {
49 | src: ['dist/index.html'],
50 | dest: ['dest/']
51 | }
52 | }
53 | });
54 | ```
55 |
56 | ### Usage Examples
57 |
58 | > config
59 |
60 | grunt.initConfig({
61 | inline: {
62 | dist: {
63 | src: [ 'dist/index.html' ],
64 | dest: [ 'dev/' ]
65 | }
66 | }
67 | })
68 |
69 | > src/index.html
70 |
71 |
72 |
73 | demo
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 | > after `grunt inline` was run, it will be something like
84 |
85 |
86 |
87 | demo
88 |
93 |
94 |
95 |
96 |
97 |
98 |
106 |
107 |
108 |
109 | #### inline tag
110 | Suppose there is an `` tag in `index.html` like bellow
111 |
112 | ```
113 |
114 |
115 | ```
116 |
117 | The content of `test.html` is
118 |
119 | ```
120 |
I'm inline html
121 | hello world!
122 | ```
123 |
124 | Then, after the `inline` task is run, the original content in `index.html` will be replaced with
125 |
126 | ```
127 |
I'm inline html
128 | hello world!
129 | ```
130 |
131 | ## Contributing
132 | 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/).
133 |
134 | ## Release History
135 | * 2013-08-30 v0.1.6 bug fix: stylesheets ended with ">" cannot be inlined
136 | * 2013-09-02 v0.1.7 add feature: add options.dest to assign a destination path where the source file will be copied
137 | * 2013-09-02 v0.1.8 add feature: support for `` tag
138 |
--------------------------------------------------------------------------------
/tasks/inline.js:
--------------------------------------------------------------------------------
1 | /*
2 | * casper-inline
3 | * https://github.com/tactivos/casper-inline
4 | *
5 | * Copyright (c) 2013 Auguest G. casper & IMWEB TEAM
6 | */
7 |
8 | 'use strict';
9 |
10 | module.exports = function(grunt) {
11 |
12 | var path = require('path');
13 | var datauri = require('datauri');
14 |
15 | grunt.registerMultiTask('inline', "将标记为inline的';
91 | }else{
92 | grunt.log.error('inline > '+inlineFilePath + ' 不存在！');
93 | }
94 | }
95 | grunt.log.debug('ret = : ' + ret +'\n');
96 |
97 | return ret;
98 |
99 | }).replace(//g, function(matchedWord, src){
100 | var ret = matchedWord;
101 |
102 | if(!grunt.file.isPathAbsolute(src) && src.indexOf('__inline')!=-1){
103 |
104 | var inlineFilePath = path.resolve( path.dirname(filepath), src ).replace(/\?.*$/, ''); // 将参数去掉
105 |
106 | grunt.log.writeln('inline > inline stylesheet，href = ' + src, ', 实际路径： ' + inlineFilePath);
107 |
108 | if( grunt.file.exists(inlineFilePath) ){
109 | ret = '';
110 | }else{
111 | grunt.log.error('inline > '+inlineFilePath + ' 不存在！');
112 | }
113 | }
114 | grunt.log.debug('ret = : ' + ret +'\n');
115 |
116 | return ret;
117 | }).replace(//g, function(matchedWord, src){
118 | var ret = matchedWord;
119 |
120 | if(!grunt.file.isPathAbsolute(src) && src.indexOf('__inline')!=-1){
121 |
122 | var inlineFilePath = path.resolve( path.dirname(filepath), src ).replace(/\?.*$/, ''); // 将参数去掉
123 |
124 | grunt.log.writeln('inline > inline img，src = ' + src, ', 实际路径： ' + inlineFilePath);
125 |
126 | if( grunt.file.exists(inlineFilePath) ){
127 | ret = matchedWord.replace(src, 'data:image/png;base64'+(new datauri(inlineFilePath)).content);
128 | }else{
129 | grunt.log.error('inline > '+inlineFilePath + ' 不存在！');
130 | }
131 | }
132 | grunt.log.debug('ret = : ' + ret +'\n');
133 |
134 | return ret;
135 | });
136 | }
137 | };
138 |
--------------------------------------------------------------------------------
78 |
79 |
80 |
81 |
82 |
83 | > after `grunt inline` was run, it will be something like
84 |
85 |
86 |
87 |