├── example
    ├── .gitignore
    ├── photos
    │   ├── notanimage.txt
    │   ├── img.jpg
    │   ├── green.jpg
    │   ├── img2.jpg
    │   └── img3.png
    ├── src
    │   ├── component.jsx
    │   └── page.html
    ├── gulpfile.js
    └── dist
    │   ├── component.jsx
    │   └── page.html
├── test
    ├── generate.js
    ├── match.js
    └── expected
    │   └── page.html
├── .gitignore
├── README.md
├── index.js
├── package.json
└── LICENSE


/example/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/example/photos/notanimage.txt:
--------------------------------------------------------------------------------
1 | not a image


--------------------------------------------------------------------------------
/example/photos/img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krasimir/gulp-coloor/master/example/photos/img.jpg


--------------------------------------------------------------------------------
/example/photos/green.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krasimir/gulp-coloor/master/example/photos/green.jpg


--------------------------------------------------------------------------------
/example/photos/img2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krasimir/gulp-coloor/master/example/photos/img2.jpg


--------------------------------------------------------------------------------
/example/photos/img3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krasimir/gulp-coloor/master/example/photos/img3.png


--------------------------------------------------------------------------------
/test/generate.js:
--------------------------------------------------------------------------------
1 | var Coloor = require('coloor');
2 | var root = __dirname + '/../example/';
3 | var fs = require('fs');
4 | 
5 | Coloor.fromFile(root + 'src/page.html', root + '/photos', function (html) {
6 |   fs.writeFileSync(__dirname + '/expected/page.html', html);
7 | }, { size: 3 });


--------------------------------------------------------------------------------
/example/src/component.jsx:
--------------------------------------------------------------------------------
 1 | import react from 'react';
 2 | 
 3 | export default class Component extends React.Component {
 4 |   render() {
 5 |     return (
 6 |       <section>
 7 |         <img src='./photos/img.jpg' alt='something' />
 8 |         <img src='./photos/green.jpg' alt='else' />
 9 |       </section>
10 |     )
11 |   }
12 | }


--------------------------------------------------------------------------------
/test/match.js:
--------------------------------------------------------------------------------
 1 | var fs = require('fs');
 2 | 
 3 | var a = fs.readFileSync(__dirname + '/../example/dist/page.html').toString('utf8');
 4 | var b = fs.readFileSync(__dirname + '/expected/page.html').toString('utf8');
 5 | 
 6 | if (a !== b) {
 7 |   throw new Error('example/dist/page.html is not the same as test/expected/page.html');
 8 | }
 9 | 
10 | console.log('Success!');


