gulp setup for svg icon selection + sprite + png fallbacks

README.md

@@ -45,7 +45,7 @@ npm install
 This generates the site and assets and starts a local dev server combined with a livereloading watch task under `http://localhost:1337`.
 
 ```bash
-gulp server
+gulp
 ```
 
 ### Production build

gulpfile.js

@@ -1,4 +1,3 @@
-
 // load plugins
 var $ = require('gulp-load-plugins')();
 
@@ -29,10 +28,34 @@ console.log("");
 // Config
 // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
+// paths
 var src = '_src',
     dist = '_site',
     cdn = 'https://d2jlreog722xe2.cloudfront.net';
 
+// icons
+var icons = {
+    entypo: {
+        src: src + '/_assets/img/entypo/',
+        dist: dist + '/assets/img/',
+        prefix: 'entypo-',
+        icons: ['twitter', 'facebook', 'google+', 'magnifying-glass', 'menu']
+    }
+}
+
+// SVG sprite
+spriteConfig = {
+    'dest': dist + '/assets/img/',
+    mode: {
+        symbol: {
+            dest: './',
+            sprite: 'sprite.svg',
+            inline: true
+        }
+    }
+}
+
+// code banner
 var banner = [
     '/**',
     ' ** <%= pkg.name %> v<%= pkg.version %>',
@@ -74,7 +97,9 @@ gulp.task('clean', function(cb) {
 //
 gulp.task('jekyll', function(cb) {
     var spawn = require('child_process').spawn;
-    var jekyll = spawn('jekyll', ['build', '--drafts', '--future'], {stdio: 'inherit'});
+    var jekyll = spawn('jekyll', ['build', '--drafts', '--future'], {
+        stdio: 'inherit'
+    });
 
     jekyll.on('exit', function(code) {
         cb(code === 0 ? null : 'ERROR: Jekyll process exited with code: ' + code);
@@ -83,7 +108,9 @@ gulp.task('jekyll', function (cb){
 
 gulp.task('jekyll:production', function(cb) {
     var spawn = require('child_process').spawn;
-    var jekyll = spawn('jekyll', ['build', '--lsi'], {stdio: 'inherit'});
+    var jekyll = spawn('jekyll', ['build', '--lsi'], {
+        stdio: 'inherit'
+    });
 
     jekyll.on('exit', function(code) {
         cb(code === 0 ? null : 'ERROR: Jekyll process exited with code: ' + code);
@@ -99,16 +126,27 @@ gulp.task('css', function() {
             src + '/_assets/styl/kremalicious3.styl',
             src + '/_assets/styl/poststyle-2300.styl'
         ])
-        .pipe($.stylus({ use: [nib()], 'include css': true }))
+        .pipe($.stylus({
-        .pipe($.autoprefixer({ browsers: 'last 2 versions' }))
+            use: [nib()],
-        .pipe($.combineMq({ beautify: false }))
+            'include css': true
+        }))
+        .pipe($.autoprefixer({
+            browsers: 'last 2 versions'
+        }))
+        .pipe($.combineMq({
+            beautify: false
+        }))
         // .pipe($.uncss({
         //     html: [dist + '/**/*.html'],
         //     ignore: ['.in', '.collapsing']
         // }))
         .pipe($.cssmin())
-        .pipe($.rename({suffix: '.min'}))
+        .pipe($.rename({
-        .pipe($.header(banner, {pkg: pkg}))
+            suffix: '.min'
+        }))
+        .pipe($.header(banner, {
+            pkg: pkg
+        }))
         .pipe(gulp.dest(dist + '/assets/css/'))
         .pipe($.connect.reload());
 });
@@ -122,11 +160,14 @@ gulp.task('css', function() {
 gulp.task('js-libraries', function() {
     var jquery = gulp.src('node_modules/jquery/dist/jquery.js'),
         picturefill = gulp.src('node_modules/picturefill/dist/picturefill.js'),
-        CustomElements = gulp.src('node_modules/webcomponents.js/CustomElements.js')
+        CustomElements = gulp.src('node_modules/webcomponents.js/CustomElements.js'),
+        svg4everybody = gulp.src('node_modules/svg4everybody/svg4everybody.js')
 
-    return merge(jquery, picturefill, CustomElements)
+    return merge(jquery, picturefill, CustomElements, svg4everybody)
         .pipe($.uglify())
-        .pipe($.rename({suffix: '.min'}))
+        .pipe($.rename({
+            suffix: '.min'
+        }))
         .pipe(gulp.dest(dist + '/assets/js/'))
 });
 
@@ -141,7 +182,9 @@ gulp.task('js-project', function() {
         ])
         .pipe($.uglify())
         .pipe($.concat('kremalicious3.min.js'))
-    .pipe($.header(banner, {pkg: pkg}))
+        .pipe($.header(banner, {
+            pkg: pkg
+        }))
         .pipe(gulp.dest(dist + '/assets/js/'))
         .pipe($.connect.reload());
 });
@@ -150,11 +193,45 @@ gulp.task('js-project', function() {
 gulp.task('js', ['js-libraries', 'js-project']);
 
 
+//
+// Icons
+//
+gulp.task('icons', ['icons-entypo']);
+
+gulp.task('icons-entypo', function() {
+    var iconset = icons.entypo
+
+    // Iterate through the icon set array
+    icons.entypo.icons.forEach(function(icon, i, icons) {
+        icons[i] = iconset.src + icon + '.svg';
+    });
+
+    return gulp.src(iconset.icons)
+        .pipe($.rename({
+            prefix: iconset.prefix
+        }))
+        .pipe(gulp.dest(iconset.dist))
+        .pipe($.filter('**/*.svg'))
+        .pipe($.svgSprite(spriteConfig))
+        .pipe(gulp.dest(iconset.dist))
+});
+
+
+//
+// Generate SVG fallbacks
+//
+gulp.task('svg-fallbacks', function() {
+    return gulp.src(dist + '/assets/img/*.svg')
+        .pipe($.svg2png())
+        .pipe(gulp.dest(dist + '/assets/img/png/'))
+});
+
+
 //
 // Copy images
 //
 gulp.task('images', function() {
-  return gulp.src(src + '/_assets/img/**/*')
+    return gulp.src([src + '/_assets/img/**/*', '!' + src + '/_assets/img/entypo/**/*'])
         .pipe(gulp.dest(dist + '/assets/img/'))
         .pipe($.connect.reload());
 });
@@ -193,7 +270,9 @@ gulp.task('imagemin', function () {
             progressive: true, // jpg
             interlaced: true, // gif
             multipass: true, // svg
-            svgoPlugins: [{removeViewBox: false}]
+            svgoPlugins: [{
+                removeViewBox: false
+            }]
         })))
         .pipe(gulp.dest(dist));
 });
@@ -221,7 +300,9 @@ gulp.task('revision-replace', function() {
     var manifest = gulp.src(dist + '/assets/rev-manifest.json');
 
     return gulp.src(dist + '/**/*.{html,xml,txt,json,css,js,png,jpg,jpeg,svg,eot,ttf,woff}')
-        .pipe($.revReplace({manifest: manifest}))
+        .pipe($.revReplace({
+            manifest: manifest
+        }))
         .pipe(gulp.dest(dist));
 });
 
@@ -230,7 +311,9 @@ gulp.task('revision-replace', function() {
 // CDN url injection
 //
 gulp.task('cdn', function() {
-    return gulp.src([dist + '/**/*.html', dist + '/assets/css/*.css'], {base: dist})
+    return gulp.src([dist + '/**/*.html', dist + '/assets/css/*.css'], {
+            base: dist
+        })
         .pipe($.replace('/assets/css/', cdn + '/assets/css/'))
         .pipe($.replace('/assets/js/', cdn + '/assets/js/'))
         .pipe($.replace('/assets/img/', cdn + '/assets/img/'))
@@ -258,7 +341,8 @@ gulp.task('connect', function() {
 gulp.task('watch', function() {
     gulp.watch([src + '/_assets/styl/**/*.styl'], ['css']);
     gulp.watch([src + '/_assets/js/*.js'], ['js-project']);
-    gulp.watch([src + '/_assets/img/**/*'], ['images']);
+    gulp.watch([src + '/_assets/img/**/*.{png,jpg,jpeg,gif}'], ['images']);
+    gulp.watch([src + '/_assets/img/**/*.{svg}'], ['icons']);
     gulp.watch([src + '/_media/**/*'], ['media']);
     gulp.watch([src + '/**/*.{html,xml,json,txt}'], ['jekyll-build']);
 });
@@ -267,10 +351,13 @@ gulp.task('watch', function() {
 // Task sequences
 // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
+// All assets tasks
+gulp.task('assets', ['css', 'js', 'icons', 'images', 'fonts', 'media']);
+
 gulp.task('jekyll-build', function(cb) {
     runSequence(
         'jekyll',
-        ['css', 'js', 'images', 'fonts', 'media'],
+        'assets',
         cb
     );
 });
@@ -278,8 +365,9 @@ gulp.task('jekyll-build', function(cb) {
 //
 // Dev Server
 //
-gulp.task('server', function(cb) {
+gulp.task('default', function(cb) {
     runSequence(
+        'clean',
         'jekyll-build',
         'watch',
         'connect',
@@ -294,7 +382,8 @@ gulp.task('build', function(cb) {
     runSequence(
         'clean',
         'jekyll:production',
-        ['css', 'js', 'images', 'fonts', 'media'],
+        'assets',
+        'svg-fallbacks',
         'revision',
         'revision-replace',
         'cdn',

package.json

@@ -19,6 +19,7 @@
     "normalize-css": ">=2.3.1",
     "normalize-opentype.css": ">=0.2.4",
     "picturefill": ">=2.3.1",
+    "svg4everybody": ">=0.0.2",
     "webcomponents.js": ">=0.7.1"
   },
   "devDependencies": {
@@ -30,6 +31,7 @@
     "gulp-concat": ">=2.5.2",
     "gulp-connect": ">=2.0.5",
     "gulp-cssmin": ">=0.1.7",
+    "gulp-filter": "^2.0.2",
     "gulp-header": ">=1.2.2",
     "gulp-imagemin": ">=2.2.1",
     "gulp-load-plugins": ">=0.10.0",
@@ -38,13 +40,15 @@
     "gulp-rev": ">=4.0.0",
     "gulp-rev-replace": ">=0.4.1",
     "gulp-stylus": ">=2.0.3",
+    "gulp-svg-sprite": ">=1.2.2",
+    "gulp-svg2png": ">=0.3.0",
     "gulp-uglify": ">=1.2.0",
     "gulp-uncss": ">=1.0.1",
-    "gulp-zip": ">=2.0.0",
     "merge-stream": ">=0.1.7",
     "nib": ">=1.0.3",
     "run-sequence": ">=1.1.0",
-    "stylus": ">=0.45.0"
+    "stylus": ">=0.45.0",
+    "vinyl": ">=0.4.6"
   },
   "engines": {
     "node": ">=0.10.29"