Kirby CMS gulpfile

gulpfile.js

// dont really know if it makes such a difference but strict kept giving me warnings on Atom
/* jshint strict: false */
// 'use strict';

var gulp = require('gulp'),
fs = require('fs'),
hash = require('gulp-hash'),
critical = require('critical');

// load plugins
var $ = require('gulp-load-plugins')({
     pattern: '*',
     rename: {
         'gulp-gm': 'gm',
         'run-sequence': 'runSequence',
         'browserSync': 'browser-sync'
        }
   }
);

// preprocess less
gulp.task('less', function () {
  return gulp.src('app/assets/css/less/*.less')
    .pipe($.sourcemaps.init())
    .pipe($.less())
    .pipe($.concat('less.css', {newLine: ''}))
    .pipe($.notify('LESS Updated!'))
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest('app/assets/css/'));
});

// preprocess sass
gulp.task('sass', function () {
  return gulp.src('app/assets/css/*.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({outputStyle: 'expanded'}).on('error', $.sass.logError))
    .pipe($.concat('sass.css', {newLine: ''}))
    .pipe($.notify('SASS Updated!'))
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest('app/assets/css/'));
});

gulp.task('styles', ['sass','less'], function() {
  return gulp.src(['app/assets/css/*.css', '!app/assets/css/main.css'])
    .pipe($.concat('main.css'))
    .pipe($.notify('MAIN CSS Updated!'))
    .pipe($.csso())
    .pipe($.autoprefixer({
      browsers: ['last 2 versions'],
      cascade: true
      }))
    .pipe($.buffer())
    .pipe($.if('**/main.css', hash()))
    .pipe(gulp.dest('./dist/assets/css'))
    .pipe(hash.manifest('styles-manifest.json')) // Switch to the manifest file
    .pipe(gulp.dest('dist')); // Write the manifest file
});

// minify and concat all scripts
gulp.task('scripts', ['defer'], function(){
    return gulp.src(['app/assets/js/vendor/jquery-*.js','app/assets/js/vendor/jquery.smoothState.min.js','app/assets/js/vendor/nprogress.min.js', '!app/assets/js/vendor/vendor.js'])
        .pipe($.concat('vendor.js'))
        .pipe($.notify('VENDOR JS Updated!'))
        .pipe(gulp.dest('./app/assets/js/vendor/'))
        .pipe($.uglify())
        .pipe($.rename('vendor.min.js'))
        .pipe(hash())
        .pipe(gulp.dest('./dist/assets/js/vendor/'))
        .pipe(hash.manifest('scripts-manifest.json')) // Switch to the manifest file
        .pipe(gulp.dest('dist')) // Write the manifest file
        .pipe($.size());
});

// minify and concat the scripts that can be loaded defered
gulp.task('defer', function(){
    return gulp.src(['app/assets/js/defer/*.js', '!app/assets/js/defer/defer.js'])
        .pipe($.concat('defer.js'))
        .pipe(gulp.dest('./app/assets/js/defer/'))
        .pipe($.uglify())
        .pipe($.rename('defer.min.js'))
        .pipe($.notify('DEFER JS Updated!'))
        .pipe(hash())
        .pipe(gulp.dest('./dist/assets/js/defer/'))
        .pipe(hash.manifest('scripts-manifest.json')) // Switch to the manifest file
        .pipe(gulp.dest('dist')) // Write the manifest file
        .pipe($.size());
});

