build refactor & cleanup

2024-12-23 01:30:01 +01:00 · 2015-11-20 15:53:49 +01:00 · 2015-11-20 15:53:49 +01:00 · 4edd24a687
commit 4edd24a687
parent 3845c14e79
4 changed files with 138 additions and 134 deletions
--- a/_config.dev.yml
+++ b/_config.dev.yml
@ -0,0 +1,3 @@
+
+# fix for jekyll-picture-tag always prepending site.url
+url: http://localhost:1337
--- a/_src/_includes/footer.html
+++ b/_src/_includes/footer.html
@ -54,7 +54,8 @@

 <script src="/assets/js/kremalicious3.min.js" async></script>

-<script>
+{% if jekyll.environment == "production" %}
+    <script>
        var _paq = _paq || [];
        _paq.push(['trackPageView']);
        _paq.push(['enableLinkTracking']);
@ -65,14 +66,15 @@
            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
            g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
        })();
-</script>
-<noscript><p><img src="//analytics.kremalicious.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
+    </script>
+    <noscript><p><img src="//analytics.kremalicious.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>

-<script>
+    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
        ga('create', 'UA-1441794-2', 'auto');
        ga('send', 'pageview');
-</script>
+    </script>
+{% endif %}
--- a/gulpfile.js
+++ b/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',
-    dist      = '_site',
-    cdn       = 'https://cdn.kremalicious.com',
-    s3bucket  = 'kremalicious.com',
-    s3path    = '/',
-    s3region  = 'eu-central-1';
+var SRC       = '_src',
+    DIST      = '_site',
+    CDN       = 'https://cdn.kremalicious.com',
+    S3BUCKET  = 'kremalicious.com',
+    S3PATH    = '/',
+    S3REGION  = 'eu-central-1';

 // icons
-var icons = {
+var ICONS = {
    entypo: {
-        src: src + '/_assets/icons/entypo/',
-        dist: dist + '/assets/img/',
+        src: SRC + '/_assets/icons/entypo/',
+        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 = {
-    dest: dist + '/assets/img/',
+var SPRITE = {
+    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 + '/.*', // delete all hidden files
-        '!' + dist + '/media/**'
-    ], cb)
+        DIST + '/**/*',
+        DIST + '/.*', // delete all hidden files
+        '!' + DIST + '/media/**'
+    ], 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/post-*.styl'
+            SRC + '/_assets/styl/kremalicious3.styl',
+            SRC + '/_assets/styl/post-*.styl'
        ])
+        .pipe($.sourcemaps.init())
        .pipe($.stylus({ 'include css': true })).on('error', onError)
-        .pipe($.autoprefixer({ browsers: 'last 2 versions' }))
-        .pipe($.if(isProduction, combineMq({ beautify: false }))).on('error', onError)
+        .pipe($.autoprefixer({ browsers: COMPATIBILITY }))
        .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($.connect.reload())
+        .pipe(gulp.dest(DIST + '/assets/css/'))
 });


@ -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(gulp.dest(dist + '/assets/js/'))
-        .pipe($.connect.reload())
+        .pipe($.if(!isProduction, $.sourcemaps.write()))
+        .pipe($.if(isProduction, $.header(BANNER, { pkg: pkg })))
+        .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/entypo/**/*'
+        SRC + '/_assets/img/**/*',
+        '!' + 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/**/*')
-        .pipe(gulp.dest(dist + '/assets/fonts/'))
+    return gulp.src(SRC + '/_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/**/*')
-        .pipe(gulp.dest(dist + '/media/'))
+    return gulp.src(SRC + '/_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() {
-
-    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}')
+    // globbing is slow so do everything conditionally for faster dev build
+    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}')
            .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 + '/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/'))
-        .pipe($.replace('/media/', cdn + '/media/'))
-        .pipe($.replace('https://kremalicious.com' + cdn + '/media/', 'https://kremalicious.com/media/'))
-        .pipe($.replace('../', cdn + '/assets/'))
-        .pipe(gulp.dest(dist))
+            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/'))
+        .pipe($.replace('/media/', CDN + '/media/'))
+        .pipe($.replace('https://kremalicious.com/media/', CDN + '/media/'))
+        .pipe($.replace('https://kremalicious.com' + CDN + '/media/', CDN + '/media/'))
+        .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 + '/' }),
-        media  = gulp.src(dist + '/media/**/*', { base: dist + '/' });
+    var assets = gulp.src(DIST + '/assets/**/*', { 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() {
-    return $.connect.server({
-        root: [dist],
-        livereload: true,
-        port: 1337
-    })
+gulp.task('server', function() {
+    browser.init({
+        server: DIST,
+        port: PORT
+    });
 });

-//
-// 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) {
-    runSequence(
-        'build',
-        ['watch', 'connect'],
-        cb
-    );
+gulp.task('default', ['build', 'server'], function() {
+    gulp.watch([SRC + '/_assets/styl/**/*.styl'], ['css', browser.reload]);
+    gulp.watch([SRC + '/_assets/js/*.js'], ['js', browser.reload]);
+    gulp.watch([SRC + '/_assets/img/**/*.{png,jpg,jpeg,gif}'], ['images', browser.reload]);
+    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',
-        ['css', 'js', 'images', 'icons', 'fonts', 'media'],
+        ['html', 'css', 'js', 'images', 'icons', 'fonts', 'media'],
        'rev',
        'rev:replace',
-        cb
+        done
    );
 });
--- a/package.json
+++ b/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",
-    "stylus": ">=0.45.0",
-    "vinyl": ">=0.4.6"
+    "run-sequence": ">=1.1.0"
  },
  "engines": {
    "node": ">=0.10.29"