--------------------------------------------------------------------------------
/example/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var coloor = require('../');
 3 | var plumber = require('gulp-plumber');
 4 | 
 5 | gulp.task('decorate-html', function() {
 6 |   gulp.src('src/*.*')
 7 |     .pipe(plumber())
 8 |     .pipe(coloor({
 9 |       sizeW: 3, // 3px width of the image preview
10 |       images: [__dirname + '/photos'] // location of the image files
11 |     }))
12 |     .pipe(gulp.dest('./dist/'));
13 | });
14 | 
15 | gulp.task('default', ['decorate-html']);


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 | 
20 | # node-waf configuration
21 | .lock-wscript
22 | 
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 | 
26 | # Dependency directory
27 | node_modules
28 | 
29 | # Optional npm cache directory
30 | .npm
31 | 
32 | # Optional REPL history
33 | .node_repl_history
34 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # gulp-coloor
 2 | 
 3 | Gulp plugin for [Coloor](https://github.com/krasimir/coloor) image preloading utility.
 4 | 
 5 | ## Installation
 6 | 
 7 | `npm i gulp-coloor -D`
 8 | 
 9 | ## Usage
10 | 
11 | ```js
12 | var gulp = require('gulp');
13 | var coloor = require('gulp-coloor');
14 | 
15 | gulp.task('decorate-html', function() {
16 |   gulp.src('src/*.*') // your html-ish files
17 |     .pipe(coloor({
18 |       sizeW: 3, // 3px width of the image preview. The height is calculated automatically.
19 |       images: [__dirname + '/photos'] // location of the image files
20 |     }))
21 |     .pipe(gulp.dest('./dist/'));
22 | });
23 | 
24 | gulp.task('default', ['decorate-html']);
25 | ```


--------------------------------------------------------------------------------
/example/dist/component.jsx:
--------------------------------------------------------------------------------
 1 | import react from 'react';
 2 | 
 3 | export default class Component extends React.Component {
 4 |   render() {
 5 |     return (
 6 |       <section>
 7 |         <img data-coloor='./photos/img.jpg' data-coloor-size='640x480'  src='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAAklEQVR4AewaftIAAAAjSURBVAEaAOX/Ab24tf+42PMA09zsAAL6+fkACwH3AOPq8QDUQg74d7o9lAAAAABJRU5ErkJggg==' alt='something' />
 8 |         <img data-coloor='./photos/green.jpg' data-coloor-size='500x499'  src='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAAklEQVR4AewaftIAAAAuSURBVGNUt+D+r+vIxfDk8Q8GJi4uJoYvrxgYHt/8zcDEycXEIK/AxcDw/x8DAO3IC6w6YFW8AAAAAElFTkSuQmCC' alt='else' />
 9 |       </section>
10 |     )
11 |   }
12 | }


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var gutil = require('gulp-util');
 2 | var coloor = require('coloor');
 3 | var map = require('map-stream');
 4 | 
 5 | var riseError = function (message) {
 6 |   return new gutil.PluginError('gulp-coloor', {
 7 |     message: message
 8 |   });
 9 | }
10 | 
11 | module.exports = function(options) {
12 | 
13 |   if (!options) {
14 |     return riseError('Missing options.')
15 |   }
16 | 
17 |   if (!options.images) {
18 |     return riseError('Missing `images` option (should be an array of directories).')
19 |   }
20 | 
21 |   return map(function(file, cb) {
22 |     var error = null, decorated;
23 | 
24 |     try {
25 |       decorated = coloor(file.contents.toString('utf8'), options.images, function (html) {
26 |         file.contents = new Buffer(html);
27 |         cb(error, file);
28 |       }, options);
29 |     } catch (err) {
30 |       cb(err);
31 |       return;
32 |     }
33 |   });
34 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gulp-coloor",
 3 |   "version": "0.2.1",
 4 |   "description": "Image preloading utility that uses dominant color",
 5 |   "main": "index.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/krasimir/gulp-coloor.git"
 9 |   },
10 |   "scripts": {
11 |     "test": "cd ./example && gulp && cd ../ && node ./test/generate.js && node ./test/match.js"
12 |   },
13 |   "keywords": [
14 |     "preloader",
15 |     "image",
16 |     "dominant",
17 |     "color",
18 |     "lazy"
19 |   ],
20 |   "author": "Krasimir Tsonev",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/krasimir/gulp-coloor/issues"
24 |   },
25 |   "homepage": "https://github.com/krasimir/gulp-coloor",
26 |   "dependencies": {
27 |     "coloor": "0.4.5",
28 |     "gulp": "3.9.0",
29 |     "gulp-util": "3.0.7",
30 |     "map-stream": "0.0.6"
31 |   },
32 |   "devDependencies": {
33 |     "gulp-plumber": "1.0.1"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Krasimir Tsonev
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/example/src/page.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Coloor</title>
 6 |   <link rel="stylesheet" type="text/css" href="./styles.css">
 7 | </head>
 8 | <body>
 9 |   <h1>Coloor<small>Image preloading utility</small></h1>
10 |   <p>
11 |     <a href="https://github.com/krasimir/coloor" target="_blank">Coloor</a> is a HTML preprocessor that decorates your <img> tags with data-coloor attributes containing a small base64 encoded version of your image. The idea is to quickly show the small image as a placeholder while the original one is loading.<br /><br />
12 |     In GitHub: <a href="https://github.com/krasimir/coloor" target="_blank">http://github.com/krasimir/coloor</a>
13 |   </p>
14 |   <hr />
15 |   <section>
16 |     <img
17 |       src="./photos/img2.jpg"
18 |       alt="image 2" />
19 |       <IMG src="./photos/img3.png" alt="image 3">
20 |       <img src="./photos/img.jpg" alt="image 1" />
21 |       <img src="./photos/green.jpg" alt="image4" />
22 |   </section>
23 |   <hr />
24 |   <!--<script src="../src/preload/index.js"></script>-->
25 |   <script src="../lib/coloor.min.js"></script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/example/dist/page.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Coloor</title>
 6 |   <link rel="stylesheet" type="text/css" href="./styles.css">
 7 | </head>
 8 | <body>
 9 |   <h1>Coloor<small>Image preloading utility</small></h1>
10 |   <p>
11 |     <a href="https://github.com/krasimir/coloor" target="_blank">Coloor</a> is a HTML preprocessor that decorates your <img> tags with data-coloor attributes containing a small base64 encoded version of your image. The idea is to quickly show the small image as a placeholder while the original one is loading.<br /><br />
12 |     In GitHub: <a href="https://github.com/krasimir/coloor" target="_blank">http://github.com/krasimir/coloor</a>
13 |   </p>
14 |   <hr />
15 |   <section>
16 |     <img data-coloor="./photos/img2.jpg" data-coloor-size="512x512" 
17 |       src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAAklEQVR4AewaftIAAAAuSURBVGNc7Sf+38JDheHy8ecMLMZuOgyiGhwMBtw8DEzHd1xlePOAieHElqsMAPDWDODinKHYAAAAAElFTkSuQmCC"
18 |       alt="image 2" />
19 |       <img data-coloor="./photos/img3.png" data-coloor-size="700x467"  src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAAklEQVR4AewaftIAAAAhSURBVGMs91L/L6tjzPDh2SMGljsv/zB85njDcO7MdQYAlFcMOqOUSe8AAAAASUVORK5CYII=" alt="image 3">
20 |       <img data-coloor="./photos/img.jpg" data-coloor-size="640x480"  src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAAklEQVR4AewaftIAAAAjSURBVAEaAOX/Ab24tf+42PMA09zsAAL6+fkACwH3AOPq8QDUQg74d7o9lAAAAABJRU5ErkJggg==" alt="image 1" />
21 |       <img data-coloor="./photos/green.jpg" data-coloor-size="500x499"  src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAAklEQVR4AewaftIAAAAuSURBVGNUt+D+r+vIxfDk8Q8GJi4uJoYvrxgYHt/8zcDEycXEIK/AxcDw/x8DAO3IC6w6YFW8AAAAAElFTkSuQmCC" alt="image4" />
22 |   </section>
23 |   <hr />
24 |   <!--<script src="../src/preload/index.js"></script>-->
25 |   <script src="../lib/coloor.min.js"></script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/test/expected/page.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Coloor</title>
 6 |   <link rel="stylesheet" type="text/css" href="./styles.css">
 7 | </head>
 8 | <body>
 9 |   <h1>Coloor<small>Image preloading utility</small></h1>
10 |   <p>
11 |     <a href="https://github.com/krasimir/coloor" target="_blank">Coloor</a> is a HTML preprocessor that decorates your <img> tags with data-coloor attributes containing a small base64 encoded version of your image. The idea is to quickly show the small image as a placeholder while the original one is loading.<br /><br />
12 |     In GitHub: <a href="https://github.com/krasimir/coloor" target="_blank">http://github.com/krasimir/coloor</a>
13 |   </p>
14 |   <hr />
15 |   <section>
16 |     <img data-coloor="./photos/img2.jpg" data-coloor-size="512x512" 
17 |       src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAAklEQVR4AewaftIAAAAuSURBVGNc7Sf+38JDheHy8ecMLMZuOgyiGhwMBtw8DEzHd1xlePOAieHElqsMAPDWDODinKHYAAAAAElFTkSuQmCC"
18 |       alt="image 2" />
19 |       <img data-coloor="./photos/img3.png" data-coloor-size="700x467"  src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAAklEQVR4AewaftIAAAAhSURBVGMs91L/L6tjzPDh2SMGljsv/zB85njDcO7MdQYAlFcMOqOUSe8AAAAASUVORK5CYII=" alt="image 3">
20 |       <img data-coloor="./photos/img.jpg" data-coloor-size="640x480"  src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAAklEQVR4AewaftIAAAAjSURBVAEaAOX/Ab24tf+42PMA09zsAAL6+fkACwH3AOPq8QDUQg74d7o9lAAAAABJRU5ErkJggg==" alt="image 1" />
21 |       <img data-coloor="./photos/green.jpg" data-coloor-size="500x499"  src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAAklEQVR4AewaftIAAAAuSURBVGNUt+D+r+vIxfDk8Q8GJi4uJoYvrxgYHt/8zcDEycXEIK/AxcDw/x8DAO3IC6w6YFW8AAAAAElFTkSuQmCC" alt="image4" />
22 |   </section>
23 |   <hr />
24 |   <!--<script src="../src/preload/index.js"></script>-->
25 |   <script src="../lib/coloor.min.js"></script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------