ES2015ify the gulpfile

README.md

@@ -7,7 +7,7 @@
 
 ## Features
 
-Please see our [gulpfile.js](app/templates/gulpfile.js) for up to date information on what we support.
+Please see our [gulpfile](app/templates/gulpfile.babel.js) for up to date information on what we support.
 
 * CSS Autoprefixing
 * Built-in preview server with BrowserSync
@@ -16,6 +16,7 @@ Please see our [gulpfile.js](app/templates/gulpfile.js) for up to date informati
 * Map compiled CSS to source stylesheets with source maps
 * Awesome image optimization
 * Automagically wire-up dependencies installed with [Bower](http://bower.io)
+* The gulpfile makes use of [ES2015 features](https://babeljs.io/docs/learn-es2015/) by using [Babel](https://babeljs.io)
 
 *For more information on what this generator can do for you, take a look at the [gulp plugins](app/templates/_package.json) used in our `package.json`.*
 
@@ -24,7 +25,7 @@ Please see our [gulpfile.js](app/templates/gulpfile.js) for up to date informati
 
 Keep in mind that libsass is feature-wise not fully compatible with Ruby Sass. Check out [this](http://sass-compatibility.github.io) curated list of incompatibilities to find out which features are missing.
 
-If your favorite feature is missing and you really need Ruby Sass, you can always switch to [gulp-ruby-sass](https://github.com/sindresorhus/gulp-ruby-sass) and update the `styles` task in `gulpfile.js` accordingly.
+If your favorite feature is missing and you really need Ruby Sass, you can always switch to [gulp-ruby-sass](https://github.com/sindresorhus/gulp-ruby-sass) and update the `styles` task in gulpfile accordingly.
 
 
 ## Getting Started

app/USAGE

@@ -10,7 +10,7 @@ Example:
     yo gulp-webapp
 
     This will create:
-        gulpfile.js: Configuration for the task runner.
+        gulpfile.babel.js: Configuration for the task runner.
         bower.json: Front-end packages installed by bower.
         package.json: Development packages installed by npm.
 

app/index.js

@@ -40,7 +40,7 @@ module.exports = yeoman.generators.Base.extend({
     var done = this.async();
 
     if (!this.options['skip-welcome-message']) {
-      this.log(yosay('\'Allo \'allo! Out of the box I include HTML5 Boilerplate, jQuery, and a gulpfile.js to build your app.'));
+      this.log(yosay('\'Allo \'allo! Out of the box I include HTML5 Boilerplate, jQuery, and a gulpfile to build your app.'));
     }
 
     var prompts = [{
@@ -81,7 +81,7 @@ module.exports = yeoman.generators.Base.extend({
 
   writing: {
     gulpfile: function () {
-      this.template('gulpfile.js');
+      this.template('gulpfile.babel.js');
     },
 
     packageJSON: function () {

app/templates/_package.json

@@ -5,9 +5,10 @@
   },
   "devDependencies": {
     "autoprefixer-core": "^5.1.8",
+    "babel": "^5.5.6",
     "browser-sync": "^2.2.1",
     "del": "^1.1.1",
-    "gulp": "^3.8.11",
+    "gulp": "^3.9.0",
     "gulp-cache": "^0.2.8",
     "gulp-csso": "^1.0.0",
     "gulp-if": "^1.2.5",

app/templates/gulpfile.js → app/templates/gulpfile.babel.js

@@ -1,12 +1,15 @@
 /*global -$ */
-'use strict';
 // generated on <%= (new Date).toISOString().split('T')[0] %> using <%= pkg.name %> <%= pkg.version %>
-var gulp = require('gulp');
-var $ = require('gulp-load-plugins')();
-var browserSync = require('browser-sync');
-var reload = browserSync.reload;
+import gulp from 'gulp';
+import gulpLoadPlugins from 'gulp-load-plugins';
+import browserSync from 'browser-sync';
+import del from 'del';
+import {stream as wiredep} from 'wiredep';
 
-gulp.task('styles', function () {<% if (includeSass) { %>
+const $ = gulpLoadPlugins();
+const reload = browserSync.reload;
+
+gulp.task('styles', () => {<% if (includeSass) { %>
   gulp.src('app/styles/*.scss')
     .pipe($.sourcemaps.init())
     .pipe($.sass({
@@ -25,7 +28,7 @@ gulp.task('styles', function () {<% if (includeSass) { %>
 });
 
 function jshint(files) {
-  return function () {
+  return () => {
     return gulp.src(files)
       .pipe(reload({stream: true, once: true}))
       .pipe($.jshint())
@@ -37,8 +40,8 @@ function jshint(files) {
 gulp.task('jshint', jshint('app/scripts/**/*.js'));
 gulp.task('jshint:test', jshint('test/spec/**/*.js'));
 
-gulp.task('html', ['styles'], function () {
-  var assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});
+gulp.task('html', ['styles'], () => {
+  const assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});
 
   return gulp.src('app/*.html')
     .pipe(assets)
@@ -50,7 +53,7 @@ gulp.task('html', ['styles'], function () {
     .pipe(gulp.dest('dist'));
 });
 
-gulp.task('images', function () {
+gulp.task('images', () => {
   return gulp.src('app/images/**/*')
     .pipe($.if($.if.isFile, $.cache($.imagemin({
       progressive: true,
@@ -59,19 +62,22 @@ gulp.task('images', function () {
       // as hooks for embedding and styling
       svgoPlugins: [{cleanupIDs: false}]
     }))
-    .on('error', function(err){ console.log(err); this.end; })))
+    .on('error', function (err) {
+      console.log(err);
+      this.end();
+    })))
     .pipe(gulp.dest('dist/images'));
 });
 
-gulp.task('fonts', function () {
+gulp.task('fonts', () => {
   return gulp.src(require('main-bower-files')({
     filter: '**/*.{eot,svg,ttf,woff,woff2}'
   }).concat('app/fonts/**/*'))
     .pipe(gulp.dest('.tmp/fonts'))
     .pipe(gulp.dest('dist/fonts'));
 });
 
-gulp.task('extras', function () {
+gulp.task('extras', () => {
   return gulp.src([
     'app/*.*',
     '!app/*.html'
@@ -80,9 +86,9 @@ gulp.task('extras', function () {
   }).pipe(gulp.dest('dist'));
 });
 
-gulp.task('clean', require('del').bind(null, ['.tmp', 'dist']));
+gulp.task('clean', () => del(['.tmp', 'dist']));
 
-gulp.task('serve', ['styles', 'fonts'], function () {
+gulp.task('serve', ['styles', 'fonts'], () => {
   browserSync({
     notify: false,
     port: 9000,
@@ -107,7 +113,7 @@ gulp.task('serve', ['styles', 'fonts'], function () {
   gulp.watch('bower.json', ['wiredep', 'fonts']);
 });
 
-gulp.task('serve:dist', function () {
+gulp.task('serve:dist', () => {
   browserSync({
     notify: false,
     port: 9000,
@@ -117,7 +123,7 @@ gulp.task('serve:dist', function () {
   });
 });
 
-gulp.task('serve:test', function () {
+gulp.task('serve:test', () => {
   browserSync({
     notify: false,
     open: false,
@@ -128,17 +134,12 @@ gulp.task('serve:test', function () {
     }
   });
 
-  gulp.watch([
-    'test/spec/**/*.js',
-  ]).on('change', reload);
-
+  gulp.watch('test/spec/**/*.js').on('change', reload);
   gulp.watch('test/spec/**/*.js', ['jshint:test']);
 });
 
 // inject bower components
-gulp.task('wiredep', function () {
-  var wiredep = require('wiredep').stream;
-<% if (includeSass) { %>
+gulp.task('wiredep', () => {<% if (includeSass) { %>
   gulp.src('app/styles/*.scss')
     .pipe(wiredep({
       ignorePath: /^(\.\.\/)+/
@@ -153,10 +154,10 @@ gulp.task('wiredep', function () {
     .pipe(gulp.dest('app'));
 });
 
-gulp.task('build', ['jshint', 'html', 'images', 'fonts', 'extras'], function () {
+gulp.task('build', ['jshint', 'html', 'images', 'fonts', 'extras'], () => {
   return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));
 });
 
-gulp.task('default', ['clean'], function () {
+gulp.task('default', ['clean'], () => {
   gulp.start('build');
 });

test/gulp_file.js

@@ -32,7 +32,7 @@ describe('Gulp Webapp generator: tasks', function () {
     });
 
     generator.run(function () {
-      var gulpFile = fs.readFileSync('gulpfile.js', 'utf8');
+      var gulpFile = fs.readFileSync('gulpfile.babel.js', 'utf8');
       var regexGulp = new RegExp('gulp.task\\(\'' + taskName + '\'');
 
       assert.ok(

test/test.js

@@ -33,7 +33,7 @@ describe('Gulp webapp generator test', function () {
     var expected = [
       'bower.json',
       'package.json',
-      'gulpfile.js',
+      'gulpfile.babel.js',
       'app/favicon.ico',
       'app/robots.txt',
       'app/index.html',