Clean u gulp build files

Remove stage-2 from babelrc and add stage-0 so we can take advantage of function binding.
Add global object in eslint and add __DEV__ and module
Add gulp load plugins to the build to allow auto loading of plguins
Separate out tasks in a gulp/tasks folder for separation of concerns and scalability.
Add bridge.js file to load all plugins and pass appropriate settings to each task.
Add gulp util for coloration and beepbeep for notification once the build is done.
Add webpack progress bar plugin so we can see the status of a distribution build when webpack is running.
Refactor gulpfile.babel.js to use gulp load plugins and update the tasks to use utils
Add __DEV__ to webpack so we can easliy decide which code gets ripped out when doing prod builds
Add exmaple of using __DEV__ in Github.js class

Author: jfusco

.babelrc

@@ -1,7 +1,7 @@
 {
   "presets": [
     "es2015",
-    "stage-2"
+    "stage-0"
   ],
   "plugins": [
     ["transform-runtime", {

.eslintrc.js

@@ -10,5 +10,9 @@ module.exports = {
   extends: 'standard',
   rules: {
     'space-before-function-paren': 0
+  },
+  globals: {
+    '__DEV__': true,
+    'module': true
   }
 }

.gitignore

@@ -1,6 +1,6 @@
-.idea
-dist
-node_modules
+/.idea
+/dist
+/node_modules
 npm-debug.log
 *.sublime-project
 *.sublime-workspace

gulp/bridge.js

@@ -0,0 +1,5 @@
+module.exports = (gulp, tasks, $, server) => {
+  tasks.forEach(name => {
+    require('./tasks/' + name)(gulp, $, server)
+  })
+}

gulp/tasks/clean.js

@@ -0,0 +1,13 @@
+/**
+ * Clean our dist folder before building.
+ */
+module.exports = (gulp, $) => {
+  gulp.task('clean', () => {
+    $.del(['dist'], {
+      force: true
+    })
+    .then(paths => {
+      $.util.log($.util.colors.green.bold(`Deleted files and folders: ${paths.join('\n')}`))
+    })
+  })
+}

gulp/tasks/fonts.js

@@ -0,0 +1,14 @@
+/**
+ * Copy font files into dist on build.
+ */
+module.exports = (gulp, $, server) => {
+  gulp.task('fonts', () => {
+    return gulp.src([
+        'src/fonts/**/*.{woff,woff2,eot,ttf,otf,svg}',
+        'node_modules/font-awesome/fonts/**/*.{woff,woff2,eot,ttf,otf,svg}'
+      ])
+      .pipe($.plumber())
+      .pipe(gulp.dest('dist/fonts'))
+      .pipe(server.stream())
+  })
+}

gulp/tasks/html.js

@@ -0,0 +1,15 @@
+/**
+ * Render html files and copy into dist on build.
+ */
+module.exports = (gulp, $, server) => {
+  gulp.task('html', () => {
+    return gulp.src('src/**/*.html')
+      .pipe($.plumber())
+      .pipe($.fileInclude({
+        prefix: '@@',
+        basepath: 'src'
+      }))
+      .pipe(gulp.dest('dist'))
+      .pipe(server.stream({reload: true}))
+  })
+}

gulp/tasks/images.js

@@ -0,0 +1,17 @@
+const isProduction = process.env.NODE_ENV === 'production'
+
+/**
+ * Minify and copy our images into dist on build.
+ */
+module.exports = (gulp, $, server) => {
+  gulp.task('images', () => {
+    return gulp.src([
+        'src/img/**',
+        '!src/img/sprites{,/**}'
+      ])
+      .pipe($.plumber())
+      .pipe($.if(isProduction, $.imagemin()))
+      .pipe(gulp.dest('dist/img'))
+      .pipe(server.stream())
+  })
+}

gulp/tasks/server.js

@@ -0,0 +1,25 @@
+import webpack from 'webpack'
+import webpackDevMiddleware from 'webpack-dev-middleware'
+import webpackHotMiddleware from 'webpack-hot-middleware'
+import webpackConfig from '../../webpack.config.babel'
+
+/**
+ * The development server.
+ */
+module.exports = (gulp, $, server) => {
+  gulp.task('server', ['build'], done => {
+    const bundler = webpack(webpackConfig)
+
+    server.init({
+      notify: false,
+      logLevel: 'none',
+      server: {
+        baseDir: 'dist',
+        middleware: [
+          webpackDevMiddleware(bundler, webpackConfig.devServer),
+          webpackHotMiddleware(bundler)
+        ]
+      }
+    }, done)
+  })
+}

gulp/tasks/sprite.js

@@ -0,0 +1,15 @@
+/**
+ * Creates a spritesheet from our img/sprites folder.
+ */
+module.exports = (gulp, $, server) => {
+  gulp.task('sprite', () => {
+    return gulp.src('src/img/sprites/**/*')
+      .pipe($.plumber())
+      .pipe($.spritesmith({
+        imgName: 'img/sprite.png',
+        cssName: 'scss/_sprite.scss'
+      }))
+      .pipe(gulp.dest('src'))
+      .pipe(server.stream())
+  })
+}