// adjust the javascript and css links so they match their minified and chache busted version (via regex)
// for doing this we read the mapping files in the dist/ folder (scripts-mainfest, styles-manifest)
// examples:
// vendor.js => vendor.min-554bb67f.js
// defer.js => defer.min-0f41e51e.js
// main.css => main-eb4efaf0.css
gulp.task('rewrite', function(){
    var styles = JSON.parse(fs.readFileSync('dist/styles-manifest.json', 'utf8'));
    var scripts = JSON.parse(fs.readFileSync('dist/scripts-manifest.json', 'utf8'));
    return gulp.src(['dist/site/snippets/footer.php', 'dist/site/snippets/header.php'], { base: './' })
        .pipe($.if('**/footer.php', $.replace(/<\?php.*echo.*js\(\'assets\/js\/vendor\/vendor\.js\'.*\).*\?>/g, '<?php echo js(\"assets/js/vendor/' + scripts["vendor.min.js"]  + '\") ?>')))
        .pipe($.if('**/footer.php', $.replace(/<\?php.*echo.*js\(\'assets\/js\/defer\/defer\.js\'.*\).*\?>/g, '<?php echo js(\"assets/js/defer/' + scripts["defer.min.js"] + '\", true) ?>')))
        .pipe($.if('**/header.php', $.replace(/<\?php.*echo.*css\(\'assets\/css\/main.css\'.*\).*\?>/g, '<?php echo css(\"assets/css/' + styles["main.css"] + '\") ?>')))
        .pipe(gulp.dest('./')); //Write the file back to the same spot.
});

// requires graphicsmagick http://www.graphicsmagick.org/download.html on your machine
// careful your images will get overwritten ()
// brew install graphicsmagick
gulp.task('imageResize', function() {
  gulp.src(['app/assets/images/**/*.jpg', 'app/assets/images/**/*.png'])
    .pipe($.gm(function (gmfile) {
      return gmfile.resize(1920);
    }))
    .pipe(gulp.dest('app/assets/images/'));
});

gulp.task('images', function () {
    return gulp.src('app/assets/images/**/*')
        .pipe($.size({title: 'Image size', showFiles: 'true'}))
        .pipe($.cache($.imagemin({
            optimizationLevel: 5,
            progressive: true,
            interlaced: true
        })))
        .pipe(gulp.dest('dist/assets/images'))
        .pipe($.size({title: 'Image size after compression', showFiles: 'true'}));
});

gulp.task('copy', function () {
  return gulp.src([
    'app/**/*',
    '!app/assets/js/custom.js',
    '!app/assets/js/vendor/*',
    '!app/assets/js/*',
    '!app/assets/js/defer/*',
    '!app/assets/images/**/*.*',
    '!app/assets/css/**/*',
    ],{
     dot:true
    }).pipe(gulp.dest('dist'))
      .pipe($.size({title: 'Copy'}));
});

// generate index.html via curl for inlining the above the fold css
gulp.task('generate-index', function() {
  return $.run('curl http://localhost:3000/dist/ > dist/index.html').exec();
});

// inline the above the fold and output the generated css into inline.css
gulp.task('critical', ['generate-index'], function (cb) {
    var data = JSON.parse(fs.readFileSync('dist/styles-manifest.json', 'utf8'));
    critical.generate({
        inline: false,
        base: 'dist/',
        css: ['dist/assets/css/' + data['main.css']],
        src: 'index.html',
        dest: 'assets/css/inline.css',
        assetPaths: '/assets/',
        minify: true,
        width: 375,
        height: 600,
        ignore: ['@font-face']
    });
    cb(); // doesnt go to delOutput and delCurl without this one
});

// Optimize web fonts
gulp.task('fonts', function () {
    return gulp.src('app/assets/fonts/*')
        .pipe($.filter('**/*.{eot,svg,ttf,woff}'))
        .pipe($.flatten())
        .pipe(gulp.dest('dist/assets/fonts'))
        .pipe($.size());
});

// Clean dist directory
gulp.task('clean', $.del.bind(null, ['dist']));

// delete the output folder which curl creates
gulp.task('delOutput', $.del.bind(null, ['output']));

// delete the index.html from curl, the above didnt seem to touch it
// just found it a bit annoying, really
gulp.task('delCurl', function () {
  return $.del([
    './dist/index.html'
  ]);
});

// Build Production Files, the Default Task
gulp.task('build', ['clean'], function (cb) {
  $.runSequence(['styles', 'fonts', 'images', 'copy', 'scripts'], ['rewrite','critical'], ['delOutput','delCurl'], cb);
});

gulp.task('default',  function () {
    console.log('Please choose npm run build or npm run serve');
});

gulp.task('open', ['styles', 'scripts'], function () {
    require('opn')('http://kirby_andi.dev');
});

gulp.task('dev', $.shell.task([
  'php -S kirby_andi.dev:3000',
  'echo "completed"'
  ],{
    verbose: true
}));

gulp.task('watch', function() {
    // watch for changes
    gulp.watch([
        'app/assets/css/**/*.css',
        'app/assets/js/**/*.js',
        'app/**/*.php'
    ]).on('change', $.browserSync.reload);

    gulp.watch('app/assets/css/**/*.scss', ['sass']);
    gulp.watch('app/assets/css/**/*.less', ['less']);
    gulp.watch('app/assets/images/**/*', ['images']);
    gulp.watch(['app/assets/js/**/*.js'], ['scripts']);
});

gulp.task('serve', function () {
  $.browserSync({
    proxy: "kirby_andi.dev/app",
    port: 3000
  });

  // watch for changes
  gulp.watch([
    'app/assets/css/*.css',
    'app/assets/js/**/*.js',
    'app/**/*.php',
    'app/**/*.md',
    'app/**/*.txt'
  ]).on('change', $.browserSync.reload);

  gulp.watch('app/assets/css/**/*.scss', ['sass']);
  gulp.watch('app/assets/css/**/*.scss', ['less']);
  gulp.watch('app/assets/images/**/*', ['images']);
  gulp.watch('app/assets/js/**/*.js', ['scripts']);
});

package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "devDependencies": {
    "browser-sync": "^2.12.3",
    "critical": "^0.8.0",
    "del": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-cache": "^0.4.4",
    "gulp-concat": "^2.6.0",
    "gulp-csso": "^0.2.6",
    "gulp-filter": "^0.5.0",
    "gulp-flatten": "^0.0.2",
    "gulp-if": "^1.2.1",
    "gulp-imagemin": "^2.4.0",
    "gulp-jshint": "^1.5.3",
    "gulp-load-plugins": "^1.2.2",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.5.4",
    "gulp-sass": "^2.2.0",
    "gulp-shell": "^0.5.2",
    "gulp-size": "^2.1.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.5.3",
    "gulp-useref": "^3.0.8",
    "gulp-util": "^3.0.7",
    "gulp-buffer": "0.0.2",
    "gulp-hash": "^3.1.0",
    "gulp-rev": "^7.1.2",
    "gulp-run": "^1.7.1",
    "jshint-stylish": "^0.2.0",
    "lazypipe": "^0.2.1",
    "opn": "^0.1.1",
    "run-sequence": "^1.1.5",
    "vinyl-ftp": "^0.4.5"
  },
  "scripts": {
    "start": "gulp serve",
    "build": "gulp build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
    "dd",
    "dmd"
  ],
  "author": "",
  "bugs": {
    "url": ""
  },
  "homepage": ""
}

snippet footer.php

	<!-- footer -->

	<!-- scripts -->
	<?php echo js('assets/scripts/vendor/vendor.js', false); ?>
	<?php echo js('assets/scripts/defer/defer.js', true); ?>
	<!-- endscripts -->

</body>
</html>

snippet header.php

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1.0">

  <title></title>
  <meta name="description" content="">
  <meta name="keywords" content="">

  <?php snippet('inline') ?>

  <?php echo css('assets/css/main.css') ?>

</head>
<body>

snippet inline.php

	<?php 
		$filename = kirby()->roots()->assets() . DS . 'css' . DS . 'inline.css';

		if (file_exists($filename)) 
		{
			echo '<style>';
			echo (file_get_contents( $filename ));
			echo '</style>';
		}
	?>