m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2025-02-14 21:10:25 +01:00
Code

gulp setup for svg icon selection + sprite + png fallbacks

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-06-08 19:29:04 +02:00
parent d0a63d2c19
commit 3fff97953a
3 changed files with 146 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -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`. This generates the site and assets and starts a local dev server combined with a livereloading watch task under `http://localhost:1337`.
```bash ```bash
gulp server gulp
``` ```
### Production build ### Production build

185
gulpfile.js
View File

@ -1,4 +1,3 @@
// load plugins // load plugins
var $ = require('gulp-load-plugins')(); var $ = require('gulp-load-plugins')();
@ -29,10 +28,34 @@ console.log("");
// Config // Config
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// paths
var src = '_src', var src = '_src',
dist = '_site', dist = '_site',
cdn = 'https://d2jlreog722xe2.cloudfront.net'; 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 = [ var banner = [
'/**', '/**',
' ** <%= pkg.name %> v<%= pkg.version %>', ' ** <%= pkg.name %> v<%= pkg.version %>',
@ -72,21 +95,25 @@ gulp.task('clean', function(cb) {
// //
// Jekyll // Jekyll
// //
gulp.task('jekyll', function (cb){ gulp.task('jekyll', function(cb) {
var spawn = require('child_process').spawn; 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) { 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 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) { 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/kremalicious3.styl',
src + '/_assets/styl/poststyle-2300.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({ // .pipe($.uncss({
// html: [dist + '/**/*.html'], // html: [dist + '/**/*.html'],
// ignore: ['.in', '.collapsing'] // ignore: ['.in', '.collapsing']
// })) // }))
.pipe($.cssmin()) .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(gulp.dest(dist + '/assets/css/'))
.pipe($.connect.reload()); .pipe($.connect.reload());
}); });
@ -122,41 +160,80 @@ gulp.task('css', function() {
gulp.task('js-libraries', function() { gulp.task('js-libraries', function() {
var jquery = gulp.src('node_modules/jquery/dist/jquery.js'), var jquery = gulp.src('node_modules/jquery/dist/jquery.js'),
picturefill = gulp.src('node_modules/picturefill/dist/picturefill.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($.uglify())
.pipe($.rename({suffix: '.min'})) .pipe($.rename({
suffix: '.min'
}))
.pipe(gulp.dest(dist + '/assets/js/')) .pipe(gulp.dest(dist + '/assets/js/'))
}); });
// Project js // Project js
gulp.task('js-project', function() { gulp.task('js-project', function() {
return gulp.src([ return gulp.src([
'node_modules/masonry-layout/dist/masonry.pkgd.js', 'node_modules/masonry-layout/dist/masonry.pkgd.js',
'node_modules/imagesloaded/imagesloaded.js', 'node_modules/imagesloaded/imagesloaded.js',
'bower_components/simple-jekyll-search/dest/jekyll-search.js', 'bower_components/simple-jekyll-search/dest/jekyll-search.js',
'bower_components/time-elements/time-elements.js', 'bower_components/time-elements/time-elements.js',
src + '/_assets/js/*.js' src + '/_assets/js/*.js'
]) ])
.pipe($.uglify()) .pipe($.uglify())
.pipe($.concat('kremalicious3.min.js')) .pipe($.concat('kremalicious3.min.js'))
.pipe($.header(banner, {pkg: pkg})) .pipe($.header(banner, {
.pipe(gulp.dest(dist + '/assets/js/')) pkg: pkg
.pipe($.connect.reload()); }))
.pipe(gulp.dest(dist + '/assets/js/'))
.pipe($.connect.reload());
}); });
// Collect all script tasks // Collect all script tasks
gulp.task('js', ['js-libraries', 'js-project']); 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 // Copy images
// //
gulp.task('images', function() { 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(gulp.dest(dist + '/assets/img/'))
.pipe($.connect.reload()); .pipe($.connect.reload());
}); });
@ -164,9 +241,9 @@ gulp.task('images', function() {
// Copy fonts // Copy fonts
// //
gulp.task('fonts', function() { gulp.task('fonts', function() {
return gulp.src(src + '/_assets/fonts/**/*') return gulp.src(src + '/_assets/fonts/**/*')
.pipe(gulp.dest(dist + '/assets/fonts/')) .pipe(gulp.dest(dist + '/assets/fonts/'))
.pipe($.connect.reload()); .pipe($.connect.reload());
}); });
@ -174,26 +251,28 @@ gulp.task('fonts', function() {
// Copy media // Copy media
// //
gulp.task('media', function() { gulp.task('media', function() {
return gulp.src(src + '/_media/**/*') return gulp.src(src + '/_media/**/*')
.pipe(gulp.dest(dist + '/media/')) .pipe(gulp.dest(dist + '/media/'))
.pipe($.connect.reload()); .pipe($.connect.reload());
}); });
// //
// Image optimization // Image optimization
// //
gulp.task('imagemin', function () { gulp.task('imagemin', function() {
return gulp.src([ return gulp.src([
dist + '/**/*.{png,jpg,jpeg,gif,svg}', dist + '/**/*.{png,jpg,jpeg,gif,svg}',
'!' + dist + '/media/**/*' '!' + dist + '/media/**/*'
]) ])
.pipe($.cache($.imagemin({ .pipe($.cache($.imagemin({
optimizationLevel: 5, // png optimizationLevel: 5, // png
progressive: true, // jpg progressive: true, // jpg
interlaced: true, // gif interlaced: true, // gif
multipass: true, // svg multipass: true, // svg
svgoPlugins: [{removeViewBox: false}] svgoPlugins: [{
removeViewBox: false
}]
}))) })))
.pipe(gulp.dest(dist)); .pipe(gulp.dest(dist));
}); });
@ -202,7 +281,7 @@ gulp.task('imagemin', function () {
// //
// Revision static assets // 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}') return gulp.src(dist + '/assets/**/*.{css,js,png,jpg,jpeg,svg,eot,ttf,woff}')
.pipe($.rev()) .pipe($.rev())
.pipe(gulp.dest(dist + '/assets/')) .pipe(gulp.dest(dist + '/assets/'))
@ -221,7 +300,9 @@ gulp.task('revision-replace', function() {
var manifest = gulp.src(dist + '/assets/rev-manifest.json'); 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}') 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)); .pipe(gulp.dest(dist));
}); });
@ -229,8 +310,10 @@ gulp.task('revision-replace', function() {
// //
// CDN url injection // CDN url injection
// //
gulp.task('cdn',function(){ 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/css/', cdn + '/assets/css/'))
.pipe($.replace('/assets/js/', cdn + '/assets/js/')) .pipe($.replace('/assets/js/', cdn + '/assets/js/'))
.pipe($.replace('/assets/img/', cdn + '/assets/img/')) .pipe($.replace('/assets/img/', cdn + '/assets/img/'))
@ -258,7 +341,8 @@ gulp.task('connect', function() {
gulp.task('watch', function() { gulp.task('watch', function() {
gulp.watch([src + '/_assets/styl/**/*.styl'], ['css']); gulp.watch([src + '/_assets/styl/**/*.styl'], ['css']);
gulp.watch([src + '/_assets/js/*.js'], ['js-project']); 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 + '/_media/**/*'], ['media']);
gulp.watch([src + '/**/*.{html,xml,json,txt}'], ['jekyll-build']); gulp.watch([src + '/**/*.{html,xml,json,txt}'], ['jekyll-build']);
}); });
@ -267,10 +351,13 @@ gulp.task('watch', function() {
// Task sequences // Task sequences
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// All assets tasks
gulp.task('assets', ['css', 'js', 'icons', 'images', 'fonts', 'media']);
gulp.task('jekyll-build', function(cb) { gulp.task('jekyll-build', function(cb) {
runSequence( runSequence(
'jekyll', 'jekyll',
['css', 'js', 'images', 'fonts', 'media'], 'assets',
cb cb
); );
}); });
@ -278,8 +365,9 @@ gulp.task('jekyll-build', function(cb) {
// //
// Dev Server // Dev Server
// //
gulp.task('server', function(cb) { gulp.task('default', function(cb) {
runSequence( runSequence(
'clean',
'jekyll-build', 'jekyll-build',
'watch', 'watch',
'connect', 'connect',
@ -294,7 +382,8 @@ gulp.task('build', function(cb) {
runSequence( runSequence(
'clean', 'clean',
'jekyll:production', 'jekyll:production',
['css', 'js', 'images', 'fonts', 'media'], 'assets',
'svg-fallbacks',
'revision', 'revision',
'revision-replace', 'revision-replace',
'cdn', 'cdn',

12
package.json
View File

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