build refactor & cleanup

_config.dev.yml

@@ -0,0 +1,3 @@
+
+# fix for jekyll-picture-tag always prepending site.url
+url: http://localhost:1337

_src/_includes/footer.html

@@ -54,6 +54,7 @@
 
 <script src="/assets/js/kremalicious3.min.js" async></script>
 
+{% if jekyll.environment == "production" %}
     <script>
         var _paq = _paq || [];
         _paq.push(['trackPageView']);
@@ -76,3 +77,4 @@
         ga('create', 'UA-1441794-2', 'auto');
         ga('send', 'pageview');
     </script>
+{% endif %}

gulpfile.js

@@ -8,7 +8,7 @@ var gulp = require('gulp'),
     merge = require('merge-stream'),
     pkg = require('./package.json'),
     parallelize = require('concurrent-transform'),
-    combineMq = require('gulp-combine-mq');
+    browser = require('browser-sync');
 
 // Temporary solution until gulp 4
 // https://github.com/gulpjs/gulp/issues/355
@@ -40,19 +40,25 @@ console.log("");
 // Config
 // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
+// Port to use for the development server.
+var PORT = 1337;
+
+// Browsers to target when prefixing CSS.
+var COMPATIBILITY = ['last 2 versions', 'ie >= 9'];
+
 // paths
-var src       = '_src',
+var SRC       = '_src',
-    dist      = '_site',
+    DIST      = '_site',
-    cdn       = 'https://cdn.kremalicious.com',
+    CDN       = 'https://cdn.kremalicious.com',
-    s3bucket  = 'kremalicious.com',
+    S3BUCKET  = 'kremalicious.com',
-    s3path    = '/',
+    S3PATH    = '/',
-    s3region  = 'eu-central-1';
+    S3REGION  = 'eu-central-1';
 
 // icons
