From 3fff97953a11a2fbb8fd105f82abe0e75cf8d860 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 8 Jun 2015 19:29:04 +0200 Subject: [PATCH] gulp setup for svg icon selection + sprite + png fallbacks --- README.md | 2 +- gulpfile.js | 185 ++++++++++++++++++++++++++++++++++++++------------- package.json | 12 ++-- 3 files changed, 146 insertions(+), 53 deletions(-) diff --git a/README.md b/README.md index aa5a88fb..a659ca6c 100644 --- a/README.md +++ b/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 diff --git a/gulpfile.js b/gulpfile.js index ba7521f8..dfc603a3 100644 --- a/gulpfile.js +++ b/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 %>', @@ -72,21 +95,25 @@ gulp.task('clean', function(cb) { // // Jekyll // -gulp.task('jekyll', 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); + cb(code === 0 ? null : 'ERROR: Jekyll process exited with code: ' + code); }); }); -gulp.task('jekyll:production', 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); + 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($.autoprefixer({ browsers: 'last 2 versions' })) - .pipe($.combineMq({ beautify: false })) + .pipe($.stylus({ + use: [nib()], + '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($.header(banner, {pkg: pkg})) + .pipe($.rename({ + suffix: '.min' + })) + .pipe($.header(banner, { + pkg: pkg + })) .pipe(gulp.dest(dist + '/assets/css/')) .pipe($.connect.reload()); }); @@ -122,41 +160,80 @@ 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/')) }); // Project js gulp.task('js-project', function() { return gulp.src([ - 'node_modules/masonry-layout/dist/masonry.pkgd.js', - 'node_modules/imagesloaded/imagesloaded.js', - 'bower_components/simple-jekyll-search/dest/jekyll-search.js', - 'bower_components/time-elements/time-elements.js', - src + '/_assets/js/*.js' - ]) - .pipe($.uglify()) - .pipe($.concat('kremalicious3.min.js')) - .pipe($.header(banner, {pkg: pkg})) - .pipe(gulp.dest(dist + '/assets/js/')) - .pipe($.connect.reload()); + 'node_modules/masonry-layout/dist/masonry.pkgd.js', + 'node_modules/imagesloaded/imagesloaded.js', + 'bower_components/simple-jekyll-search/dest/jekyll-search.js', + 'bower_components/time-elements/time-elements.js', + src + '/_assets/js/*.js' + ]) + .pipe($.uglify()) + .pipe($.concat('kremalicious3.min.js')) + .pipe($.header(banner, { + pkg: pkg + })) + .pipe(gulp.dest(dist + '/assets/js/')) + .pipe($.connect.reload()); }); // Collect all script tasks 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/**/*') - .pipe(gulp.dest(dist + '/assets/img/')) - .pipe($.connect.reload()); + return gulp.src([src + '/_assets/img/**/*', '!' + src + '/_assets/img/entypo/**/*']) + .pipe(gulp.dest(dist + '/assets/img/')) + .pipe($.connect.reload()); }); @@ -164,9 +241,9 @@ gulp.task('images', function() { // Copy fonts // gulp.task('fonts', function() { - return gulp.src(src + '/_assets/fonts/**/*') - .pipe(gulp.dest(dist + '/assets/fonts/')) - .pipe($.connect.reload()); + return gulp.src(src + '/_assets/fonts/**/*') + .pipe(gulp.dest(dist + '/assets/fonts/')) + .pipe($.connect.reload()); }); @@ -174,26 +251,28 @@ gulp.task('fonts', function() { // Copy media // gulp.task('media', function() { - return gulp.src(src + '/_media/**/*') - .pipe(gulp.dest(dist + '/media/')) - .pipe($.connect.reload()); + return gulp.src(src + '/_media/**/*') + .pipe(gulp.dest(dist + '/media/')) + .pipe($.connect.reload()); }); // // Image optimization // -gulp.task('imagemin', function () { +gulp.task('imagemin', function() { return gulp.src([ dist + '/**/*.{png,jpg,jpeg,gif,svg}', '!' + dist + '/media/**/*' ]) .pipe($.cache($.imagemin({ optimizationLevel: 5, // png - progressive: true, // jpg - interlaced: true, // gif - multipass: true, // svg - svgoPlugins: [{removeViewBox: false}] + progressive: true, // jpg + interlaced: true, // gif + multipass: true, // svg + svgoPlugins: [{ + removeViewBox: false + }] }))) .pipe(gulp.dest(dist)); }); @@ -202,7 +281,7 @@ gulp.task('imagemin', function () { // // Revision static assets // -gulp.task('revision', function () { +gulp.task('revision', function() { return gulp.src(dist + '/assets/**/*.{css,js,png,jpg,jpeg,svg,eot,ttf,woff}') .pipe($.rev()) .pipe(gulp.dest(dist + '/assets/')) @@ -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)); }); @@ -229,8 +310,10 @@ gulp.task('revision-replace', function() { // // CDN url injection // -gulp.task('cdn',function(){ - return gulp.src([dist + '/**/*.html', dist + '/assets/css/*.css'], {base: dist}) +gulp.task('cdn', function() { + 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', diff --git a/package.json b/package.json index c79aecdd..a4138fc4 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "kremalicious", "author": { - "name": "Matthias Kretschmann", - "email": "m@kretschmann.io" + "name": "Matthias Kretschmann", + "email": "m@kretschmann.io" }, "description": "Blog of Matthias Kretschmann", "homepage": "https://kremalicious.com", @@ -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"