svg sprite generating function (gulp generate-svn)

kamlekar · Mar 2, 2016 · 1806c0e · 1806c0e
1 parent ef7cddd
commit 1806c0e
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 32 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -8,6 +8,8 @@ var sourcemaps = require('gulp-sourcemaps');
 var prettify = require('gulp-prettify');
 var svgstore = require('gulp-svgstore');
 // var cheerio = require('gulp-cheerio');
+var gutil = require('gulp-util');
+var folders = require('gulp-folders');
 var svgmin = require('gulp-svgmin');
 var concat = require('gulp-concat');
 var path = require('path');
@@ -22,8 +24,6 @@ var fs = require('fs');
 // if you need a common sprite, you can just mention a single folder name
 // The below are the example folder names, holding svgs for individual pages.
 // We will pass these folder names as array to generate the svg sprite-sheet.
-// TO DO: Get the file names automatically by reading the files
-// var svgs = ['home-sprt', 'about-sprt', 'contact-sprt', 'all-sprt']; 
 var svgs = [];
 var svgObj = [];
 try{
@@ -35,13 +35,20 @@ try{
 catch(e){
     console.log(e);
 }
-// - CD to the project folder
-// - Run "gulp <folder-name>" in CLI to generate the sprite svg
-for(var i = 0; i < svgs.length; i++){
-    gulp.task(svgs[i], function () {
+
+/*****************************************/
+/*******SVG precompiling function********/
+/*****************************************/
+function generateSvg(){
+    svgs = [];  // Initializing
+    return folders('bundle-svgs/', function(folder){
+        // 'folders' function will loop over all the folders
+        // Storing the folder names in array to use this array to load the svg script
+        svgs.push(folder);
+        // gutil.log(svgs);
         return gulp
             // looks for each folder inside "bundle-svgs" folder
-            .src('bundle-svgs/' + this + '/*.svg')
+            .src('bundle-svgs/' + folder + '/*.svg')
             .pipe(svgmin(function (file) {
                 var prefix = path.basename(file.relative, path.extname(file.relative));
                 return {
@@ -60,21 +67,12 @@ for(var i = 0; i < svgs.length; i++){
             // }))
             // Store the generated svg sprite in "site/assets/images/" folder
             .pipe(gulp.dest('site/assets/images/'));
-    }.bind(svgs[i]));    
-}
+    })();
+};
+
 
 var assets_path = "assets/";
 
-/* // Test this function 
-   // Intention: Stops from breaking the gulp watch on any error
-function swallowError (error) {
-    //If you want details of the error in the console
-    console.log(error.toString());
-    notify(error.toString());
-    util.beep();
-    this.emit('end');
-}
-*/
 /*****************************************/
 /*******SASS precompiling function********/
 /*****************************************/
@@ -95,7 +93,7 @@ function sassChange(){
 /*****************************************/
 function preTemplateChanges(){
     nunjucksRender.nunjucks.configure(['templates-pre/'], { watch: false });
-    // used !(_)*.html to exclude rendering of the files with prefix "_" (underscore)
+    // use !(_)*.html to exclude rendering of the files with prefix "_" (underscore)
     return gulp.src('templates-pre/**/!(_)*.html')
         .pipe(nunjucksRender({
             css_path: assets_path + "css/",
@@ -105,6 +103,9 @@ function preTemplateChanges(){
             svgs: svgs,
             fs: fs
         }))
+        .on('error', function(error){
+            gutil.log(error.message);
+        })
         .pipe(prettify({indent_size: 4}))
         // .on('error', swallowError)
         .pipe(gulp.dest('site'));
@@ -125,14 +126,26 @@ function postTemplateChanges(){
 // Watches changes of sass and templates
 // TO DO: Run template changes and sass changes individually
 function watchChanges(){
+    generateSvg();  // this should be on top because it fills data in a global variable, svgs
     preTemplateChanges();
     postTemplateChanges();
     sassChange();
-    gulp.watch(['templates-pre/**/*.html','templates-post/**/*.html','sass/**/*.scss'], ['pre-templates','post-templates','sass']);
+    gulp.watch([
+        'templates-pre/**/*.html',
+        'templates-post/**/*.html',
+        'sass/**/*.scss',
+        'bundle-svgs/**/*.svg'
+    ], [
+        'pre-templates',
+        'post-templates',
+        'sass',
+        'generate-svg'
+    ]);
 }
 
 // Tasks
 gulp.task('sass', sassChange);
 gulp.task('pre-templates', preTemplateChanges);
 gulp.task('post-templates', postTemplateChanges);
+gulp.task('generate-svg', generateSvg);
 gulp.task('watch', watchChanges);
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "gulp-cheerio": "^0.6.2",
     "gulp-concat": "^2.6.0",
     "gulp-data": "^1.2.0",
+    "gulp-folders": "^1.1.0",
     "gulp-nunjucks": "^2.1.1",
     "gulp-nunjucks-render": "^1.0.0",
     "gulp-path": "^2.0.1",
@@ -20,7 +21,8 @@
     "gulp-sass": "^2.0.4",
     "gulp-sourcemaps": "^1.6.0",
     "gulp-svgmin": "^1.2.0",
-    "gulp-svgstore": "^5.0.5"
+    "gulp-svgstore": "^5.0.5",
+    "gulp-util": "^3.0.7"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

diff --git a/templates-pre/sections/_skeleton-content.html b/templates-pre/sections/_skeleton-content.html
@@ -14,7 +14,7 @@
 
 		<!-- SVG Sprite preloading -->
 		<!-- TO DO: Inject svg content inside html, instead of sending a request -->
-		{% include "variables/_svg-sprite.html" %}
+		{% include "variables/_svg-sprite-method-one.html" %}
 	</head>
 	<body>
 		<div class="page">

diff --git a/templates-pre/variables/_svg-sprite.html → ...pre/variables/_svg-sprite-method-one.html b/templates-pre/variables/_svg-sprite.html → ...pre/variables/_svg-sprite-method-one.html
@@ -1,15 +1,10 @@
-{% for svgContent in svgs %}
-  <div style="display: none">
-    {% set filepath = 'site/assets/images/' + svgContent + '.svg' %}
-	{{ fs.readFileSync(filepath, 'utf8') }}
-  </div>
-{% endfor %}
+
 
 <!-- For getting svg content from HTTP request -->
-<!--
+
 <script>	
 	(function (doc) {		
-		var svgs = {{ svgs }};	
+		var svgs = "{{ svgs }}".split(",");	
 		for(var i = 0; i < svgs.length; i++){		
    			var scripts = doc.getElementsByTagName('script')	
    			var script = scripts[scripts.length - 1]		
@@ -34,4 +29,3 @@
 		}		
 	})(document)		
 </script>
--->
diff --git a/templates-pre/variables/_svg-sprite-method-two.html b/templates-pre/variables/_svg-sprite-method-two.html
@@ -0,0 +1,6 @@
+{% for svgContent in svgs %}
+  <div style="display: none">
+    {% set filepath = 'site/assets/images/' + svgContent + '.svg' %}
+	{{ fs.readFileSync(filepath, 'utf8') }}
+  </div>
+{% endfor %}