Copy to a temporary directory, ES2015 updates

This is so that your git commit history isn't disturbed by tons of
changes to your header and footer file, now it's all done in the
temporary directory first.

Also changed the file to use ES2015 syntax without having to rely on
Babel, this speeds up the gulpfile quite a bit.

This closes #131 and fixes #127, fixes #128 and fixes #129.

generators/app/index.js

@@ -10,11 +10,6 @@ module.exports = generators.Base.extend({
   constructor: function () {
     generators.Base.apply(this, arguments);
 
-    this.option('skip-install', {
-      desc: 'Skip installing dependencies',
-      type: Boolean
-    });
-
     var dependencies = ['ruby', 'bundle', 'yo', 'gulp', 'node'].every(function (depend) {
       return shelljs.which(depend);
     });
@@ -163,11 +158,7 @@ module.exports = generators.Base.extend({
   },
 
   installing: function () {
-    if (this.options['skip-install']) {
-      this.log('Please run `npm install` and `bundle install`');
-    } else {
-      this.npmInstall();
-      this.spawnCommand('bundle', ['install']);
-    }
+    this.installDependencies({bower: false});
+    this.spawnCommand('bundle', ['install', '--quiet']);
   }
 });

generators/gulp/index.js

@@ -36,9 +36,6 @@ module.exports = generators.Base.extend({
       pkg.devDependencies = pkg.devDependencies || {};
       _.extend(pkg.devDependencies, {
         'autoprefixer': '^6.2.3',
-        'babel-core': '^6.5.0',
-        'babel-eslint': '^6.0.0',
-        'babel-preset-es2015': '^6.5.0',
         'browser-sync': '^2.11.0',
         'del': '^2.2.0',
         'eslint': '^2.5.3',
@@ -86,8 +83,8 @@ module.exports = generators.Base.extend({
 
     gulpfile: function () {
       this.fs.copyTpl(
-        this.templatePath('gulpfile.babel.js'),
-        this.destinationPath('gulpfile.babel.js'),
+        this.templatePath('gulpfile.js'),
+        this.destinationPath('gulpfile.js'),
         {
           amazonS3: this.options.uploading === 'Amazon S3',
           rsync: this.options.uploading === 'Rsync',

generators/gulp/templates/gulpfile.babel.js → generators/gulp/templates/gulpfile.js

@@ -1,51 +1,59 @@
 'use strict';
 
-import gulp from 'gulp';
+const gulp = require('gulp');
 // Loads the plugins without having to list all of them, but you need
 // to call them as $.pluginname
-import gulpLoadPlugins from 'gulp-load-plugins';
+const gulpLoadPlugins = require('gulp-load-plugins');
 const $ = gulpLoadPlugins();
 // Delete stuff
-import del from 'del';
+const del = require('del');
 // Used to run shell commands
-import shell from 'shelljs';
+const shell = require('shelljs');
 <%  if (amazonS3 || rsync) { -%>
 // 'fs' is used to read files from the system (used for uploading)
-import fs from 'fs';
+const fs = require('fs');
 <% } -%>
 <%  if (amazonS3) { -%>
 // Parallelize the uploads when uploading to Amazon S3
-import parallelize from 'concurrent-transform';
+const parallelize = require('concurrent-transform');
 <% } -%>
 // BrowserSync is used to live-reload your website
 const browserSync = require('browser-sync').create();
 const reload = browserSync.reload;
 // AutoPrefixer
-import autoprefixer from 'autoprefixer';
+const autoprefixer = require('autoprefixer');
 // Yargs for command line arguments
-import {argv} from 'yargs';
+const argv = require('yargs').argv;
 
 // 'gulp clean:assets' -- deletes all assets except for images
 // 'gulp clean:images' -- deletes your images
-// 'gulp clean:dist' -- erases the dist folder
+// 'gulp clean:dist' -- erases the dist directory
 // 'gulp clean:gzip' -- erases all the gzipped files
-// 'gulp clean:metadata' -- deletes the metadata file for Jekyll
+// 'gulp clean:jekyll' -- deletes the temporary Jekyll site
 gulp.task('clean:assets', () => {
   return del(['.tmp/**/*', '!.tmp/assets', '!.tmp/assets/images', '!.tmp/assets/images/**/*', 'dist/assets']);
 });
 gulp.task('clean:images', () => {
   return del(['.tmp/assets/images', 'dist/assets/images']);
 });
 gulp.task('clean:dist', () => {
-  return del(['dist/']);
+  return del(['dist/', '.tmp/dist']);
 });
 gulp.task('clean:gzip', () => {
   return del(['dist/**/*.gz']);
 });
-gulp.task('clean:metadata', () => {
-  return del(['src/.jekyll-metadata']);
+gulp.task('clean:jekyll', () => {
+  return del(['.tmp/jekyll']);
 });
 
+// 'gulp jekyll:tmp' -- copies your Jekyll site to a temporary directory
+// to be processed
+gulp.task('jekyll:tmp', () =>
+  gulp.src(['src/**/*', '!src/assets/**/*', '!src/assets'])
+    .pipe(gulp.dest('.tmp/jekyll'))
+    .pipe($.size({title: 'Jekyll'}))
+);
+
 // 'gulp jekyll' -- builds your site with development settings
 // 'gulp jekyll --prod' -- builds your site with production settings
 gulp.task('jekyll', done => {
@@ -139,18 +147,18 @@ gulp.task('scripts', () =>
 
 // 'gulp inject:head' -- injects our style.css file into the head of our HTML
 gulp.task('inject:head', () =>
-  gulp.src('src/_includes/head.html')
+  gulp.src('.tmp/jekyll/_includes/head.html')
     .pipe($.inject(gulp.src('.tmp/assets/stylesheets/*.css',
                             {read: false}), {ignorePath: '.tmp'}))
-    .pipe(gulp.dest('src/_includes'))
+    .pipe(gulp.dest('.tmp/jekyll/_includes'))
 );
 
 // 'gulp inject:footer' -- injects our index.js file into the end of our HTML
 gulp.task('inject:footer', () =>
-  gulp.src('src/_layouts/default.html')
+  gulp.src('.tmp/jekyll/_layouts/default.html')
     .pipe($.inject(gulp.src('.tmp/assets/javascript/*.js',
                             {read: false}), {ignorePath: '.tmp'}))
-    .pipe(gulp.dest('src/_layouts'))
+    .pipe(gulp.dest('.tmp/jekyll/_layouts'))
 );
 
 // 'gulp images' -- optimizes and caches your images
@@ -164,7 +172,7 @@ gulp.task('images', () =>
     .pipe($.size({title: 'images'}))
 );
 
-// 'gulp fonts' -- copies your fonts to the temporary assets folder
+// 'gulp fonts' -- copies your fonts to the temporary assets directory
 gulp.task('fonts', () =>
   gulp.src('src/assets/fonts/**/*')
     .pipe(gulp.dest('.tmp/assets/fonts'))
@@ -273,39 +281,35 @@ gulp.task('assets', gulp.series(
   gulp.parallel('styles', 'scripts', 'fonts', 'images')
 ));
 
-// 'gulp assets:copy' -- copies the assets into the dist folder, needs to be
-// done this way because Jekyll overwrites the whole folder otherwise
-gulp.task('assets:copy', () =>
+// 'gulp assets:copy' -- copies the assets into the dist directory, needs to be
+// done this way because Jekyll overwrites the whole directory otherwise
+gulp.task('copy:assets', () =>
   gulp.src('.tmp/assets/**/*')
     .pipe(gulp.dest('dist/assets'))
 );
 
-// 'gulp' -- cleans your assets and gzipped files, creates your assets and
-// injects them into the templates, then builds your site, copied the assets
-// into their directory and serves the site
-// 'gulp --prod' -- same as above but with production settings
-gulp.task('default', gulp.series(
-  gulp.series('clean:assets', 'clean:gzip'),
-  gulp.series('assets', 'inject:head', 'inject:footer'),
-  gulp.series('jekyll', 'assets:copy', 'html'),
-  gulp.series('serve')
-));
-
-// 'gulp build' -- same as 'gulp' but doesn't serve your site in your browser
-// 'gulp build --prod' -- same as above but with production settings
-gulp.task('build', gulp.series(
-  gulp.series('clean:assets', 'clean:gzip'),
-  gulp.series('assets', 'inject:head', 'inject:footer'),
-  gulp.series('jekyll', 'assets:copy', 'html')
-));
+// gulp jekyll:copy' -- copies your processed Jekyll site to the dist directory
+gulp.task('copy:jekyll', () =>
+  gulp.src('.tmp/dist/**/*')
+    .pipe(gulp.dest('dist'))
+);
 
 // 'gulp clean' -- erases your assets and gzipped files
-gulp.task('clean', gulp.series('clean:assets', 'clean:gzip'));
-
-// 'gulp rebuild' -- WARNING: Erases your assets and built site, use only when
-// you need to do a complete rebuild
-gulp.task('rebuild', gulp.series('clean:dist', 'clean:assets',
-'clean:images', 'clean:metadata'));
+gulp.task('clean', gulp.series('clean:assets', 'clean:dist', 'clean:jekyll'));
 
 // 'gulp check' -- checks your Jekyll configuration for errors and lint your JS
 gulp.task('check', gulp.series('jekyll:doctor', 'lint'));
+
+// 'gulp build' -- cleans out temporary files, injects your JS and CSS and generates your site, and then your assets
+// 'gulp build --prod' -- same as above, but with production settings
+gulp.task('build', gulp.series(
+  gulp.series('clean', 'assets', 'jekyll:tmp', 'inject:head', 'inject:footer', 'jekyll'),
+  gulp.parallel('copy:assets', 'copy:jekyll'),
+  gulp.series('html')
+));
+
+// 'gulp' -- runs the 'build' task and then serves your site
+gulp.task('default', gulp.series(
+  gulp.series('build', 'serve')
+));
+

generators/jekyll/templates/config.yml

@@ -5,8 +5,8 @@ description: <%= projectDescription %>
 url: <%= projectURL %>
 
 # Used so Jekyll outputs the site correctly so Gulp can do what it wants
-source: src
-destination: dist
+source: .tmp/jekyll
+destination: .tmp/dist
 exclude: ['assets']
 
 # Same as the title etc for your site but can instead be

test/app.js

@@ -48,7 +48,7 @@ describe('jekyllized:app', function () {
         '.gitattributes',
         '.babelrc',
         'package.json',
-        'gulpfile.babel.js',
+        'gulpfile.js',
         'README.md',
         '_config.yml',
         '_config.build.yml',

test/gulp.js

@@ -14,7 +14,7 @@ describe('jekyllized:gulp', function () {
     });
 
     it('creates gulpfile', function () {
-      assert.file('gulpfile.babel.js');
+      assert.file('gulpfile.js');
     });
 
     it('creates package.json file', function () {
@@ -24,9 +24,6 @@ describe('jekyllized:gulp', function () {
     it('package.json contains correct packages', function () {
       [
         '"autoprefixer": "^6.2.3"',
-        '"babel-core": "^6.5.0"',
-        '"babel-eslint": "^6.0.0"',
-        '"babel-preset-es2015": "^6.5.0"',
         '"browser-sync": "^2.11.0"',
         '"del": "^2.2.0"',
         '"eslint": "^2.5.3"',
@@ -83,7 +80,8 @@ describe('jekyllized:gulp', function () {
         'clean:images',
         'clean:dist',
         'clean:gzip',
-        'clean:metadata',
+        'clean:jekyll',
+        'jekyll:tmp',
         'jekyll',
         'jekyll:doctor',
         'styles',
@@ -96,18 +94,19 @@ describe('jekyllized:gulp', function () {
         'lint',
         'serve',
         'assets',
-        'assets:copy',
-        'default',
+        'copy:assets',
+        'copy:jekyll',
+        'clean',
+        'check',
         'build',
-        'rebuild',
-        'check'
+        'default'
       ].forEach(function (task) {
-        assert.fileContent('gulpfile.babel.js', 'gulp.task(\'' + task);
+        assert.fileContent('gulpfile.js', 'gulp.task(\'' + task);
       });
     });
 
     it('does not contain deploy task', function () {
-      assert.noFileContent('gulpfile.babel.js', 'gulp.task(\'deploy\'');
+      assert.noFileContent('gulpfile.js', 'gulp.task(\'deploy\'');
     });
   });
 
@@ -120,7 +119,7 @@ describe('jekyllized:gulp', function () {
     });
 
     it('creates gulpfile', function () {
-      assert.file('gulpfile.babel.js');
+      assert.file('gulpfile.js');
     });
 
     it('creates package.json file', function () {
@@ -146,15 +145,15 @@ describe('jekyllized:gulp', function () {
     });
 
     it('contains deploy task', function () {
-      assert.fileContent('gulpfile.babel.js', '// \'gulp deploy\' -- reads from your AWS Credentials file, creates the correct');
-      assert.fileContent('gulpfile.babel.js', '// headers for your files and uploads them to S3');
-      assert.fileContent('gulpfile.babel.js', 'gulp.task(\'deploy\'');
+      assert.fileContent('gulpfile.js', '// \'gulp deploy\' -- reads from your AWS Credentials file, creates the correct');
+      assert.fileContent('gulpfile.js', '// headers for your files and uploads them to S3');
+      assert.fileContent('gulpfile.js', 'gulp.task(\'deploy\'');
     });
 
     it('does not contain wrong uploading tasks', function () {
-      assert.noFileContent('gulpfile.babel.js', '// \'gulp deploy\' -- reads from your Rsync credentials file and incrementally');
-      assert.noFileContent('gulpfile.babel.js', '// uploads your site to your server');
-      assert.noFileContent('gulpfile.babel.js', '// \'gulp deploy\' -- pushes your dist folder to Github');
+      assert.noFileContent('gulpfile.js', '// \'gulp deploy\' -- reads from your Rsync credentials file and incrementally');
+      assert.noFileContent('gulpfile.js', '// uploads your site to your server');
+      assert.noFileContent('gulpfile.js', '// \'gulp deploy\' -- pushes your dist folder to Github');
     });
 
     it('creates credentials file', function () {
@@ -171,7 +170,7 @@ describe('jekyllized:gulp', function () {
     });
 
     it('creates gulpfile', function () {
-      assert.file('gulpfile.babel.js');
+      assert.file('gulpfile.js');
     });
 
     it('creates package.json file', function () {
@@ -193,15 +192,15 @@ describe('jekyllized:gulp', function () {
     });
 
     it('contains deploy function', function () {
-      assert.fileContent('gulpfile.babel.js', '// \'gulp deploy\' -- reads from your Rsync credentials file and incrementally');
-      assert.fileContent('gulpfile.babel.js', '// uploads your site to your server');
-      assert.fileContent('gulpfile.babel.js', 'gulp.task(\'deploy\'');
+      assert.fileContent('gulpfile.js', '// \'gulp deploy\' -- reads from your Rsync credentials file and incrementally');
+      assert.fileContent('gulpfile.js', '// uploads your site to your server');
+      assert.fileContent('gulpfile.js', 'gulp.task(\'deploy\'');
     });
 
     it('does not contain the wrong uploading task', function () {
-      assert.noFileContent('gulpfile.babel.js', '// \'gulp deploy\' -- reads from your AWS Credentials file, creates the correct');
-      assert.noFileContent('gulpfile.babel.js', '// headers for your files and uploads them to S3');
-      assert.noFileContent('gulpfile.babel.js', '// \'gulp deploy\' -- pushes your dist folder to Github');
+      assert.noFileContent('gulpfile.js', '// \'gulp deploy\' -- reads from your AWS Credentials file, creates the correct');
+      assert.noFileContent('gulpfile.js', '// headers for your files and uploads them to S3');
+      assert.noFileContent('gulpfile.js', '// \'gulp deploy\' -- pushes your dist folder to Github');
     });
 
     it('creates credentials file', function () {
@@ -218,7 +217,7 @@ describe('jekyllized:gulp', function () {
     });
 
     it('creates gulpfile', function () {
-      assert.file('gulpfile.babel.js');
+      assert.file('gulpfile.js');
     });
 
     it('creates package.json file', function () {
@@ -240,15 +239,15 @@ describe('jekyllized:gulp', function () {
     });
 
     it('contains deploy function', function () {
-      assert.fileContent('gulpfile.babel.js', '// \'gulp deploy\' -- pushes your dist folder to Github');
-      assert.fileContent('gulpfile.babel.js', 'gulp.task(\'deploy\'');
+      assert.fileContent('gulpfile.js', '// \'gulp deploy\' -- pushes your dist folder to Github');
+      assert.fileContent('gulpfile.js', 'gulp.task(\'deploy\'');
     });
 
     it('does not contain the wrong uploading task', function () {
-      assert.noFileContent('gulpfile.babel.js', '// \'gulp deploy\' -- reads from your AWS Credentials file, creates the correct');
-      assert.noFileContent('gulpfile.babel.js', '// headers for your files and uploads them to S3');
-      assert.noFileContent('gulpfile.babel.js', '// \'gulp deploy\' -- reads from your Rsync credentials file and incrementally');
-      assert.noFileContent('gulpfile.babel.js', '// uploads your site to your server');
+      assert.noFileContent('gulpfile.js', '// \'gulp deploy\' -- reads from your AWS Credentials file, creates the correct');
+      assert.noFileContent('gulpfile.js', '// headers for your files and uploads them to S3');
+      assert.noFileContent('gulpfile.js', '// \'gulp deploy\' -- reads from your Rsync credentials file and incrementally');
+      assert.noFileContent('gulpfile.js', '// uploads your site to your server');
     });
   });
 });