Fix injecting CSS changes into browser

Injecting CSS changes wouldn't work with the split tasks for BrowserSync
and SASS, so I combined all the asset generating into a assets.js task
and injecting works as it should now.

Fixes sondr3/generator-jekyllized#143.

generators/gulp/templates/tasks/assets.js

@@ -0,0 +1,110 @@
+'use strict';
+const argv = require('yargs').argv;
+const autoprefixer = require('autoprefixer');<% if (babel) { %>
+const babel = require('gulp-babel');<% } %>
+const browserSync = require('browser-sync').create();
+const concat = require('gulp-concat');
+const cssnano = require('gulp-cssnano');
+const gulp = require('gulp');
+const gzip = require('gulp-gzip');
+const newer = require('gulp-newer');
+const postcss = require('gulp-postcss');
+const rename = require('gulp-rename');
+const rev = require('gulp-rev');
+const sass = require('gulp-sass');
+const size = require('gulp-size');
+const sourcemaps = require('gulp-sourcemaps');
+const uglify = require('gulp-uglify');
+const when = require('gulp-if');
+
+// 'gulp scripts' -- creates a index.js file from your JavaScript files and
+// creates a Sourcemap for it
+// 'gulp scripts --prod' -- creates a index.js file from your JavaScript files,
+// minifies, gzips and cache busts it. Does not create a Sourcemap
+gulp.task('scripts', () =>
+  // NOTE: The order here is important since it's concatenated in order from
+  // top to bottom, so you want vendor scripts etc on top
+  gulp.src([
+    'src/assets/javascript/vendor.js',
+    'src/assets/javascript/main.js'
+  ])
+    .pipe(newer('.tmp/assets/javascript/index.js', {dest: '.tmp/assets/javascript', ext: '.js'}))
+    .pipe(when(!argv.prod, sourcemaps.init()))<% if (babel) { %>
+    .pipe(babel({
+      presets: ['es2015']
+    }))<% } %>
+    .pipe(concat('index.js'))
+    .pipe(size({
+      showFiles: true
+    }))
+    .pipe(when(argv.prod, rename({suffix: '.min'})))
+    .pipe(when(argv.prod, when('*.js', uglify({preserveComments: 'some'}))))
+    .pipe(when(argv.prod, size({
+      showFiles: true
+    })))
+    .pipe(when(argv.prod, rev()))
+    .pipe(when(!argv.prod, sourcemaps.write('.')))
+    .pipe(when(argv.prod, gulp.dest('.tmp/assets/javascript')))
+    .pipe(when(argv.prod, when('*.js', gzip({append: true}))))
+    .pipe(when(argv.prod, size({
+      gzip: true,
+      showFiles: true
+    })))
+    .pipe(gulp.dest('.tmp/assets/javascript'))
+);
+
+// 'gulp styles' -- creates a CSS file from your SASS, adds prefixes and
+// creates a Sourcemap
+// 'gulp styles --prod' -- creates a CSS file from your SASS, adds prefixes and
+// then minwhenies, gzips and cache busts it. Does not create a Sourcemap
+gulp.task('styles', () =>
+  gulp.src('src/assets/scss/style.scss')
+    .pipe(when(!argv.prod, sourcemaps.init()))
+    .pipe(sass({
+      precision: 10
+    }).on('error', sass.logError))
+    .pipe(postcss([
+      autoprefixer({browsers: 'last 1 version'})
+    ]))
+    .pipe(size({
+      showFiles: true
+    }))
+    .pipe(when(argv.prod, rename({suffix: '.min'})))
+    .pipe(when(argv.prod, when('*.css', cssnano({autoprefixer: false}))))
+    .pipe(when(argv.prod, size({
+      showFiles: true
+    })))
+    .pipe(when(argv.prod, rev()))
+    .pipe(when(!argv.prod, sourcemaps.write('.')))
+    .pipe(when(argv.prod, gulp.dest('.tmp/assets/stylesheets')))
+    .pipe(when(argv.prod, when('*.css', gzip({append: true}))))
+    .pipe(when(argv.prod, size({
+      gzip: true,
+      showFiles: true
+    })))
+    .pipe(gulp.dest('.tmp/assets/stylesheets'))
+    .pipe(when(!argv.prod, browserSync.stream()))
+);
+
+// Function to properly reload your browser
+function reload(done) {
+  browserSync.reload();
+  done();
+}
+// 'gulp serve' -- open up your website in your browser and watch for changes
+// in all your files and update them when needed
+gulp.task('serve', (done) => {
+  browserSync.init({
+    // tunnel: true,
+    // open: false,
+    server: ['.tmp', 'dist']
+  });
+  done();
+
+  // Watch various files for changes and do the needful
+  gulp.watch(['src/**/*.md', 'src/**/*.html', 'src/**/*.yml'], gulp.series('build:site', reload));
+  gulp.watch(['src/**/*.xml', 'src/**/*.txt'], gulp.series('site', reload));
+  gulp.watch('src/assets/javascript/**/*.js', gulp.series('scripts', reload));
+  gulp.watch('src/assets/scss/**/*.scss', gulp.series('styles'));
+  gulp.watch('src/assets/images/**/*', gulp.series('images', reload));
+});

test/gulp.js

@@ -30,15 +30,13 @@ test('creates comment about creation', () => {
 
 test('creates gulp task files', () => {
   assert.file([
-    'gulp/tasks/browsersync.js',
+    'gulp/tasks/assets.js',
     'gulp/tasks/clean.js',
     'gulp/tasks/copy.js',
     'gulp/tasks/fonts.js',
     'gulp/tasks/html.js',
     'gulp/tasks/images.js',
     'gulp/tasks/inject.js',
-    'gulp/tasks/scripts.js',
-    'gulp/tasks/style.js',
     'gulp/tasks/uploading.js'
   ]);
 });

test/gulp/browsersync.js → test/gulp/assets.js

@@ -13,15 +13,20 @@ test.before(() => {
     .toPromise();
 });
 
-test('creates browsersync.js', () => {
-  assert.file('gulp/tasks/browsersync.js');
+test('creates assets.js', () => {
+  assert.file('gulp/tasks/assets.js');
 });
 
 test('contains correct tasks', () => {
   [
-    'function reload',
-    'gulp.task(\'serve'
-  ].forEach(field => {
-    assert.fileContent('gulp/tasks/browsersync.js', field);
+    'scripts',
+    'styles',
+    'serve'
+  ].forEach(function (task) {
+    assert.fileContent('gulp/tasks/assets.js', 'gulp.task(\'' + task);
   });
 });
+
+test('contains reload function', () => {
+  assert.fileContent('gulp/tasks/assets.js', 'function reload');
+});

test/gulp/babel.js

@@ -18,16 +18,16 @@ test('creates gulpfile.js', () => {
   assert.file('gulpfile.js');
 });
 
-test('creates scripts.js', () => {
-  assert.file('gulp/tasks/scripts.js');
+test('creates assets.js', () => {
+  assert.file('gulp/tasks/assets.js');
 });
 
 test('contains babel', () => {
   [
     'const babel',
     '.pipe(babel({'
   ].forEach(field => {
-    assert.fileContent('gulp/tasks/scripts.js', field);
+    assert.fileContent('gulp/tasks/assets.js', field);
   });
 });