m
/
blog
mirror of https://github.com/kremalicious/blog.git
1
0
Fork 0
Code

gulp setup for svg icon selection + sprite + png fallbacks

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`.
```bash
gulp server
gulp
```
### Production build

185
gulpfile.js
View File

@ -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',

12
package.json
View File

@ -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"