Gulpfile

gulpfile.js

// TODO: Optimize images with responsiveness.
// TODO: Optimize audio and video.
// TODO: Inline critical css.

/*  gulpfile.js
 *
 *  This is Tempurturtul's gulpfile. It makes a few assumptions about folder
 *  structure and requires some markup on html files. Currently handles
 *  automation of front-end tasks only.
 *
 *  Requirements:
 *    Folder Structure:
 *      - Client-side files placed in directory defined by SRC.
 *      - Images placed in arbitrarily deep subdirectory named 'images',
 *        'image', or 'img'.
 *      - Audio placed in arbitrarily deep subdirectory named 'sounds', 'sound',
 *        or 'audio'.
 *      - Videos placed in arbitrarily deep subdirectory named 'videos' or
 *        'video'.
 *      - If using bower, default bower_components directory used.
 *      - NOTE: A folder defined by DIST will be automatically created and
 *        subject to automated deletion. This folder will contain production
 *        files.
 *    HTML Markup:
 *      - Insert usemin build blocks around external .js and .css resources that
 *        need to be included in the production files.
 *        - This renames files and concatenates them if there are multiple in
 *          the same block.
 *        - If this is not done, the resources will not exist among the
 *          production files.
 *        - Example:
 *          - <!-- build:css combined.css -->
 *          - <link rel="stylesheet" href="styles/normalize.css">
 *          - <link rel="stylesheet" href="styles/main.css">
 *          - <!-- endbuild -->
 */

/*  Tasks:
 *    lint:js           (Lint JavaScript.)
 *    lint:json         (Lint JSON.)
 *    lint              (Run all lint tasks and watch for files to re-lint.)
 *    clean             (Delete dist files.)
 *    build             (Build dist files.)
 *    serve             (Serve src files and watch for files to reload.)
 *    serve:dist        (Serve dist files and watch for files to reload.)
 *    serve:tunnelled   (Serve dist files and tunnel to a random public url.)
 *    psi:desktop       (Test desktop performance and report results.)
 *    psi:mobile        (Test mobile performance and report results.)
 *    psi               (Run all psi tasks.)
 *    deploy:gh-pages   (Deploy dist files to gh-pages.)
 *    default           (Lint and serve.)
 */

var SRC = 'src';
var DIST = 'dist';

var lintableJS = [
  'gulpfile.js',
  SRC + '/**/*.js'
];
var lintableJSON = [
  'package.json',
  'bower.json',
  SRC + '/**/*.json'
];

var bowerFiles = [
  'bower_components/**/*'
];

var htmlFiles = [
  SRC + '/**/*.html'
];
var cssFiles = [
  SRC + '/**/*.css'
];
var jsFiles = [
  SRC + '/**/*.js'
];
var imageFiles = [
  SRC + '/**/images/**/*',
  SRC + '/**/image/**/*',
  SRC + '/**/img/**/*'
];
var audioFiles = [
  SRC + '/**/sounds/**/*',
  SRC + '/**/sound/**/*',
  SRC + '/**/audio/**/*'
];
var videoFiles = [
  SRC + '/**/videos/**/*',
  SRC + '/**/video/**/*'
];

/* Gulp and plugins. */
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
// var critical = require('critical').stream;
var cssnano = require('gulp-cssnano');
var del = require('del');
var ghPages = require('gulp-gh-pages');
var htmlmin = require('gulp-htmlmin');
var imagemin = require('gulp-imagemin');
var jshint = require('gulp-jshint');
var jsonlint = require('gulp-jsonlint');
var merge = require('merge-stream');
var pngquant = require('imagemin-pngquant');
var psi = require('psi');
// var responsive = require('gulp-responsive');
var uglify = require('gulp-uglify');
var usemin = require('gulp-usemin');

