Merge pull request #1 from DennisMartinez/gulp-cleanup

Clean up gulp build files

Author: DennisMartinez

.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())
+  })
+}