[FIX] plugin buffer wasn't flushed before running

#2

README.md

@@ -9,6 +9,12 @@ The plugin produce 2 files:
 - *svg-symbols.svg* containing all SVG symbols
 - *svg-symbols.css* containing all classes with the right svg sizes
 
+## install
+
+```
+npm install --save-dev gulp-svg-symbols
+```
+
 ## example
 
 in your gulpfile.js
@@ -76,6 +82,7 @@ gulp.task('sprites', function () {
 
 ## Release History
 
+- **0.1.0** — publish to npm and fix [watch issue](https://github.com/Hiswe/gulp-svg-symbols/issues/2)
 - **0.0.2** — Css can be generated with *em* size
 - **0.0.1** — First release
 

gulpfile.js

@@ -1,14 +1,19 @@
 var gulp        = require('gulp');
 var jasmine     = require('gulp-jasmine');
 var svgSymbols  = require('./index');
+var svgGlob     = 'test/source/*.svg';
 
 gulp.task('test', function (){
   return gulp.src('test/*.js')
-    .pipe(jasmine());
+    .pipe(jasmine({verbose: true}));
 });
 
 gulp.task('demo', function (){
-  return gulp.src(['test/source/github.svg', 'test/source/codepen.svg'])
+  return gulp.src(svgGlob)
     .pipe(svgSymbols())
     .pipe(gulp.dest('tmp'));
-});
+});
+
+gulp.task('watch', function (){
+  return gulp.watch(svgGlob, ['demo']);
+});

index.js

@@ -3,15 +3,16 @@
 var _             = require('lodash');
 var gutil         = require('gulp-util');
 var through       = require('through2');
+var Promise       = require('bluebird');
 
-var PLUGIN_NAME   = "gulp-svg-symbols";
+var PLUGIN_NAME   = 'gulp-svg-symbols';
 
 var buffer        = [];
 var defaults      = require('./lib/default-config');
 var options       = {};
 var formatSvgData = require('./lib/format-svg-data');
-var toSvgFile     = require('./lib/svg-data-to-svg-file');
-var toCssFile     = require('./lib/svg-data-to-css-file');
+var toSvgFile     = Promise.promisify(require('./lib/svg-data-to-svg-file'));
+var toCssFile     = Promise.promisify(require('./lib/svg-data-to-css-file'));
 
 function transform(file, encoding, cb) {
   if (file.isNull()) {
@@ -31,18 +32,24 @@ function transform(file, encoding, cb) {
 }
 
 function flush(cb) {
-  var that = this;
-  toSvgFile(buffer, function (err, result){
-    that.push(result);
-  });
-  toCssFile(buffer, function (err, result){
-    that.push(result);
+  var that  = this;
+  var files = [];
+  files.push(toSvgFile(buffer));
+  files.push(toCssFile(buffer));
+  Promise.all(files).then(function (files) {
+    files.forEach(function (file) {
+      that.push(file);
+    });
     cb();
   });
 }
 
 // Greatly inspired by https://www.npmjs.org/package/gulp-svg-sprites
 module.exports = function (opts) {
+  // flush the buffer
+  // https://github.com/Hiswe/gulp-svg-symbols/issues/2
+  buffer  = [];
+  // merge options
   options = _.merge(_.cloneDeep(defaults), opts || {});
   return through.obj(transform, flush);
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gulp-svg-symbols",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Convert SVG files to symbols with gulp",
   "main": "index.js",
   "scripts": {
@@ -30,10 +30,12 @@
     "lodash": "^2.4.1",
     "through2": "^0.5.1",
     "svgo": "^0.4.4",
-    "gulp-util": "^2.2.17"
+    "gulp-util": "^2.2.17",
+    "bluebird": "^2.1.2"
   },
   "devDependencies": {
     "gulp": "^3.8.0",
-    "gulp-jasmine": "^0.2.0"
+    "gulp-jasmine": "^0.2.0",
+    "event-stream": "^3.1.5"
   }
 }

test/output/svg-symbols.css

@@ -0,0 +1,8 @@
+.codepen {
+  width: 24px;
+  height: 24px;
+}
+.github {
+  width: 22px;
+  height: 24px;
+}

test/plugin.js

@@ -0,0 +1,53 @@
+var fs            = require('fs');
+var es            = require('event-stream');
+var gulp          = require('gulp');
+var path          = require('path');
+var gutil         = require('gulp-util');
+
+var svgSymbols    = require('../index.js');
+var srcGlob       = 'test/source/*.svg'
+
+// Use the codepen files for that
+describe('gulp-svg-symbols plugin', function () {
+  beforeEach(function () {
+    this.output =  [];
+  });
+
+  it('should produce two files', function(done){
+    var that = this;
+    gulp.src(srcGlob)
+      .pipe(svgSymbols())
+      .pipe(es.mapSync(function (data){
+        that.output.push(data);
+        return data;
+      }))
+      .pipe(es.wait(function () {
+        expect(that.output.length).toEqual(2);
+        expect(that.output[0].path).toEqual('svg-symbols.svg');
+        expect(that.output[1].path).toEqual('svg-symbols.css');
+        done();
+      }));
+  });
+
+  it('should have the right output if called many times', function(done){
+    var that = this;
+    gulp.src(srcGlob)
+      .pipe(svgSymbols())
+      .pipe(es.wait(function () {
+        gulp.src(srcGlob)
+          .pipe(svgSymbols())
+          .pipe(es.mapSync(function (data){
+            that.output.push(data);
+            return data;
+          }))
+          .pipe(es.wait(function () {
+            var svgOutputFile = fs.readFileSync('test/output/svg-symbols.svg').toString();
+            var cssOutputFile = fs.readFileSync('test/output/svg-symbols.css').toString();
+            expect(that.output.length).toEqual(2);
+            expect(that.output[0].contents.toString()).toEqual(svgOutputFile);
+            expect(that.output[1].contents.toString()).toEqual(cssOutputFile);
+            done();
+          }));
+      }));
+  });
+});

test/transform-method-with-options.js

@@ -0,0 +1,66 @@
+var fs            = require('fs');
+var path          = require('path');
+var gutil         = require('gulp-util');
+
+var config        = require('../lib/default-config');
+var formatSvgData = require('../lib/format-svg-data.js');
+var toSvg         = require('../lib/svg-data-to-svg-file.js');
+var toCss         = require('../lib/svg-data-to-css-file.js');
+
+// Use the codepen files for that
+describe('transform method with options', function () {
+  beforeEach(function () {
+    this.file = new gutil.File({
+      base: 'test/source',
+      cwd: 'test/',
+      path: 'test/source/codepen.svg',
+      contents: fs.readFileSync('test/source/codepen.svg')
+    });
+    this.info = { width: 24,
+      height: 24,
+      name: 'codepen',
+      id: 'icon-codepen',
+      className: '.icon-codepen',
+      cssWidth : '1.5em',
+      cssHeight : '1.5em'
+    };
+    this.config = {
+      svgId:     'icon-%f',
+      className: '.icon-%f',
+      fontSize:   16
+    }
+  });
+
+  it('should gather the right data for a svg file', function (done) {
+    var that = this;
+    formatSvgData(this.file, this.config, function (result) {
+      expect(result.info).toEqual(jasmine.any(Object));
+      expect(result.info).toEqual(that.info);
+      done();
+    });
+  });
+
+  it('should render the right svg', function (done) {
+    var that = this;
+    formatSvgData(this.file, this.config, function (result) {
+      toSvg([result], function (err, result) {
+        var outputFile = fs.readFileSync('test/output/codepen-symbol.svg').toString();
+        expect(result.path).toEqual('svg-symbols.svg');
+        expect(result.contents.toString()).toEqual(outputFile);
+        done();
+      });
+    });
+  });
+
+  it('should render the right css', function (done) {
+    var that = this;
+    formatSvgData(this.file, this.config, function(result){
+      toCss([result], function(err, result){
+        var outputFile = fs.readFileSync('test/output/codepen-symbol.css').toString();
+        expect(result.path).toEqual('svg-symbols.css');
+        expect(result.contents.toString()).toEqual(outputFile);
+        done();
+      });
+    });
+  });
+});