[\\s\\S]*?<\\/script>', 'gi'),
23 | srcRegx = new RegExp('\\s*(src)="+([\\s\\S]*?)"');
24 |
25 | var joint = function(tag, content){
26 | return '<'+ tag +'>' + content + '';
27 | };
28 |
29 | // add for gulpman
30 | var _file;
31 |
32 | /**
33 | * 获取get模式下url中的指定参数值
34 | * @param name 参数名
35 | * @param url 传入的url地址
36 | * @returns {*}
37 | */
38 | var getParams = function(name, url) {
39 | var reg = new RegExp('(^|&)' + name + '=?([^&]*)(&|$)', 'i'), search = '';
40 | if(url && url !== ''){
41 | search = (url.split('?')[1] || '').match(reg);
42 | }else{
43 | search = window.location.search.substr(1).match(reg);
44 | }
45 | if(search && search[0].indexOf(name) !== -1) {
46 | return search[2] ? decodeURI(search[2]) : null;
47 | }
48 | };
49 |
50 | //压缩内联css代码 | js脚本
51 | var miniInline = function(content, type, options){
52 | var isMinifyCss = options && !!options.minifyCss,
53 | isMinifyJs = options && !!options.minifyJs,
54 | ignore = options['ignore'] || 'ignore',
55 | basePath = options['basePath'] || '',
56 | queryKey = options['queryKey'] || '_gm_inline',
57 | queryRegx = new RegExp('&*'+ queryKey +'[=|&]?', 'i'),
58 | code = content,
59 | tags;
60 |
61 | tags = content.match(/<[\s\S]*?<*\/*[\s\S]*?>/gi);
62 |
63 | if(tags && tags[0] && tags[0].indexOf(ignore) !== -1)
64 | return content;
65 |
66 | if('css' === type){
67 | if(!isMinifyCss) return content;
68 | code = uglifycss.processString(content, options);
69 | }
70 | else if('js' === type){
71 | if(!isMinifyJs) return content;
72 |
73 | /**
74 | * FIX BUGS FOR replace
75 | */
76 | // gmutil.alert('content: \n'+content)
77 | // gmutil.alert('opts: \n'+JSON.stringify(options))
78 |
79 | var pt = /(?=['"]?)([\w\/\-\?\&\=]*?\.js)(?=['"]?)/gm,
80 | item
81 |
82 | // 如果没有标记inline，那么不处理
83 | if((item = content.match(pt)) && (item = item[0])){
84 | if(!item.match(queryRegx)) return content
85 | }
86 |
87 | // gmutil.alert(jsmin(content, options).code)
88 | code = jsmin(content, options).code.replace(/\n*\t*/gi, '');
89 | }
90 | return code;
91 | };
92 |
93 | //replace callback src | href
94 | var replaceCallback = function(sourceRegx, match, parentFile, type, options){
95 |
96 | var ms = sourceRegx.exec(match),
97 | code = '',
98 | query,
99 | isMinifyCss = options && !!options.minifyCss,
100 | isMinifyJs = options && !!options.minifyJs,
101 | ignore = options['ignore'] || 'ignore',
102 | basePath = options['basePath'] || '',
103 | queryKey = options['queryKey'] || '_gm_inline',
104 | queryRegx = new RegExp('&*'+ queryKey +'[=|&]?', 'i');
105 |
106 | if(!ms || !ms[2] || '' === ms[2]){
107 | return miniInline(match, type, options);
108 | }
109 | var attr = ms[1] || '',
110 | href = ms[2] || '';
111 |
112 |
113 | if(match.indexOf(ignore) !== -1)
114 | return match.replace(queryRegx, '');
115 |
116 | //在url地址上加上 _gm_inline_字段就可以直接嵌入网页
117 | query = getParams(queryKey, href);
118 |
119 | if(query === undefined){
120 | return match.replace(queryRegx, '');
121 | }
122 |
123 | // 如果使用绝对路径
124 | if(options['absoluteRoot']){
125 | var sourceFile = path.join(options['root'], options['absoluteRoot'], href.split('?')[0])
126 | }else {
127 | var sourceFile = path.normalize(path.dirname(parentFile) + path.sep + basePath + href.split('?')[0])
128 | }
129 |
130 | if(!options['is_runtime']){
131 |
132 | var url_runtime_dir = path.join(options['root'], options['runtime_dir']),
133 | url_dist_dir = path.join(options['root'], options['dist_dir']),
134 | sourceFile = sourceFile.replace(url_dist_dir, url_runtime_dir)
135 | }
136 | // remove the url prefix for once
137 | // the url is abs url
138 | sourceFile = sourceFile.replace(options['url_prefix'], '')
139 |
140 | if(!fs.existsSync(sourceFile)){
141 | gmutil.error('\n*Error: \n*Inline File Not Exist: '+sourceFile+'\n')
142 |
143 | return match;
144 | }
145 |
146 | content = getFileContent(sourceFile);
147 |
148 | // add for gulpman store save
149 | store.save(sourceFile, _file.path)
150 |
151 |
152 | if('css' === type){
153 | if(!isMinifyCss)
154 | return joint('style', content);
155 | code = uglifycss.processString(content, options);
156 | code = joint('style', code);
157 | }
158 | else if('js' === type){
159 |
160 | if(!isMinifyJs)
161 | return joint('script', content);
162 | code = jsmin(content, options).code.replace(/\n*\t*/gi, '');
163 | code = joint('script', code);
164 | }
165 |
166 | return code;
167 |
168 | };
169 |
170 | //根据标签类型获取内容并压缩
171 | var execture = function(file, options){
172 |
173 | var parentFile = path.normalize(file.path);
174 | var fileContents = file.contents.toString('utf8');
175 | if(typeof fileContents === 'undefined'){
176 | fileContents = getFileContent(file.path);
177 | }
178 |
179 | // get the single tag replace-content (mined)
180 | var content = fileContents
181 | .replace(linkRegx, function($1){
182 |
183 | //like:
184 | return replaceCallback(hrefRegx, $1, parentFile, 'css', options);
185 |
186 | }).replace(jsRegx, function($1){
187 |
188 | //like:
189 | return replaceCallback(srcRegx, $1, parentFile, 'js', options);
190 |
191 | }).replace(styleRegx, function($1){
192 |
193 | //like:
194 | //
200 | //console.log($1);
201 | return miniInline($1, 'css', options);
202 |
203 | }).replace(scriptRegx, function($1){
204 | //like:
205 | //
212 |
213 | /**
214 | * @debug for replace bug
215 | * this trigger the src with type joined together
216 | * lead into miniInline
217 | */
218 | return miniInline($1, 'js', options);
219 | });
220 |
221 | return content;
222 | };
223 |
224 | //get the content of files
225 | var getFileContent = function(file){
226 | if(!fs.existsSync(file)) throw new Error('File not find: ' + file);
227 | var fileContent = fs.readFileSync(file, { encoding: 'utf8' });
228 | return fileContent;
229 | //file.contents = new Buffer(uglifycss.processString(fileContent, options));
230 | };
231 |
232 | //get the mined files content
233 | var getContent = function(file, options){
234 |
235 | var content = execture(file, options);
236 | return content;
237 | };
238 |
239 | //将压缩后的内容替换到html中
240 | var inline = function(options){
241 | var options = options || {},
242 | basePath = options.basePath;
243 | //是否压缩css, 默认压缩
244 | options.minifyCss = 'undefined' === typeof(options.minifyCss) ? true : options.minifyCss;
245 | //是否压缩js, 默认压缩
246 | options.minifyJs = 'undefined' === typeof(options.minifyJs) ? true : options.minifyJs;
247 |
248 | return through2.obj(function(file, enc, next){
249 |
250 | if (file.isStream()) {
251 | this.emit('error', new PluginError(PLUGIN_NAME, 'Stream content is not supported'));
252 | return next(null, file);
253 | }
254 |
255 | _file = file
256 |
257 | if (file.isBuffer()) {
258 | try {
259 | var content = getContent(file, options);
260 |
261 | file.contents = new Buffer(content);
262 | }
263 | catch (err) {
264 | this.emit('error', new PluginError(PLUGIN_NAME, err['message']));
265 | }
266 | }
267 | this.push(file);
268 | return next();
269 |
270 |
271 | });
272 |
273 | };
274 |
275 | module.exports = inline;
--------------------------------------------------------------------------------
/lib/revReplace.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var path = require('path');
4 | var gutil = require('gulp-util');
5 | var through = require('through2');
6 |
7 | var gmutil = require('./gmutil');
8 |
9 |
10 | function plugin(options) {
11 | var renames = [];
12 | var cache = [];
13 |
14 | options = options || {};
15 |
16 | if (!options.canonicalUris) {
17 | options.canonicalUris = true;
18 | }
19 |
20 | options.replaceInExtensions = options.replaceInExtensions || ['.js', '.css', '.html', '.hbs'];
21 |
22 | // @debug add for gulpman
23 | options.prefix = options.prefix || '';
24 | options['_prefix'] = options['prefix']
25 | options['_all_prefix'] = new Set()
26 | var _url_prefix = options['url_prefix']
27 |
28 | // @add prefix array and fn support
29 | // @Lucas
30 | if(typeof options.prefix == 'string'){
31 | options['_all_prefix'].add(options.prefix)
32 | }else if(options.prefix instanceof Array){
33 | // 虽然在gulpman/index中已经做了proxy，但是目前注释掉这块，会导致/http://xx的问题，需要处理下
34 | Object.defineProperty(options, 'prefix',{
35 | get: function () {
36 | var p = this['_prefix'][gmutil.randomNum(0, options['_prefix'].length-1)]
37 |
38 | options['_all_prefix'].add(p)
39 |
40 | return p
41 | },
42 | set : function (val) {
43 | this['_prefix'] = val
44 | },
45 | configurable : true
46 | })
47 | // if the param is a function
48 | }else if(options.prefix instanceof Function){
49 | Object.defineProperty(options, 'prefix',{
50 | get: function () {
51 | var p = this['_prefix'](options['_tmpMediaFilePath'], options['_tmpMediaFilePath'])
52 |
53 | options['_all_prefix'].add(p)
54 |
55 | return p;
56 |
57 | },
58 | set : function (val) {
59 | this['_prefix'] = val
60 | },
61 | configurable : true
62 | })
63 | }else {
64 | // default
65 | }
66 |
67 |
68 | return through.obj(function collectRevs(file, enc, cb) {
69 | if (file.isNull()) {
70 | this.push(file);
71 | return cb();
72 | }
73 |
74 | if (file.isStream()) {
75 | this.emit('error', new gutil.PluginError('gulp-rev-replace', 'Streaming not supported'));
76 | return cb();
77 | }
78 |
79 |
80 | // 此处file是宿主文件
81 | options['_file'] = file
82 |
83 | // Collect renames from reved files.
84 | if (file.revOrigPath) {
85 |
86 | // @add for gulpman hooks
87 | options['_tmpHostFilePath'] = file.path
88 |
89 | var mediaFilePath = fmtPath(file.revOrigBase, file.revOrigPath)
90 |
91 | // media file ,js css,egg.
92 | options['_tmpMediaFilePath'] = mediaFilePath
93 |
94 | // 此处触发一次运行函数
95 | var availablePrefix = options.prefix
96 |
97 | renames.push({
98 | unreved: mediaFilePath,
99 | reved: availablePrefix + fmtPath(file.base, file.path)
100 | });
101 | }
102 |
103 | if (options.replaceInExtensions.indexOf(path.extname(file.path)) > -1) {
104 | // file should be searched for replaces
105 | cache.push(file);
106 | } else {
107 | // nothing to do with this file
108 | this.push(file);
109 | }
110 |
111 | cb();
112 | }, function replaceInFiles(cb) {
113 | var stream = this;
114 |
115 | if (options.manifest) {
116 | // Read manifest file for the list of renames.
117 | options.manifest.on('data', function (file) {
118 |
119 | var manifest = JSON.parse(file.contents.toString());
120 |
121 |
122 | Object.keys(manifest).forEach(function (srcFile) {
123 |
124 | // @add for gulpman hooks
125 | var unrevedFilePath = canonicalizeUri(srcFile)
126 | //if want delete source file, can do delete here
127 | options['_tmpMediaFilePath'] = unrevedFilePath
128 |
129 | if(options['_file']){
130 | options['_tmpHostFilePath'] = options['_file'].path
131 | }
132 |
133 | // 此处每次get prefix，都会运行一次产生函数,每次结果可能不同
134 | var availablePrefix = options.prefix
135 |
136 | renames.push({
137 | unreved: unrevedFilePath,
138 | reved: availablePrefix + canonicalizeUri(manifest[srcFile])
139 | });
140 |
141 | });
142 | });
143 |
144 | options.manifest.on('end', replaceContents);
145 | }
146 | else {
147 | replaceContents();
148 | }
149 |
150 | function replaceContents() {
151 | renames = renames.sort(gmutil.byLongestUnreved);
152 |
153 | // Once we have a full list of renames, search/replace in the cached
154 | // files and push them through.
155 | cache.forEach(function replaceInFile(file) {
156 | var contents = file.contents.toString();
157 |
158 | renames.forEach(function replaceOnce(rename) {
159 | var unreved = options.modifyUnreved ? options.modifyUnreved(rename.unreved) : rename.unreved;
160 | var reved = options.modifyReved ? options.modifyReved(rename.reved) : rename.reved;
161 |
162 | contents = contents.split(unreved).join(reved);
163 |
164 | options['_all_prefix'].size && options['_all_prefix'].forEach((availablePrefix)=>{
165 | // add for gulpman hooks
166 | // 这块需要遍历所有prefix,每次prefix可能会变，导致替换失败
167 | if (availablePrefix) {
168 | var _tmp_full_url_prefix = _url_prefix + '/'+ availablePrefix;
169 | var _full_url_prefix = gmutil.joinUrl(availablePrefix, _url_prefix);
170 |
171 | contents = contents.split(_tmp_full_url_prefix).join(_full_url_prefix)
172 | }
173 | })
174 |
175 | });
176 |
177 | file.contents = new Buffer(contents);
178 | stream.push(file);
179 | });
180 |
181 | cb();
182 | }
183 | });
184 |
185 |
186 | function fmtPath(base, filePath) {
187 | var newPath = path.relative(base, filePath);
188 |
189 | return canonicalizeUri(newPath);
190 | }
191 |
192 |
193 | // 标准化url
194 | function canonicalizeUri(filePath) {
195 | if (path.sep !== '/' && options.canonicalUris) {
196 | filePath = filePath.split(path.sep).join('/');
197 | }
198 |
199 | return filePath;
200 | }
201 |
202 | }
203 |
204 |
205 | /**
206 | * Export API
207 | * @type {[type]}
208 | */
209 |
210 | module.exports = plugin;
211 |
--------------------------------------------------------------------------------
/lib/spriter/README.md:
--------------------------------------------------------------------------------
1 | [](http://badge.fury.io/js/gulp-css-spriter)
2 |
3 | # gulp-css-spriter
4 |
5 | `gulp-css-spriter`, a [gulp](http://gulpjs.com/) plugin, looks through the CSS you pipe in and gathers all of the background images. It then creates a sprite sheet and updates the references in the CSS.
6 |
7 | You can easily exclude/include certain background image declarations using meta info in your styles([*see meta section below*](#meta-options)) and `includeMode` option([*see options section below*](#options)) depending on your use case.
8 |
9 | # Install
10 |
11 | ### Latest Version: 0.3.3
12 |
13 | `npm install gulp-css-spriter`
14 |
15 | # About
16 |
17 | `gulp-css-spriter` uses [spritesmith](https://www.npmjs.com/package/spritesmith) behind the scenes for creating the sprite sheet.
18 |
19 | # Usage
20 |
21 | ## Basic usage
22 |
23 | This is most likely the setup you will probably end up using.
24 |
25 | ```
26 | var gulp = require('gulp');
27 | var spriter = require('gulp-css-spriter');
28 |
29 | gulp.task('css', function() {
30 | return gulp.src('./src/css/styles.css')
31 | .pipe(spriter({
32 | // The path and file name of where we will save the sprite sheet
33 | 'spriteSheet': './dist/images/spritesheet.png',
34 | // Because we don't know where you will end up saving the CSS file at this point in the pipe,
35 | // we need a litle help identifying where it will be.
36 | 'pathToSpriteSheetFromCSS': '../images/spritesheet.png'
37 | }))
38 | .pipe(gulp.dest('./dist/css'));
39 | });
40 | ```
41 |
42 | ## Barebones usage
43 |
44 | The slimmest usage possible.
45 |
46 | ```
47 | var gulp = require('gulp');
48 | var spriter = require('gulp-css-spriter');
49 |
50 | gulp.task('css', function() {
51 | return gulp.src('./styles.css')
52 | .pipe(spriter())
53 | .pipe(gulp.dest('./'));
54 | });
55 | ```
56 |
57 | ## Minify CSS output usage
58 |
59 | If you want to use [@meta data](#meta-options) but are using a preprocessor such as Sass or Less, you will need to use a output style that doesn't strip comments. After piping the CSS through `gulp-css-spriter`, you can then run it through a CSS minifier(separate plugin), such as [`gulp-minify-css`](https://www.npmjs.com/package/gulp-minify-css).
60 |
61 | ```
62 | var gulp = require('gulp');
63 | var spriter = require('gulp-css-spriter');
64 | var minifyCSS = require('gulp-minify-css'); // https://www.npmjs.com/package/gulp-minify-css
65 |
66 | gulp.task('css', function() {
67 | return gulp.src('./styles.css')
68 | .pipe(spriter())
69 | .pipe(minifyCSS())
70 | .pipe(gulp.dest('./'));
71 | });
72 | ```
73 |
74 | # Options
75 |
76 | - `options`: object - hash of options
77 | - `includeMode`: string - Determines whether meta data is necessary or not
78 | - Values: 'implicit', 'explicit'
79 | - Default: 'implicit'
80 | - For example, if `explicit`, you must have meta `include` as `true` in order for the image declarations to be included in the spritesheet: `/* @meta {"spritesheet": {"include": true}} */`
81 | - If left default at `implicit`, all images will be included in the spritesheet; except for image declarations with meta `include` as `false`: `/* @meta {"spritesheet": {"include": false}} */`
82 | - `spriteSheet`: string - The path and file name of where we will save the sprite sheet
83 | - Default: 'spritesheet.png'
84 | - `pathToSpriteSheetFromCSS`: string - Because we don't know where you will end up saving the CSS file at this point in the pipe, we need a litle help identifying where it will be. We will use this as the reference to the sprite sheet image in the CSS piped in.
85 | - Default: 'spritesheet.png'
86 | - `spriteSheetBuildCallback`: function - Same as the [spritesmith callback](https://www.npmjs.com/package/spritesmith#-spritesmith-params-callback-)
87 | - Default: null
88 | - Callback has a parameters as so: `function(err, result)`
89 | - `result.image`: Binary string representation of image
90 | - `result.coordinates`: Object mapping filename to {x, y, width, height} of image
91 | - `result.properties`: Object with metadata about spritesheet {width, height}
92 | - `silent`: bool - We ignore any images that are not found but are supposed to be sprited by default
93 | - Default: true
94 | - `shouldVerifyImagesExist`: bool - Check to make sure each image declared in the CSS exists before passing it to the spriter. Although silenced by default(`options.silent`), if an image is not found, an error is thrown.
95 | - Default: true
96 | - `spritesmithOptions`: object - Any option you pass in here, will be passed through to spritesmith. [See spritesmith options documenation](https://www.npmjs.com/package/spritesmith#-spritesmith-params-callback-)
97 | - Default: {}
98 | - `outputIndent`: bool - Used to format output CSS. You should be using a separate beautifier plugin. The reason the output code is reformatted is because it is easier to "parse->stringify" than "replace in place".
99 | - Default: '\t'
100 |
101 |
102 | # What we emit
103 |
104 | `gulp-css-spriter` emits the transformed CSS with updated image references to the sprite sheet as a normal Gulp [vinyl file](https://www.npmjs.com/package/vinyl).
105 |
106 | We also attach the binary sprite sheet image in `chunk.spriteSheet` in case you want to consume it later down the pipe.
107 |
108 |
109 | # Meta info
110 |
111 | `gulp-css-spriter` uses a JSON format to add info onto CSS declarations.
112 |
113 | The example below will exclude this declaration from the spritesheet.
114 | ```
115 | /* @meta {"spritesheet": {"include": false}} */
116 | background: url('../images/dummy-blue.png');
117 | ```
118 |
119 | Please note that if you are compiling from Sass/Less and are not getting correct results, to check the outputted CSS and make sure the comments are still in tact and on the line you expect. For Sass, use multiline `/* */` comment syntax and put them above declarations. This is because gulp-sass/node-sass/libsass removes single line comments and puts mult-line comments that are on the same line as a declaration, below the declaraton.
120 |
121 | The `@meta` comment data can be above or on the same line as the declaration for it to apply.
122 | ```
123 | /* @meta {"spritesheet": {"include": false}} */
124 | background: url('../images/dummy-blue.png'); /* @meta {"spritesheet": {"include": false}} */
125 | ```
126 |
127 | ## Meta options
128 |
129 | - `spritesheet`: object - hash of options that `gulp-css-spriter` will factor in
130 | - `include`: bool - determines whether or not the declaration should be included in the spritesheet. This can be left undefined if the `includeMode` is 'implicit'
131 |
132 |
133 |
134 | # What we emit
135 |
136 | `gulp-css-spriter` transforms your CSS image paths to the spritesheet appropriately then emits the CSS as a normal Gulp [vinyl file](https://www.npmjs.com/package/vinyl).
137 |
138 | - Gulp [vinyl file](https://www.npmjs.com/package/vinyl). We emit the CSS you passed in with transformed image paths
139 |
140 | ## Events
141 |
142 | ### `.on('log', function(message) { })`
143 |
144 | We emit log messages such as when a image defined in the CSS can't be found on disk.
145 |
146 | ### `.on('error', function(err) { })`
147 |
148 | A normal gulp error. There are a variety of errors. See source code for more details.
149 |
150 |
151 |
152 | # Testing
153 |
154 | We have a series of unit tests. We use [Mocha](http://mochajs.org/).
155 |
156 | Install Mocha globally:
157 | ```
158 | npm install -g mocha
159 | ```
160 |
161 | Run tests with: `mocha` or `npm test`
162 |
--------------------------------------------------------------------------------
/lib/spriter/index.js:
--------------------------------------------------------------------------------
1 | // gulp-css-spriter: https://www.npmjs.com/package/gulp-css-spriter
2 | // Sprite Sheet Generation from CSS source files.
3 | //
4 | // By: Eric Eastwood: EricEastwood.com
5 | //
6 | // Meta info looks like: `/* @meta {"spritesheet": {"include": false}} */`
7 |
8 | var fs = require('fs-extra');
9 | var path = require('path');
10 |
11 | var Promise = require('bluebird');
12 | var outputFile = Promise.promisify(fs.outputFile);
13 | var stat = Promise.promisify(fs.stat);
14 |
15 | var through = require('through2');
16 | var extend = require('extend')
17 | var gutil = require('gulp-util');
18 |
19 | var css = require('css');
20 | var spritesmith = require('spritesmith');
21 | var spritesmithBuild = Promise.promisify(spritesmith);
22 |
23 |
24 | var spriterUtil = require('./lib/spriter-util');
25 | var getBackgroundImageDeclarations = require('./lib/get-background-image-declarations');
26 | var transformFileWithSpriteSheetData = require('./lib/transform-file-with-sprite-sheet-data');
27 |
28 |
29 | var gmutil = require('../gmutil'),
30 | store = require('../store')
31 |
32 |
33 | // consts
34 | const PLUGIN_NAME = 'gulp-css-spriter';
35 | const gm_sprite_img_dir = 'gm_sprite_img'
36 | const gm_sprite_subfix = '_sprite_sheet.png'
37 |
38 |
39 | var spriter = function(options) {
40 |
41 | var defaults = {
42 | // ('implicit'|'explicit')
43 | 'includeMode': 'implicit',
44 | // The path and file name of where we will save the sprite sheet
45 | 'spriteSheet': 'spritesheet.png',
46 | // Because we don't know where you will end up saving the CSS file at this point in the pipe,
47 | // we need a litle help identifying where it will be.
48 | 'pathToSpriteSheetFromCSS': 'spritesheet.png',
49 | // Same as the spritesmith callback `function(err, result)`
50 | // result.image: Binary string representation of image
51 | // result.coordinates: Object mapping filename to {x, y, width, height} of image
52 | // result.properties: Object with metadata about spritesheet {width, height}
53 | 'spriteSheetBuildCallback': null,
54 | // If true, we ignore any images that are not found on disk
55 | // Note: this plugin will still emit an error if you do not verify that the images exist
56 | 'silent': true,
57 | // Check to make sure each image declared in the CSS exists before passing it to the spriter.
58 | // Although silenced by default(`options.silent`), if an image is not found, an error is thrown.
59 | 'shouldVerifyImagesExist': true,
60 | // Any option you pass in here, will be passed through to spritesmith
61 | // https://www.npmjs.com/package/spritesmith#-spritesmith-params-callback-
62 | 'spritesmithOptions': {},
63 | // Used to format output CSS
64 | // You should be using a separate beautifier plugin
65 | 'outputIndent': '\t'
66 | };
67 |
68 | var settings = extend({}, defaults, options);
69 |
70 | // Keep track of all the chunks that come in so that we can re-emit in the flush
71 | var chunkList = [];
72 | // We use an object for imageMap so we don't get any duplicates
73 | var imageMap = {};
74 | // Check to make sure all of the images exist(`options.shouldVerifyImagesExist`) before trying to sprite them
75 | var imagePromiseArray = [];
76 |
77 | // var currentChunkFile;
78 |
79 | var stream = through.obj(function(chunk, enc, cb) {
80 | // http://nodejs.org/docs/latest/api/stream.html#stream_transform_transform_chunk_encoding_callback
81 | //console.log('transform');
82 |
83 | // Each `chunk` is a vinyl file: https://www.npmjs.com/package/vinyl
84 | // chunk.cwd
85 | // chunk.base
86 | // chunk.path
87 | // chunk.contents
88 | var self = this;
89 |
90 | if (chunk.isStream()) {
91 | self.emit('error', new gutil.PluginError(PLUGIN_NAME, 'Cannot operate on stream'));
92 | }
93 | else if (chunk.isBuffer()) {
94 | var contents = String(chunk.contents);
95 |
96 | var styles;
97 | try {
98 | styles = css.parse(contents, {
99 | 'silent': settings.silent,
100 | 'source': chunk.path
101 | });
102 | }
103 | catch(err) {
104 | err.message = 'Something went wrong when parsing the CSS: ' + err.message;
105 | self.emit('log', err.message);
106 |
107 | // Emit an error if necessary
108 | if(!settings.silent) {
109 | self.emit('error', err);
110 | }
111 | }
112 |
113 |
114 | var fileDir = path.relative(settings['dist_root'], chunk.base)
115 |
116 |
117 | var fileName = path.basename(chunk.relative)
118 |
119 | // add for gulpman
120 | chunk.base = settings['cwd']
121 | // currentChunkFile = chunk
122 |
123 | var relDistPath = path.join(
124 | gm_sprite_img_dir,
125 | fileName+gm_sprite_subfix
126 | )
127 |
128 | var distSpritePath = path.join(settings['dist_root'], fileDir, relDistPath)
129 |
130 | settings['spriteSheet'] = distSpritePath
131 |
132 | settings['pathToSpriteSheetFromCSS'] = relDistPath
133 |
134 | // Gather a list of all of the image declarations
135 | var chunkBackgroundImageDeclarations = getBackgroundImageDeclarations(styles, settings.includeMode);
136 |
137 |
138 | // Go through each declaration and gather the image paths
139 | // We find the new images that we found in this chunk verify they exist below
140 | // We use an object so we don't get any duplicates
141 | var newImagesfFromChunkMap = {};
142 | var backgroundURLMatchAllRegex = new RegExp(spriterUtil.backgroundURLRegex.source, "gi");
143 | chunkBackgroundImageDeclarations.forEach(function(declaration) {
144 |
145 | // Match each background image in the declaration (there could be multiple background images per value)
146 | spriterUtil.matchBackgroundImages(declaration.value, function(imagePath) {
147 | imagePath = path.join(path.dirname(chunk.path), imagePath);
148 |
149 | // If not already in the overall list of images collected
150 | // Add to the queue/list of images to be verified
151 | if(!imageMap[imagePath]) {
152 | newImagesfFromChunkMap[imagePath] = true;
153 | }
154 |
155 | // Add it to the main overall list to keep track
156 | imageMap[imagePath] = true;
157 | });
158 | });
159 |
160 | // Filter out any images that do not exist depending on `settings.shouldVerifyImagesExist`
161 | Object.keys(newImagesfFromChunkMap).forEach(function(imagePath) {
162 | var filePromise;
163 | if(settings.shouldVerifyImagesExist) {
164 | filePromise = stat(imagePath).then(function() {
165 | return {
166 | doesExist: true,
167 | path: imagePath
168 | };
169 | }, function() {
170 | return {
171 | doesExist: false,
172 | path: imagePath
173 | };
174 | });
175 | }
176 | else {
177 | // If they don't want us to verify it exists, just pass it on with a undefined `doesExist` property
178 | filePromise = Promise.resolve({
179 | doesExist: undefined,
180 | path: imagePath
181 | });
182 | }
183 |
184 | imagePromiseArray.push(filePromise);
185 | });
186 |
187 | // Keep track of each chunk and what declarations go with it
188 | // Because the positions/line numbers pertain to that chunk only
189 | chunkList.push(chunk);
190 |
191 | }
192 |
193 |
194 | // "call callback when the transform operation is complete."
195 | cb();
196 |
197 | }, function(cb) {
198 | // http://nodejs.org/docs/latest/api/stream.html#stream_transform_flush_callback
199 | //console.log('flush');
200 | var self = this;
201 |
202 | // @debug
203 |
204 | // Create an verified image list when all of the async checks have finished
205 | var imagesVerifiedPromise = Promise.settle(imagePromiseArray).then(function(results) {
206 | var imageList = [];
207 | Array.prototype.forEach.call(results, function(result) {
208 | imageInfo = result.value();
209 |
210 | if(imageInfo.doesExist === true || imageInfo.doesExist === undefined) {
211 | imageList.push(imageInfo.path);
212 | }
213 | else {
214 |
215 | // Tell them that we could not find the image
216 | var logMessage = 'Image could not be found: ' + imageInfo.path;
217 | self.emit('log', logMessage);
218 |
219 | // Emit an error if necessary
220 | if(!settings.silent) {
221 | self.emit('error', {
222 | 'name': 'NotFound',
223 | 'message': logMessage,
224 | 'plugin': PLUGIN_NAME
225 | });
226 | }
227 | }
228 | });
229 |
230 | return imageList;
231 | });
232 |
233 |
234 | // Start spriting once we know the true list of images that exist
235 | imagesVerifiedPromise.then(function(imageList) {
236 |
237 | // fix the invalid png files when no-sprite-img
238 | // @debug ..可能有问题。。
239 | if(!imageList.length) {
240 | chunkList.forEach(chunk=>{
241 | self.push(chunk)
242 | })
243 |
244 | return cb();
245 | }
246 |
247 |
248 |
249 | // Generate the spritesheet
250 | var spritesmithOptions = extend({}, settings.spritesmithOptions, { src: imageList });
251 |
252 | var spriteSmithBuildPromise = spritesmithBuild(spritesmithOptions);
253 |
254 | spriteSmithBuildPromise.then(function(result) {
255 |
256 | var whenImageDealtWithPromise = new Promise(function(resolve, reject) {
257 | // Save out the spritesheet image
258 | if(settings.spriteSheet) {
259 | var spriteSheetSavedPromise = outputFile(settings.spriteSheet, result.image, 'binary').then(function() {
260 |
261 | //console.log("The file was saved!");
262 |
263 | // Push all of the chunks back on the pipe
264 | chunkList.forEach(function(chunk) {
265 |
266 | var transformedChunk = chunk.clone();
267 |
268 | // gmutil.alert('IMG: '+imageList)
269 | // save into relevancy store
270 | store.save(imageList, chunk.path, 'sprite')
271 |
272 |
273 | try {
274 | transformedChunk = transformFileWithSpriteSheetData(transformedChunk, result.coordinates, settings.pathToSpriteSheetFromCSS, settings.includeMode, settings.silent, settings.outputIndent);
275 | }
276 | catch(err) {
277 | err.message = 'Something went wrong when transforming chunks: ' + err.message;
278 | self.emit('log', err.message);
279 |
280 | // Emit an error if necessary
281 | if(!settings.silent) {
282 | self.emit('error', err);
283 | }
284 |
285 | reject(err);
286 | }
287 |
288 |
289 | // Attach the spritesheet in case someone wants to use it down the pipe
290 | transformedChunk.spritesheet = result.image;
291 |
292 | // Push it back on the main pipe
293 | self.push(transformedChunk);
294 | });
295 |
296 |
297 | }, function() {
298 | settings.spriteSheetBuildCallback(err, null);
299 | reject(err);
300 | });
301 |
302 |
303 | spriteSheetSavedPromise.finally(function() {
304 |
305 | // Call a callback from the settings the user can hook onto
306 | if(settings.spriteSheetBuildCallback) {
307 | settings.spriteSheetBuildCallback(null, result);
308 | }
309 |
310 | resolve();
311 | });
312 | }
313 | else {
314 | resolve();
315 | }
316 | });
317 |
318 | whenImageDealtWithPromise.finally(function() {
319 | // "call callback when the flush operation is complete."
320 | cb();
321 | });
322 |
323 |
324 | }, function(err) {
325 | if(err) {
326 | err.message = 'Error creating sprite sheet image:\n' + err.message;
327 | self.emit('error', new gutil.PluginError(PLUGIN_NAME, err));
328 | }
329 | });
330 |
331 |
332 | });
333 |
334 |
335 |
336 |
337 |
338 | });
339 |
340 | // returning the file stream
341 | return stream;
342 | };
343 |
344 |
345 | module.exports = spriter;
--------------------------------------------------------------------------------
/lib/spriter/lib/get-background-image-declarations.js:
--------------------------------------------------------------------------------
1 |
2 | var mapOverStylesAndTransformBackgroundImageDeclarations = require('./map-over-styles-and-transform-background-image-declarations');
3 |
4 |
5 | // Pass in a styles object from `css.parse`
6 | // See main module for `includeMode` values
7 | function getBackgroundImageDeclarations(styles, includeMode) {
8 | includeMode = includeMode || 'implicit';
9 |
10 | // First get all of the background image declarations
11 | var backgroundImageDeclarations = [];
12 | mapOverStylesAndTransformBackgroundImageDeclarations(styles, includeMode, function(declaration) {
13 | backgroundImageDeclarations.push(declaration);
14 | });
15 |
16 | return backgroundImageDeclarations;
17 | }
18 |
19 |
20 |
21 |
22 |
23 | module.exports = getBackgroundImageDeclarations;
--------------------------------------------------------------------------------
/lib/spriter/lib/get-meta-info-for-declaration.js:
--------------------------------------------------------------------------------
1 | var extend = require('extend');
2 |
3 |
4 | function getMetaInfoForDeclaration(declarations, declarationIndex) {
5 | var resultantMetaData = {};
6 |
7 | if(declarationIndex > 0 && declarationIndex < declarations.length) {
8 | var mainDeclaration = declarations[declarationIndex];
9 | if(mainDeclaration) {
10 |
11 | // Meta data can exist before or on the same line as the declaration.
12 | // Both Meta blocks are valid for the background property
13 | // ex.
14 | // /* @meta {"spritesheet": {"include": false}} */
15 | // background: url('../images/aenean-purple.png'); /* @meta {"sprite": {"skip": true}} */
16 | var beforeDeclaration = declarations[declarationIndex-1];
17 | var afterDeclaration = declarations[declarationIndex+1];
18 |
19 |
20 | if(beforeDeclaration) {
21 | // The before declaration should be valid no matter what (even if multiple lines above)
22 | // The parse function does all the nice checking for us
23 | extend(resultantMetaData, parseCommentDecarationForMeta(beforeDeclaration));
24 | }
25 |
26 | if(afterDeclaration) {
27 | //console.log(mainDeclaration);
28 | //console.log(afterDeclaration);
29 | //console.log(afterDeclaration.position.start.line, mainDeclaration.position.start.line);
30 | // Make sure that the comment starts on the same line as the main declaration
31 | if((((afterDeclaration || {}).position || {}).start || {}).line === (((mainDeclaration || {}).position || {}).start || {}).line) {
32 | extend(resultantMetaData, parseCommentDecarationForMeta(afterDeclaration));
33 | }
34 | }
35 | }
36 | }
37 |
38 |
39 | return resultantMetaData;
40 | }
41 |
42 | function parseCommentDecarationForMeta(declaration) {
43 | if(declaration.type === "comment") {
44 | //console.log(declaration);
45 |
46 | var metaMatches = declaration.comment.match(/@meta\s*({.*?}(?!}))/);
47 |
48 | if(metaMatches) {
49 | var parsedMeta = {};
50 | try {
51 | parsedMeta = JSON.parse(metaMatches[1]);
52 | }
53 | catch(e) {
54 | //console.warn('Meta info was found but failed was not valid JSON');
55 | }
56 |
57 | return parsedMeta;
58 | }
59 | }
60 | }
61 |
62 |
63 |
64 | module.exports = getMetaInfoForDeclaration;
--------------------------------------------------------------------------------
/lib/spriter/lib/map-over-styles-and-transform-background-image-declarations.js:
--------------------------------------------------------------------------------
1 | var extend = require('extend');
2 |
3 | var spriterUtil = require('./spriter-util');
4 | var getMetaInfoForDeclaration = require('./get-meta-info-for-declaration');
5 | var transformMap = require('./transform-map');
6 |
7 |
8 |
9 | function mapOverStylesAndTransformBackgroundImageDeclarations(styles, includeMode, cb) {
10 | // Map over all
11 | return mapOverStylesAndTransformAllBackgroundImageDeclarations(styles, function(declaration) {
12 | // Then filter down to only the proper ones (according to their meta data)
13 | if(shouldIncludeFactoringInMetaData(declaration.meta, includeMode)) {
14 | return cb.apply(null, arguments);
15 | }
16 | });
17 | }
18 |
19 | // Boolean function to determine if the meta data permits using this declaration
20 | function shouldIncludeFactoringInMetaData(meta, includeMode) {
21 | var metaIncludeValue = (meta && meta.spritesheet && meta.spritesheet.include);
22 | var shouldIncludeBecauseImplicit = includeMode === 'implicit' && (metaIncludeValue === undefined || metaIncludeValue);
23 | var shouldIncludeBecauseExplicit = includeMode === 'explicit' && metaIncludeValue;
24 | var shouldInclude = shouldIncludeBecauseImplicit || shouldIncludeBecauseExplicit;
25 |
26 | // Only return declartions that shouldn't be skipped
27 | return shouldInclude;
28 | }
29 |
30 |
31 |
32 | // Pass in a styles object from `css.parse`
33 | // Loop over all of the styles and transform/modify the background image declarations
34 | // Returns a new styles object that has the transformed declarations
35 | function mapOverStylesAndTransformAllBackgroundImageDeclarations(styles, cb) {
36 | // Clone the declartion to keep it immutable
37 | var transformedStyles = extend(true, {}, styles);
38 |
39 | // Go over each background `url()` declarations
40 | transformedStyles.stylesheet.rules.map(function(rule, ruleIndex) {
41 | if(rule.type === 'rule') {
42 |
43 | rule.declarations = transformMap(rule.declarations, function(declaration, declarationIndex, declarations) {
44 | // Clone the declartion to keep it immutable
45 | var transformedDeclaration = extend(true, {}, declaration);
46 | transformedDeclaration = attachInfoToDeclaration(declarations, declarationIndex);
47 |
48 | /*// background-image always has a url
49 | if(transformedDeclaration.property === 'background-image') {
50 | return cb(transformedDeclaration, declarationIndex, declarations);
51 | }
52 | // Background is a shorthand property so make sure `url()` is in there
53 | else if(transformedDeclaration.property === 'background') {
54 | var hasImageValue = spriterUtil.backgroundURLRegex.test(transformedDeclaration.value);
55 |
56 | if(hasImageValue) {
57 | return cb(transformedDeclaration, declarationIndex, declarations);
58 | }
59 | }*/
60 |
61 |
62 | // background-image always has a url且
63 | // 判断url是否有?__spriter后缀
64 | var gm_sprite_reg = /\?_gm_sprite/i,
65 | gm_sprite_str = '?_gm_sprite';
66 |
67 | if (transformedDeclaration.property === 'background-image' && gm_sprite_reg.test(transformedDeclaration.value)) {
68 |
69 | transformedDeclaration.value = transformedDeclaration.value.replace(gm_sprite_str, '');
70 |
71 | return cb(transformedDeclaration, declarationIndex, declarations);
72 | }
73 | //Background is a short hand property so make sure `url()` is in there
74 | // 且判断url是否有?__spriter后缀
75 | else if(transformedDeclaration.property === 'background' && gm_sprite_reg.test(transformedDeclaration.value)) {
76 |
77 | transformedDeclaration.value = transformedDeclaration.value.replace(gm_sprite_str, '');
78 |
79 | var hasImageValue = spriterUtil.backgroundURLRegex.test(transformedDeclaration.value);
80 |
81 | if (hasImageValue) {
82 | return cb(transformedDeclaration, declarationIndex, declarations);
83 | }
84 | }
85 |
86 | // Wrap in an object so that the declaration doesn't get interpreted
87 | return {
88 | 'value': transformedDeclaration
89 | };
90 | });
91 |
92 | }
93 |
94 | return rule;
95 | });
96 |
97 | return transformedStyles;
98 | }
99 |
100 | // We do NOT directly modify the declaration in the rule
101 | // We pass the whole rule and current index so we can properly look at the metaData around each declaration
102 | // and add it to the declaration
103 | function attachInfoToDeclaration(declarations, declarationIndex)
104 | {
105 | if(declarations.length > declarationIndex) {
106 | // Clone the declartion to keep it immutable
107 | var declaration = extend(true, {}, declarations[declarationIndex]);
108 |
109 | var declarationMetaInfo = getMetaInfoForDeclaration(declarations, declarationIndex);
110 |
111 | // Add the meta into to the declaration
112 | declaration.meta = extend(true, {}, declaration.meta, declarationMetaInfo);
113 |
114 | return declaration;
115 | }
116 |
117 | return null;
118 | }
119 |
120 |
121 |
122 | module.exports = mapOverStylesAndTransformBackgroundImageDeclarations;
123 |
--------------------------------------------------------------------------------
/lib/spriter/lib/spriter-util.js:
--------------------------------------------------------------------------------
1 |
2 | var backgroundURLRegex = (/(.*?url\(["\']?)(.*?\.(?:png|jpg|gif))(["\']?\).*?;?)/i);
3 |
4 |
5 | function matchBackgroundImages(declarationValue, cb) {
6 | var backgroundURLMatchAllRegex = new RegExp(backgroundURLRegex.source, "gi");
7 |
8 | return declarationValue.replace(backgroundURLMatchAllRegex, function(match, p1, p2, p3, offset, string) {
9 | var imagePath = p2;
10 |
11 | return p1 + cb(imagePath) + p3;
12 | });
13 | }
14 |
15 |
16 |
17 | module.exports = {
18 | 'backgroundURLRegex': backgroundURLRegex,
19 | 'matchBackgroundImages':matchBackgroundImages
20 | };
21 |
--------------------------------------------------------------------------------
/lib/spriter/lib/transform-file-with-sprite-sheet-data.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var extend = require('extend');
3 |
4 | var css = require('css');
5 |
6 | var spriterUtil = require('./spriter-util');
7 | var mapOverStylesAndTransformBackgroundImageDeclarations = require('./map-over-styles-and-transform-background-image-declarations');
8 |
9 | var backgroundURLMatchAllRegex = new RegExp(spriterUtil.backgroundURLRegex.source, "gi");
10 |
11 |
12 | // Replace all the paths that need replacing
13 | function transformFileWithSpriteSheetData(vinylFile, coordinateMap, pathToSpriteSheetFromCSS, /*optional*/includeMode, /*optional*/isSilent, /*optional*/outputIndent) {
14 | includeMode = includeMode ? includeMode : 'implicit';
15 | isSilent = (isSilent !== undefined) ? isSilent : false;
16 | outputIndent = outputIndent ? outputIndent : '\t';
17 |
18 | // Clone the declartion to keep it immutable
19 | var resultantFile = vinylFile.clone();
20 |
21 | if(resultantFile) {
22 |
23 | var styles = css.parse(String(resultantFile.contents), {
24 | 'silent': isSilent,
25 | 'source': vinylFile.path
26 | });
27 |
28 | styles = mapOverStylesAndTransformBackgroundImageDeclarations(styles, includeMode, function(declaration) {
29 |
30 | var coordList = [];
31 | declaration.value = spriterUtil.matchBackgroundImages(declaration.value, function(imagePath) {
32 |
33 | var coords = coordinateMap[path.join(path.dirname(resultantFile.path), imagePath)];
34 | //console.log('coords', coords);
35 |
36 | // Make sure there are coords for this image in the sprite sheet, otherwise we won't include it
37 | if(coords) {
38 | coordList.push("-" + coords.x + "px -" + coords.y + "px");
39 |
40 | // If there are coords in the spritemap for this image, lets use the spritemap
41 | return pathToSpriteSheetFromCSS;
42 | }
43 |
44 | return imagePath;
45 | });
46 |
47 | return {
48 | 'value': declaration,
49 | /* */
50 | // Add the appropriate background position according to the spritemap
51 | 'insertElements': (function() {
52 | if(coordList.length > 0) {
53 | return {
54 | type: 'declaration',
55 | property: 'background-position',
56 | value: coordList.join(', ')
57 | };
58 | }
59 | })()
60 | /* */
61 | };
62 | });
63 |
64 | //console.log(styles.stylesheet.rules[0].declarations);
65 |
66 | // Put it back into string form
67 | var resultantContents = css.stringify(styles, {
68 | indent: outputIndent
69 | });
70 | //console.log(resultantContents);
71 | resultantFile.contents = new Buffer(resultantContents);
72 | }
73 |
74 | return resultantFile;
75 | }
76 |
77 | module.exports = transformFileWithSpriteSheetData;
--------------------------------------------------------------------------------
/lib/spriter/lib/transform-map.js:
--------------------------------------------------------------------------------
1 | var extend = require('extend');
2 |
3 | function transformMap(arr, cb) {
4 | var resultantArray = extend(true, [], arr);
5 |
6 | for(var i = 0; i < resultantArray.length; i++) {
7 | var el = resultantArray[i];
8 |
9 | var result = cb(el, i, resultantArray);
10 |
11 | var defaults = {
12 | value: el,
13 | insertElements: [],
14 | appendElements: []
15 | };
16 |
17 | // You can pass in a bare value or as the `value` property of an object
18 | result = typeof result === 'object' ? result : { value: result };
19 | // Massage the result into shape
20 | result = extend({}, defaults, result);
21 |
22 |
23 | // Transform the current value
24 | resultantArray[i] = result.value ? result.value : result;
25 |
26 | // Insert after the current element
27 | var insertElements = [].concat(result.insertElements);
28 | if(insertElements.length > 0) {
29 | Array.prototype.splice.apply(resultantArray, [i+1, 0].concat(insertElements));
30 | }
31 |
32 | // Add the elements onto the end
33 | var appendElements = [].concat(result.appendElements);
34 | if(appendElements.length > 0) {
35 | resultantArray = resultantArray.concat(appendElements);
36 | }
37 | }
38 |
39 | return resultantArray;
40 | }
41 |
42 |
43 | module.exports = transformMap;
--------------------------------------------------------------------------------
/lib/spriter/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gulp-css-spriter",
3 | "version": "0.3.3",
4 | "description": "Sprite Sheet Generation from CSS source files. The best and different approach to sprite sheets.",
5 | "main": "index.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/MadLittleMods/gulp-css-spriter.git"
9 | },
10 | "keywords": [
11 | "css",
12 | "gulp",
13 | "gulpplugin",
14 | "gulpfriendly",
15 | "sprite",
16 | "spritesheet",
17 | "sass",
18 | "less"
19 | ],
20 | "author": {
21 | "name": "Eric Eastwood",
22 | "email": "contact@ericeastwood.com",
23 | "url": "http://ericeastwood.com/"
24 | },
25 | "license": "MIT",
26 | "bugs": {
27 | "url": "https://github.com/MadLittleMods/gulp-css-spriter/issues"
28 | },
29 | "scripts": {
30 | "test": "mocha"
31 | },
32 | "dependencies": {
33 | "bluebird": "^2.9.3",
34 | "css": "^2.1.0",
35 | "extend": "^2.0.0",
36 | "fs-extra": "^0.14.0",
37 | "gulp-util": "^3.0.1",
38 | "spritesmith": "^1.0.3",
39 | "through2": "^0.6.2"
40 | },
41 | "devDependencies": {
42 | "chai": "^1.10.0",
43 | "chai-as-promised": "^4.1.1",
44 | "gulp": "^3.8.10",
45 | "mocha": "^2.1.0"
46 | },
47 | "gitHead": "2a4f030a00e0135ff8270acf1f34bb0c2537d102",
48 | "homepage": "https://github.com/MadLittleMods/gulp-css-spriter",
49 | "_id": "gulp-css-spriter@0.3.3",
50 | "_shasum": "4f69315ac01d92a0dc9996c02054cbd4826aeac1",
51 | "_from": "gulp-css-spriter@latest",
52 | "_npmVersion": "1.4.23",
53 | "_npmUser": {
54 | "name": "mlm",
55 | "email": "contact@ericeastwood.com"
56 | },
57 | "maintainers": [
58 | {
59 | "name": "mlm",
60 | "email": "contact@ericeastwood.com"
61 | }
62 | ],
63 | "dist": {
64 | "shasum": "4f69315ac01d92a0dc9996c02054cbd4826aeac1",
65 | "tarball": "http://registry.npmjs.org/gulp-css-spriter/-/gulp-css-spriter-0.3.3.tgz"
66 | },
67 | "directories": {},
68 | "_resolved": "https://registry.npmjs.org/gulp-css-spriter/-/gulp-css-spriter-0.3.3.tgz"
69 | }
70 |
--------------------------------------------------------------------------------
/lib/store.js:
--------------------------------------------------------------------------------
1 | /**
2 | * For create JSON file
3 | */
4 |
5 | var fs = require('fs'),
6 | path = require('path'),
7 | j = path.join
8 |
9 |
10 | var gmutil = require('./gmutil')
11 |
12 | var _cwd = process.cwd()
13 |
14 | // var jsonFileName = 'gm-relevancy.json',
15 | // jsonFilePath
16 |
17 | var dataBase = {
18 | 'name':'gm-relevancy',
19 | 'time': (new Date()).getTime(),
20 | 'source': {},
21 | 'sprite': {}
22 | // 'requiredCSS': {},
23 | }
24 |
25 |
26 | function initStore(db) {
27 |
28 | // check global namespace
29 | if(!global['gm_ns']) {
30 | global['gm_ns'] = {}
31 | }
32 |
33 | // update dataBase from global is existed
34 | if(global['gm_ns']['data_base']){
35 | dataBase = db || global['gm_ns']['data_base']
36 |
37 | }else{
38 |
39 | global['gm_ns']['data_base'] = db || dataBase
40 |
41 | }
42 |
43 | }
44 |
45 |
46 | function _write(fpath){
47 | fs.writeFileSync(fpath, JSON.stringify(dataBase, null, 4))
48 | }
49 |
50 | function _push (sourceFile, refFile, dbType) {
51 | // 如果已经存储，那么不再重复push
52 | if(_isInList(sourceFile, refFile, dbType)) return true
53 |
54 | !dataBase[dbType] && (dataBase[dbType] = {})
55 | if(dataBase[dbType][sourceFile]){
56 | dataBase[dbType][sourceFile].push(refFile)
57 | }else {
58 | dataBase[dbType][sourceFile] = [refFile]
59 | }
60 | }
61 |
62 | function _check(sourceAbsPath, handler, dbType, handlerType, evtObj){
63 |
64 | // gmutil.alert('Store: \n')
65 | // console.log(global['gm_ns']['data_base'])
66 |
67 | var dbType = dbType || 'source'
68 |
69 | if(sourceAbsPath in dataBase[dbType]){
70 | // gmutil.alert('HIT Store: \n')
71 | // console.log(dataBase)
72 |
73 | if(handler){
74 | dataBase[dbType][sourceAbsPath].forEach(item=>{
75 |
76 | gmutil.warn('*Relevancy Process: '+item)
77 | // the handler default as file type
78 | var hfn = handlerType || path.extname(item).slice(1)
79 |
80 | handler[hfn] && handler[hfn](item, evtObj)
81 |
82 | })
83 | }
84 |
85 | return true
86 |
87 | }else {
88 |
89 | return false
90 | }
91 |
92 |
93 | }
94 |
95 |
96 | function _isInList(sourceFile, refFile, dbType){
97 | var r
98 | return (dataBase[dbType]) && (r = dataBase[dbType][sourceFile]) && r.indexOf(refFile) !== -1
99 | }
100 |
101 |
102 |
103 | function _save (sourceFile, refFile, dbType) {
104 | var dbType = dbType || 'source'
105 |
106 | // gmutil.alert(sourceFile+' :\n'+refFile)
107 | if(typeof sourceFile == 'string'){
108 | // just save in memory now, not write in file
109 | return _push(sourceFile, refFile, dbType)
110 | }else if(gmutil.isArray(sourceFile)){
111 | sourceFile.forEach((e,i)=>{
112 | _push(e, refFile, dbType)
113 | })
114 |
115 | return true;
116 | }else {
117 | gmutil.error("*Relevancy Store Error:\n")
118 | throw Error('Unknown Type: '+sourceFile)
119 | }
120 |
121 | }
122 |
123 |
124 | function getStore(){
125 | return dataBase
126 | }
127 |
128 |
129 | // init store
130 | initStore()
131 |
132 |
133 | // api
134 | exports.save = _save
135 | exports.check = _check
136 |
137 | exports.get = getStore
138 |
139 |
140 |
--------------------------------------------------------------------------------
/meta/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xunuoi/gulpman/d12eb0fa1c71a955f98d2c4bb7090540a518dd7a/meta/favicon.ico
--------------------------------------------------------------------------------
/meta/home/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xunuoi/gulpman/d12eb0fa1c71a955f98d2c4bb7090540a518dd7a/meta/home/img/logo.png
--------------------------------------------------------------------------------
/meta/home/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | HOME PAGE
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
21 |
22 |
23 |
More Information
24 |
33 |
34 |
35 |
39 |
How to use ReactJS in Gulpman ?
40 |
41 |
42 | - Put ReactJS file in html by script tag.
43 | - such as:
44 |
45 | <script src="react.min.js" type="text/javascript"></script>
46 |
47 | <script src="react-dom.min.js" type="text/javascript"></script>
48 |
49 |
50 | - Or Import React in Your ES6/JSX:
51 |
52 | import 'react'
53 |
54 |
55 | - Then you can directly use the React and ReactDOM Object in your ES6/JSX files.
56 |
57 |
58 |
Example:
59 |
62 |
The Content Are Created By {this.props.name}
10 | }
11 | })
12 |
13 |
14 |
15 | function renderHello (argument) {
16 | ReactDOM.render(
17 | ,
18 | document.getElementById('demo1')
19 | )
20 | }
21 |
22 |
23 |
24 | setTimeout(()=>{
25 |
26 | renderHello()
27 |
28 | }, 1200)
29 |
30 |
31 | export {
32 | renderHello
33 | }
--------------------------------------------------------------------------------
/meta/home/main.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * FOR HOME
3 | */
4 |
5 |
6 | .logo {
7 | background: url(./img/logo.png) no-repeat;
8 | }
9 |
10 | // for sprite demo
11 | .demo-sprite {
12 | background: url(./img/logo.png?_gm_sprite) no-repeat;
13 | width: 50px;
14 | height: 50px;
15 | }
16 |
17 |
18 | .demo-inline {
19 | // if you want use inline-base64,
20 | // add `?_gm_inline` after img url
21 | }
22 |
23 | .header {
24 | width: 600px;
25 | margin: 0 auto;
26 | text-align: center;
27 |
28 | p {
29 | text-align: center;
30 | }
31 | }
32 |
33 | .more-info {
34 | margin-top: 20px;
35 | border: 1px dashed #8EB139;
36 | padding: 20px;
37 | background-color: #FFAA89;
38 | border-radius: 8px;
39 |
40 | h3 {
41 | color: white;
42 | }
43 | a {
44 | text-decoration: none;
45 | }
46 | ul li {
47 | line-height: 30px;
48 | }
49 | }
50 |
51 | .demo-container {
52 | margin-top: 30px;
53 | border: 1px dashed #8EB139;
54 | padding: 20px;
55 | background-color: #5B9EB2;
56 | border-radius: 8px;
57 |
58 | ol li p {
59 | color: #14581F;
60 | text-shadow: 2px 2px 2px #9A9A9A;
61 | }
62 |
63 | h3 {
64 | color: white;
65 | }
66 |
67 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gulpman",
3 | "version": "2.0.0",
4 | "description": "Create Modular Front-End Build System. Based on gulp, very easy and light",
5 | "engines": {
6 | "node": ">=4.0.0"
7 | },
8 | "main": "index.js",
9 | "scripts": {
10 | "test": "make test"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "git+https://github.com/xunuoi/gulpman.git"
15 | },
16 | "keywords": [
17 | "gulp",
18 | "modular",
19 | "gulpman",
20 | "scss",
21 | "es6",
22 | "react",
23 | "jsx",
24 | "build",
25 | "easy",
26 | "fis",
27 | "component"
28 | ],
29 | "author": "Lucas X",
30 | "license": "MIT",
31 | "bugs": {
32 | "url": "https://github.com/xunuoi/gulpman/issues"
33 | },
34 | "homepage": "https://github.com/xunuoi/gulpman#readme",
35 | "devDependencies": {
36 | "gulp": "^3.9.0"
37 | },
38 | "dependencies": {
39 | "gulp-babel": "^6.1.2",
40 | "browserify": "^13.1.0",
41 | "stringify": "^5.1.0",
42 | "colors": "^1.1.2",
43 | "event-stream": "^3.3.2",
44 | "globby": "^6.0.0",
45 | "gulp-cssnano": "^2.1.2",
46 | "gulp-imagemin": "^3.0.2",
47 | "gulp-load-plugins": "^1.2.4",
48 | "gulp-concat": "^2.6.0",
49 | "gulp-rename": "^1.2.2",
50 | "gulp-rev-all": "^0.9.7",
51 | "gulp-sequence": "^0.4.4",
52 | "gulp-uglify": "^2.0.0",
53 | "gulp-sourcemaps": "^1.6.0",
54 | "imagemin-pngquant": "^5.0.0",
55 | "readable-stream": "^2.0.5",
56 | "object-assign": "^4.0.1",
57 | "shelljs": "^0.5.3",
58 | "through2": "^2.0.1",
59 | "vinyl-buffer": "^1.0.0",
60 | "vinyl-source-stream": "^1.1.0",
61 | "gulp-util": "^3.0.7",
62 | "jsmin2": "^1.2.1",
63 | "uglifycss": "0.0.20",
64 | "bluebird": "^3.4.1",
65 | "css": "^2.2.1",
66 | "extend": "^3.0.0",
67 | "fs-extra": "^0.30.0",
68 | "spritesmith": "^2.0.1"
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/presetlib/react-0.14.6/build/react-dom-server.js:
--------------------------------------------------------------------------------
1 | /**
2 | * ReactDOMServer v0.14.6
3 | *
4 | * Copyright 2013-2015, Facebook, Inc.
5 | * All rights reserved.
6 | *
7 | * This source code is licensed under the BSD-style license found in the
8 | * LICENSE file in the root directory of this source tree. An additional grant
9 | * of patent rights can be found in the PATENTS file in the same directory.
10 | *
11 | */
12 | // Based off https://github.com/ForbesLindesay/umd/blob/master/template.js
13 | ;(function(f) {
14 | // CommonJS
15 | if (typeof exports === "object" && typeof module !== "undefined") {
16 | module.exports = f(require('react'));
17 |
18 | // RequireJS
19 | } else if (typeof define === "function" && define.amd) {
20 | define(['react'], f);
21 |
22 | // 
286 | 
8 |
9 |
10 | # gulpman
11 |
12 | [浏览简体中文文档](https://github.com/xunuoi/gulpman/blob/master/README_zh-CN.md)
13 |
14 | - Create Modular Front-End Build System, organize the source by module, using relative path, `html/js/css/img/fonts/tpl` are in one same folder, like Baidu `FIS`. Good concept for FE source management / development.
15 | - Concept Introduction: [前端工程之模块化](http://fex.baidu.com/blog/2014/03/fis-module/)
16 | - Component Oriented Solution, based on `gulp`. More simple, flexible, expandable and stable. Everyone know gulp can do secondary development.
17 | - Support `base64` image in `html/CSS`
18 | - Support `JS/CSS` inlnied in html
19 | - Support `require('main.css')`, require css file in js
20 | - Intergrated with `spritesmith`, support auto sprite img
21 | - Intergrated with `icon-font`, support SVG 2 Iconfont.
22 | - Intergrated with `usemin`，support complex combo/package.
23 | - Supoort FE Tpl embed function， the `.tpl` file will packaged into js file，support async js loading.
24 | - Intergrated with `SCSS|ES6|ReactJS|Vuejs|Babel|Browserify|cssnano|uglify|imagmein` and other plugins，One-Stop Solution Service， very Simple and Strong
25 | - High scalability, compatiable with almost `gulp` plugins, you can use them in `gulpman`. For example, you can put `browser-sync` in your gulpman build system
26 | - Intergrated with `karma` framework，support `babel/es6` unit test and coverage result.
27 |
28 |
29 | ## Introduction
30 | - Support Mac、Linux
31 | - No full test under Windows. You can install `gulp`、`gulp-sass` manually
32 | - Required Node >= 4.0.0
33 |
34 |
35 | ## Install
36 |
37 | - `npm install gulpman --save-dev`
38 | - Run `gulp gm:install` to finish the setup
39 | - *If in China, please use `cnpm` to install it: `cnpm install gulpman --save-dev`
40 |
41 |
42 | #### Note
43 | * If `gulp-sass` install failed, please run `cnpm install gulp-sass gulp-imagemin` by manual to fix that.
44 |
45 | * If error happened in npm install，such as `/usr/local/lib/node_modules` permission error, fix this by `sudo chown -R "$(whoami)"`+`Path`
46 | * `sudo npm install` is not recommended
47 | * The imagemin-pngquant module need`libpng-devel`，if in Linux, please run `yum install libpng-devel` at first
48 | * If install failed, check the `npm-debug.log` to see if there are some `ENOMEM`errors
49 |
50 |
51 |
52 | ## Config
53 |
54 | ### 0. Support Auto Mode, no Config
55 |
56 | * You can skip `Config`, and directly jump to `Usage`
57 |
58 |
59 | ### 1. Config gulpfile.js:
60 |
61 | - require the `gulpman` in your gulpfile.js，then it will load `gm:publish`, `gm:develop` into gulp tasks.
62 | - `gulp gm:publish` or `gulp gm:develop` in terminal then it will work
63 |
64 |
65 | ```Javascript
66 | /**
67 | * Gulpfile.js
68 | */
69 |
70 |
71 | var gulp = require('gulp'),
72 | gman = require('gulpman')
73 |
74 | // your other tasks ...
75 | // xxx ...
76 |
77 |
78 | /**
79 | * config gulpman ======================
80 | * Use config API
81 | * assets path, CDN, URL prefix
82 | */
83 |
84 | gman.config({
85 |
86 | // whether use absolute path, default `true`
87 | 'is_absolute': true,
88 |
89 | // cdn prefix support［string|array|function］arguments
90 | 'cdn_prefix': '',
91 |
92 | // url prefix, defautl `/static`. This involves the server config ,such as the static path of nginx
93 | 'url_prefix': '/static',
94 |
95 |
96 | /** use spritesmith for css-img sprite
97 | * Based on Spritesmith: https://github.com/Ensighten/spritesmith
98 | * Automatecially generate Sprite Image & CSS
99 | **/
100 | //'spritesmith': { },
101 |
102 | /** usemin config **/
103 | // 'usemin': {}
104 |
105 |
106 | // The COMPONENTS directory
107 | 'components': 'components',
108 |
109 | // For development assets and templates folder, related to Server Config
110 | 'runtime_views': 'views',
111 | 'dist_views': 'views_dist',
112 |
113 | // For production assets and templates folder, related to Server Config
114 | 'runtime_assets': 'assets',
115 | 'dist_assets': 'assets_dist',
116 |
117 | // The js library dir, set as a global module. Also you can set as `bower_components`
118 | 'lib': 'lib',
119 |
120 | // You can add one customer global directory, so you can require module name directly, like: `require ('xxx')`. The xxx is in this directory
121 | 'global': 'common'
122 | })
123 |
124 |
125 | ```
126 |
127 | ### 2. How to config CDN better
128 |
129 | * `cdn_prefix` support String, Array, Function
130 | * if argument is array, the CDN will be an random value
131 | * if argument is function，it would input one argument, `mediaFile`
132 |
133 | ```Javascript
134 |
135 | 'cdn_prefix': function (fileName) {
136 |
137 | console.log(fileName)
138 |
139 | var c_list = [
140 | 'http://s0.com',
141 | 'http://s1.com',
142 | 'http://s2.com',
143 | 'http://s3.com',
144 | 'http://s4.com'
145 | ]
146 | // You can customized your strategy
147 | if(hostFile.match(/\.html$/gm)){
148 | return c_list[0]
149 | }else {
150 | return c_list[1]
151 | }
152 | },
153 | ```
154 |
155 | ### 3. About `is_absolute`
156 |
157 | * `is_absolute` is the dist path of source in html. default true. the dist path is like `/static/home/main.js`
158 |
159 | * [*]Need consistent config with Server, like nginx, apache
160 |
161 | * If no local server, you can set is_absolute as false, use relative path. Like `../../assets/static/home/main.js`
162 |
163 |
164 | ### 4. gulpman directory
165 |
166 | * Use gulpman to arrange your directory as component，The root component dir can be`./components`(default). If you have one component named foo, then `./components/foo`，all related assets such as `html|js|css|fonts|image` should be put in `foo` folder.
167 |
168 | * This solution for assets can be high efficiency and easy to maintain.
169 |
170 | * `gm:develop` to start `develop` mode, the `views` dir and `assets` dir can be generated automatically
171 |
172 | * `gm:publish` to publish assets in production env. The `views_dist` and `assets_dist` can generated.
173 |
174 |
175 | ### 5. What is global directory
176 |
177 | - For `Browserify` packing, the js module in `global dir` can be directly `require` or `import` in es6/js code
178 |
179 | - In `gulpman.config`, the `lib`和`global` are global directory. Take an example:
180 | * In `components/lib` directory, you have one module `foo.js`，then it is `components/lib/foo.js`. So when you use foo in your es6 file, you can use it like: `import foo from 'foo'`, no need write as `import foo from '../lib/foo'`
181 |
182 | - similarly, `global` option can set your dir as global module dir. You can set `bower` dir as your `lib` dir.
183 |
184 | - Please make no conficts in your global dir
185 |
186 |
187 | ### 6. Support for complex and multi level directory in config
188 |
189 | * Such as:
190 |
191 | ```Javascript
192 | gulpman.config({
193 | 'is_absolute': false,
194 | 'components': 'components/cc',
195 | 'runtime_views': 'runtime_views/rv',
196 | 'dist_views': 'dist_views/dv/dv',
197 |
198 | 'dist_assets': 'dist_assets/da',
199 | 'runtime_assets': 'runtime_assets/ra/ra',
200 | })
201 | ```
202 |
203 |
204 | ## Usage
205 |
206 | ### 1. CLI run Task:
207 |
208 | ```Shell
209 |
210 | # Create components directory and add one demo
211 | # init components dir and a html demo
212 | gulp gm:init
213 |
214 |
215 | # develop and watch mode，watchings files changes and update files
216 | gulp gm:develop
217 |
218 | # Build and Watch one special component, other files are not compiled
219 | gulp gm:develop -c component_name1,component_name2,component_name3...
220 |
221 |
222 | # publish assets in production env
223 | gulp gm:publish
224 |
225 | # publish command support `-a`和`-v` parameters to set output assets/views path.
226 | gulp gm:publish -v your_views_dist -a your_assets_dist
227 |
228 | # clean dist files
229 | gulp gm:clean
230 |
231 | # clean dist files, including subfolders
232 | gulp gm:clean-deep
233 |
234 | # Generate one developing assets/views files, but not in watching mode
235 | # compile for develop, not watch
236 | gulp gm:compile
237 |
238 | ```
239 |
240 |
241 | ### 2. Watch one special component in development
242 |
243 | * When the project become huge, if we watch all components assets, it will be slow and low efficiency, so we can only watch special component to get better performance
244 |
245 | * Fox example, if we want watch the `home` component:
246 |
247 | ```Shell
248 |
249 | # this will only build and watch `components/home` components
250 | gulp gm:develop -c home
251 |
252 | ```
253 |
254 |
255 | ### 3. Use `React` in gulpman
256 | * Install React: `npm install react react-dom`
257 | * Use React in ES6:
258 |
259 | ```Javascript
260 | import React from 'react';
261 | import ReactDOM from 'react-dom';
262 |
263 | // xxx
264 | ```
265 |
266 |
267 | ### 4. Use `tpl` file in js|es6|jsx
268 |
269 | * Support `.tpl` file, it will be packaged in dist js files.
270 |
271 | * Usage: `import dialogTpl from './dialog.tpl'` or `var dialogTpl = require('./dialog.tpl')`
272 |
273 |
274 |
275 | ### 5. Usge base64 img in HTML/CSS
276 |
277 | * Just add `?_gm_inline` in assets src path in html/css
278 | * The `base64` code will be inlined in html/css
279 |
280 |
281 | ##### html
282 |
283 | ```html
284 | 