-var icons = {
+var ICONS = {
     entypo: {
-        src: src + '/_assets/icons/entypo/',
+        src: SRC + '/_assets/icons/entypo/',
-        dist: dist + '/assets/img/',
+        dist: DIST + '/assets/img/',
         prefix: 'entypo-',
         icons: [
             'twitter', 'facebook', 'google+', 'magnifying-glass', 'menu', 'rss', 'link', 'arrow-with-circle-down', 'forward', 'heart', 'info-with-circle', 'infinity', 'github', 'chevron-right', 'chevron-left', 'eye'
@@ -60,9 +66,16 @@ var icons = {
     }
 }
 
+var iconset = ICONS.entypo;
+
+// Iterate through the icon set array
+iconset.icons.forEach(function(icon, i, icons) {
+    icons[i] = iconset.src + icon + '.svg';
+});
+
 // SVG sprite
-var spriteConfig = {
+var SPRITE = {
-    dest: dist + '/assets/img/',
+    dest: DIST + '/assets/img/',
     mode: {
         symbol: {
             dest: './',
@@ -72,7 +85,7 @@ var spriteConfig = {
 }
 
 // code banner
-var banner = [
+var BANNER = [
     '/**',
     ' ** <%= pkg.name %> v<%= pkg.version %>',
     ' ** <%= pkg.description %>',
@@ -99,12 +112,12 @@ var banner = [
 //
 // Delete build artifacts
 //
-gulp.task('clean', function(cb) {
+gulp.task('clean', function(done) {
     return del([
-        dist + '/**/*',
+        DIST + '/**/*',
-        dist + '/.*', // delete all hidden files
+        DIST + '/.*', // delete all hidden files
-        '!' + dist + '/media/**'
+        '!' + DIST + '/media/**'
-    ], cb)
+    ], done)
 });
 
 
@@ -115,9 +128,9 @@ gulp.task('jekyll', function(cb) {
     var spawn = require('child_process').spawn;
 
     if (isProduction) {
-        var jekyll = spawn('bundle', ['exec', 'jekyll', 'build', '--lsi'], { stdio: 'inherit' });
+        var jekyll = spawn('bundle', ['exec', 'jekyll', 'build', '--lsi', 'JEKYLL_ENV=production'], { stdio: 'inherit' });
     } else {
-        var jekyll = spawn('bundle', ['exec', 'jekyll', 'build', '--drafts', '--future', '--incremental'], { stdio: 'inherit' });
+        var jekyll = spawn('bundle', ['exec', 'jekyll', 'build', '--config', '_config.yml,_config.dev.yml', '--drafts', '--future', '--incremental'], { stdio: 'inherit' });
     }
 
     jekyll.on('exit', function(code) {
@@ -130,7 +143,7 @@ gulp.task('jekyll', function(cb) {
 // HTML
 //
 gulp.task('html', function() {
-    return gulp.src(dist + '/**/*.html')
+    return gulp.src(DIST + '/**/*.html')
         .pipe($.if(isProduction, $.htmlmin({
             collapseWhitespace: true,
             conservativeCollapse: true,
@@ -140,7 +153,7 @@ gulp.task('html', function() {
             removeRedundantAttributes: true,
             removeEmptyAttributes: true
         })))
-        .pipe(gulp.dest(dist))
+        .pipe(gulp.dest(DIST))
 });
 
 
@@ -149,17 +162,17 @@ gulp.task('html', function() {
 //
 gulp.task('css', function() {
     return gulp.src([
-            src + '/_assets/styl/kremalicious3.styl',
+            SRC + '/_assets/styl/kremalicious3.styl',
-            src + '/_assets/styl/post-*.styl'
+            SRC + '/_assets/styl/post-*.styl'
         ])
+        .pipe($.sourcemaps.init())
         .pipe($.stylus({ 'include css': true })).on('error', onError)
-        .pipe($.autoprefixer({ browsers: 'last 2 versions' }))
+        .pipe($.autoprefixer({ browsers: COMPATIBILITY }))
-        .pipe($.if(isProduction, combineMq({ beautify: false }))).on('error', onError)
         .pipe($.if(isProduction, $.cssmin()))
-        .pipe($.if(isProduction, $.header(banner, { pkg: pkg })))
+        .pipe($.if(!isProduction, $.sourcemaps.write()))
+        .pipe($.if(isProduction, $.header(BANNER, { pkg: pkg })))
         .pipe($.rename({ suffix: '.min' }))
-        .pipe(gulp.dest(dist + '/assets/css/'))
+        .pipe(gulp.dest(DIST + '/assets/css/'))
-        .pipe($.connect.reload())
 });
 
 
@@ -170,22 +183,23 @@ gulp.task('css', function() {
 // Libraries
 gulp.task('js:libraries', function() {
     return gulp.src([
-            'node_modules/picturefill/dist/picturefill.js'
+            'node_modules/picturefill/DIST/picturefill.js'
         ])
         .pipe($.if(isProduction, $.uglify())).on('error', onError)
         .pipe($.rename({ suffix: '.min'}))
-        .pipe(gulp.dest(dist + '/assets/js/'))
+        .pipe(gulp.dest(DIST + '/assets/js/'))
 });
 
 // Project js
 gulp.task('js:project', function() {
-    return gulp.src(src + '/_assets/js/app.js')
+    return gulp.src(SRC + '/_assets/js/app.js')
         .pipe($.include()).on('error', onError)
+        .pipe($.sourcemaps.init())
         .pipe($.concat('kremalicious3.min.js'))
         .pipe($.if(isProduction, $.uglify())).on('error', onError)
-        .pipe($.if(isProduction, $.header(banner, { pkg: pkg })))
+        .pipe($.if(!isProduction, $.sourcemaps.write()))
-        .pipe(gulp.dest(dist + '/assets/js/'))
+        .pipe($.if(isProduction, $.header(BANNER, { pkg: pkg })))
-        .pipe($.connect.reload())
+        .pipe(gulp.dest(DIST + '/assets/js/'))
 });
 
 // Collect all script tasks
@@ -196,19 +210,12 @@ gulp.task('js', ['js:libraries', 'js:project'])
 // Icons
 //
 gulp.task('icons', 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($.if(isProduction, $.imagemin({ svgoPlugins: [{ removeViewBox: false }] })))
-        .pipe($.svgSprite(spriteConfig))
+        .pipe($.svgSprite(SPRITE))
         .pipe(gulp.dest(iconset.dist))
 });
 
@@ -218,8 +225,8 @@ gulp.task('icons', function() {
 //
 gulp.task('images', function() {
     return gulp.src([
-        src + '/_assets/img/**/*',
+        SRC + '/_assets/img/**/*',
-        '!' + src + '/_assets/img/entypo/**/*'
+        '!' + SRC + '/_assets/img/entypo/**/*'
     ])
     .pipe($.if(isProduction, $.imagemin({
         optimizationLevel: 5, // png
@@ -228,7 +235,7 @@ gulp.task('images', function() {
         multipass: true, // svg
         svgoPlugins: [{ removeViewBox: false }]
     })))
-    .pipe(gulp.dest(dist + '/assets/img/'))
+    .pipe(gulp.dest(DIST + '/assets/img/'))
 });
 
 
@@ -236,8 +243,8 @@ gulp.task('images', function() {
 // Copy fonts
 //
 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/'))
 });
 
 
@@ -245,8 +252,8 @@ gulp.task('fonts', function() {
 // Copy media
 //
 gulp.task('media', function() {
-    return gulp.src(src + '/_media/**/*')
+    return gulp.src(SRC + '/_media/**/*')
-        .pipe(gulp.dest(dist + '/media/'))
+        .pipe(gulp.dest(DIST + '/media/'))
 });
 
 
@@ -254,12 +261,15 @@ gulp.task('media', function() {
 // Revision static assets
 //
 gulp.task('rev', function() {
-    return gulp.src(dist + '/assets/**/*.{css,js,png,jpg,jpeg,svg,eot,ttf,woff}')
+    // globbing is slow so do everything conditionally for faster dev build
+    if (isProduction) {
+        return gulp.src(DIST + '/assets/**/*.{css,js,png,jpg,jpeg,svg,eot,ttf,woff}')
             .pipe($.if(isProduction, $.rev()))
-        .pipe(gulp.dest(dist + '/assets/'))
+            .pipe(gulp.dest(DIST + '/assets/'))
             // output rev manifest for next replace task
             .pipe($.if(isProduction, $.rev.manifest()))
-        .pipe(gulp.dest(dist + '/assets/'))
+            .pipe(gulp.dest(DIST + '/assets/'))
+    }
 });
 
 
@@ -268,12 +278,13 @@ gulp.task('rev', function() {
 // from a manifest file
 //
 gulp.task('rev:replace', function() {
-
+    // globbing is slow so do everything conditionally for faster dev build
-    var manifest = gulp.src(dist + '/assets/rev-manifest.json');
+    if (isProduction) {
-
+        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($.if(isProduction, $.revReplace({ manifest: manifest })))
-        .pipe(gulp.dest(dist))
+            .pipe(gulp.dest(DIST))
+    }
 });
 
 
@@ -282,16 +293,17 @@ gulp.task('rev:replace', function() {
 //
 gulp.task('cdn', function() {
     return gulp.src([
-            dist + '/**/*.html',
+            DIST + '/**/*.html',
-            dist + '/assets/css/*.css'
+            DIST + '/assets/css/*.css'
-        ], { base: dist })
+        ], { 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/'))
-        .pipe($.replace('/media/', cdn + '/media/'))
+        .pipe($.replace('/media/', CDN + '/media/'))
-        .pipe($.replace('https://kremalicious.com' + cdn + '/media/', 'https://kremalicious.com/media/'))
+        .pipe($.replace('https://kremalicious.com/media/', CDN + '/media/'))
-        .pipe($.replace('../', cdn + '/assets/'))
+        .pipe($.replace('https://kremalicious.com' + CDN + '/media/', CDN + '/media/'))
-        .pipe(gulp.dest(dist))
+        .pipe($.replace('../', CDN + '/assets/'))
+        .pipe(gulp.dest(DIST))
 });
 
 
@@ -301,11 +313,11 @@ gulp.task('cdn', function() {
 gulp.task('s3:assets', function() {
     var publisher = $.awspublish.create({
         params: {
-            'Bucket': s3bucket
+            'Bucket': S3BUCKET
         },
         'accessKeyId': process.env.AWS_ACCESS_KEY_ID,
         'secretAccessKey': process.env.AWS_SECRET_ACCESS_KEY,
-        'region': s3region
+        'region': S3REGION
     });
 
     // define custom headers
@@ -314,8 +326,8 @@ gulp.task('s3:assets', function() {
         'x-amz-acl': 'public-read'
     };
 
-    var assets = gulp.src(dist + '/assets/**/*', { base: dist + '/' }),
+    var assets = gulp.src(DIST + '/assets/**/*', { base: DIST + '/' }),
-        media  = gulp.src(dist + '/media/**/*', { base: dist + '/' });
+        media  = gulp.src(DIST + '/media/**/*', { base: DIST + '/' });
 
     return merge(assets, media)
         .pipe($.rename(function (path) {
@@ -333,25 +345,13 @@ gulp.task('s3:assets', function() {
 //
 // Dev Server
 //
-gulp.task('connect', function() {
+gulp.task('server', function() {
-    return $.connect.server({
+    browser.init({
-        root: [dist],
+        server: DIST,
-        livereload: true,
+        port: PORT
-        port: 1337
+    });
-    })
 });
 
-//
-// Watch task
-//
-gulp.task('watch', function() {
-    gulp.watch([src + '/_assets/styl/**/*.styl'], ['css'])
-    gulp.watch([src + '/_assets/js/*.js'], ['js'])
-    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,md}'], ['build'])
-});
 
 // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 // Task sequences
@@ -359,21 +359,22 @@ gulp.task('watch', function() {
 
 
 //
-// Dev Server
+// Build site, run server, and watch for file changes
 //
-gulp.task('default', function(cb) {
+gulp.task('default', ['build', 'server'], function() {
-    runSequence(
+    gulp.watch([SRC + '/_assets/styl/**/*.styl'], ['css', browser.reload]);
-        'build',
+    gulp.watch([SRC + '/_assets/js/*.js'], ['js', browser.reload]);
-        ['watch', 'connect'],
+    gulp.watch([SRC + '/_assets/img/**/*.{png,jpg,jpeg,gif}'], ['images', browser.reload]);
-        cb
+    gulp.watch([SRC + '/_assets/img/**/*.{svg}'], ['icons', browser.reload]);
-    );
+    gulp.watch([SRC + '/_media/**/*'], ['media', browser.reload]);
+    gulp.watch([SRC + '/**/*.{html,xml,json,txt,md}', './*.yml'], ['build', browser.reload]);
 });
 
 
 //
 // Full build
 //
-gulp.task('build', function(cb) {
+gulp.task('build', function(done) {
 
     console.log(chalk.gray("         ------------------------------------------"));
     console.log(chalk.green('                Building ' + ($.util.env.production ? 'production' : 'dev') + ' version...'));
@@ -382,10 +383,9 @@ gulp.task('build', function(cb) {
     runSequence(
         'clean',
         'jekyll',
-        //'html',
+        ['html', 'css', 'js', 'images', 'icons', 'fonts', 'media'],
-        ['css', 'js', 'images', 'icons', 'fonts', 'media'],
         'rev',
         'rev:replace',
-        cb
+        done
     );
 });

package.json

@@ -1,14 +1,18 @@
 {
   "name": "kremalicious",
+  "version": "3.0.0",
   "author": {
     "name": "Matthias Kretschmann",
     "email": "m@kretschmann.io"
   },
   "description": "Blog of Matthias Kretschmann",
   "homepage": "https://kremalicious.com",
-  "version": "3.0.0",
   "license": "MIT",
   "main": "gulpfile.js",
+  "scripts": {
+    "start": "gulp",
+    "build": "gulp build --production"
+  },
   "dependencies": {
     "jquery": ">=2.1.4",
     "normalize-css": ">=2.3.1",
@@ -18,16 +22,14 @@
     "webcomponents.js": ">=0.7.1"
   },
   "devDependencies": {
+    "browser-sync": ">=2.10.0",
     "chalk": ">=1.0.0",
     "concurrent-transform": ">=1.0.0",
     "del": ">=1.2.0",
     "gulp": ">=3.8.0",
     "gulp-autoprefixer": ">=2.3.0",
     "gulp-awspublish": ">=2.0.2",
-    "gulp-cache": ">=0.2.10",
-    "gulp-combine-mq": ">=0.4.0",
     "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",
@@ -41,15 +43,12 @@
     "gulp-rev": ">=4.0.0",
     "gulp-rev-replace": ">=0.4.1",
     "gulp-stylus": ">=2.0.3",
+    "gulp-sourcemaps": ">=1.6.0",
     "gulp-svg-sprite": ">=1.2.2",
-    "gulp-svg2png": ">=0.3.0",
     "gulp-uglify": ">=1.2.0",
-    "gulp-uncss": ">=1.0.1",
     "gulp-util": ">=3.0.6",
     "merge-stream": ">=0.1.7",
-    "run-sequence": ">=1.1.0",
+    "run-sequence": ">=1.1.0"
-    "stylus": ">=0.45.0",
-    "vinyl": ">=0.4.6"
   },
   "engines": {
     "node": ">=0.10.29"