gulp.task('lint:js', function() {
  return gulp.src(lintableJS)
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

gulp.task('lint:json', function() {
  return gulp.src(lintableJSON)
    .pipe(jsonlint())
    .pipe(jsonlint.reporter());
});

gulp.task('lint', ['lint:js', 'lint:json'], function() {
  gulp.watch(lintableJS, ['lint:js']);
  gulp.watch(lintableJSON, ['lint:json']);
});

gulp.task('clean', function() {
  return del([DIST]);
});

gulp.task('build', ['clean'], function() {
  return merge(
    gulp.src(bowerFiles)
      .pipe(gulp.dest(DIST + '/bower_components')),
    gulp.src(htmlFiles)
      .pipe(usemin({
        html: [function() {
          return htmlmin({
            removeComments: true,
            collapseWhitespace: true
          });
        }],
        css: [cssnano],
        inlinecss: [cssnano],
        js: [uglify],
        inlinejs: [uglify]
      }))
      .pipe(gulp.dest(DIST)),
    gulp.src(imageFiles)
      .pipe(imagemin({
        use: [pngquant()]  // Better compression than optipng.
      }))
      .pipe(gulp.dest(DIST)),
    gulp.src(audioFiles)
      .pipe(gulp.dest(DIST)),
    gulp.src(videoFiles)
      .pipe(gulp.dest(DIST)));
});

/***** WiP *****/
// // TODO: Need a method for automating usage of the images once made.
// gulp.task('res', function() {
//   return gulp.src(imageFiles)
//     .pipe(responsive({
//       // TODO
//     }))
//     .pipe(gulp.dest(DIST));
// });

/***** WiP *****/
// gulp.task('critical', function() {
//   gulp.src(DIST + '/**/*.html')
//     .pipe(critical({
//       inline: true,
//       // minify: true,
//       // extract: true,  // Extract inlined styles from css files.
//       base: DIST + pathToFile,  // File location relative to gulpfile. Not sure how to get pathToFile.
//       width: 1920,
//       height: 1080
//     }))
//     .pipe(gulp.dest(DIST));
// });

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: SRC,
      routes: {
        '/bower_components': './bower_components'
      }
    },
    notify: false,  // Prevents pop-over notifications in the browser.
    minify: false   // Prevents minification of client-side JS.
  });

  gulp.watch(htmlFiles, browserSync.reload);
  gulp.watch(cssFiles, browserSync.reload);
  gulp.watch(jsFiles, browserSync.reload);
  gulp.watch(imageFiles, browserSync.reload);
  gulp.watch(audioFiles, browserSync.reload);
  gulp.watch(videoFiles, browserSync.reload);
});

gulp.task('serve:dist', function() {
  browserSync.init({
    server: {
      baseDir: DIST
    },
    notify: false,  // Prevents pop-over notifications in the browser.
    minify: false   // Prevents minification of client-side JS.
  });

  gulp.watch([DIST + '/**/*'], browserSync.reload);
});

gulp.task('serve:tunnelled', function(cb) {
  browserSync.init({
    server: {
      baseDir: DIST
    },
    notify: false,  // Prevents pop-over notifications in the browser.
    minify: false,  // Prevents minification of client-side JS.
    open: false,    // Prevents opening in browser.
    tunnel: true    // Tunnel the server through a random public url.
  }, cb);
});

gulp.task('psi:desktop', ['serve:tunnelled'], function() {
  var site = browserSync.instance.tunnel.url;

  return psi.output(site, {
    nokey: 'true',
    strategy: 'desktop'
  });
});

gulp.task('psi:mobile', ['serve:tunnelled'], function() {
  var site = browserSync.instance.tunnel.url;

  return psi.output(site, {
    nokey: 'true',
    strategy: 'mobile'
  });
});

gulp.task('psi', ['psi:desktop', 'psi:mobile'], function() {
  console.log('Exitting tunnelled server...');
  browserSync.exit();
  process.exit(0);
});

gulp.task('deploy:gh-pages', function() {
  return gulp.src(DIST + '/**/*')
    .pipe(ghPages());
});

gulp.task('default', ['lint', 'serve']);

license.txt

The MIT License (MIT)

Copyright (c) 2016 Matthew Feidt

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

package.json

{
  "devDependencies": {
    "browser-sync": "^2.10.0",
    "critical": "^0.7.0",
    "del": "^2.2.0",
    "gulp": "^3.9.0",
    "gulp-cssnano": "^2.0.0",
    "gulp-gh-pages": "^0.5.4",
    "gulp-htmlmin": "^1.3.0",
    "gulp-imagemin": "^2.4.0",
    "gulp-jshint": "^2.0.0",
    "gulp-jsonlint": "^1.1.1",
    "gulp-uglify": "^1.5.1",
    "gulp-usemin": "^0.3.20",
    "imagemin-pngquant": "^4.2.0",
    "jshint": "^2.8.0",
    "merge-stream": "^1.0.0",
    "psi": "^2.0.2"
  }
}