Comment-up the Gulpfile

gulpfile.js

@@ -18,6 +18,8 @@
  */
 
 'use strict';
+
+// Include Gulp & Tools We'll Use
 var gulp = require('gulp');
 var $ = require('gulp-load-plugins')();
 var rimraf = require('rimraf');
@@ -26,9 +28,28 @@ var browserSync = require('browser-sync');
 var pagespeed = require('psi');
 var reload = browserSync.reload;
 
-// public URL for your website
+// Lint JavaScript
-var PUBLIC_URL = 'https://example.com';
+gulp.task('jshint', function () {
+    return gulp.src('app/scripts/**/*.js')
+        .pipe($.jshint())
+        .pipe($.jshint.reporter('jshint-stylish'))
+        .pipe($.jshint.reporter('fail'))
+        .pipe(reload({stream: true, once: true}));
+});
 
+// Optimize Images
+gulp.task('images', function () {
+    return gulp.src('app/images/**/*')
+        .pipe($.cache($.imagemin({
+            progressive: true,
+            interlaced: true
+        })))
+        .pipe(gulp.dest('dist/images'))
+        .pipe(reload({stream: true, once: true}))
+        .pipe($.size({title: 'images'}));
+});
+
+// Automatically Prefix CSS
 gulp.task('styles:css', function () {
     return gulp.src('app/styles/**/*.css')
         .pipe($.autoprefixer('last 1 version'))
@@ -37,6 +58,7 @@ gulp.task('styles:css', function () {
         .pipe($.size({title: 'styles:css'}));
 });
 
+// Compile Sass For Style Guide Components (app/styles/components)
 gulp.task('styles:components', function () {
     return gulp.src('app/styles/components/components.scss')
         .pipe($.rubySass({
@@ -49,6 +71,7 @@ gulp.task('styles:components', function () {
         .pipe($.size({title: 'styles:components'}));
 })
 
+// Compile Any Other Sass Files You Added (app/styles)
 gulp.task('styles:scss', function () {
     return gulp.src(['app/styles/**/*.scss', '!app/styles/components/components.scss'])
         .pipe($.rubySass({
@@ -61,54 +84,36 @@ gulp.task('styles:scss', function () {
         .pipe($.size({title: 'styles:scss'}));
 });
 
+// Output Final CSS Styles
 gulp.task('styles', ['styles:components', 'styles:scss', 'styles:css']);
 
-gulp.task('jshint', function () {
+// Scan Your HTML For Assets & Optimize Them
-    return gulp.src('app/scripts/**/*.js')
-        .pipe($.jshint())
-        .pipe($.jshint.reporter('jshint-stylish'))
-        .pipe($.jshint.reporter('fail'))
-        .pipe(reload({stream: true, once: true}));
-});
-
 gulp.task('html', function () {
     return gulp.src('app/**/*.html')
         .pipe($.useref.assets({searchPath: '{.tmp,app}'}))
+        // Concatenate And Minify JavaScript
         .pipe($.if('*.js', $.uglify()))
+        // Concatenate And Minify Styles
         .pipe($.if('*.css', $.csso()))
+        // Remove Any Unused CSS
         .pipe($.if('*.css', $.uncss({ html: ['app/index.html','app/styleguide/index.html'] })))
         .pipe($.useref.restore())
         .pipe($.useref())
+        // Update Production Styleguide Paths 
         .pipe($.replace('components/components.css', 'components/main.min.css'))
+        // Minify Any HTML
         .pipe($.minifyHtml())
+        // Output Files
         .pipe(gulp.dest('dist'))
         .pipe($.size({title: 'html'}));
 });
 
-gulp.task('images', function () {
+// Clean Output Directory
-    return gulp.src('app/images/**/*')
-        .pipe($.cache($.imagemin({
-            progressive: true,
-            interlaced: true
-        })))
-        .pipe(gulp.dest('dist/images'))
-        .pipe(reload({stream: true, once: true}))
-        .pipe($.size({title: 'images'}));
-});
-
-gulp.task('pagespeed', pagespeed.bind(null, {
-    // By default, we use the free (no API key) tier
-    // You can use a Google Developer API key if you
-    // have one. See http://goo.gl/RkN0vE for info
-    // key: 'YOUR_API_KEY'
-    url: PUBLIC_URL,
-    strategy: 'mobile'
-}));
-
 gulp.task('clean', function (cb) {
     rimraf('dist', rimraf.bind({}, '.tmp', cb));
 });
 
+// Watch Files For Changes & Reload
 gulp.task('serve', function () {
     browserSync.init(null, {
         server: {
@@ -124,10 +129,23 @@ gulp.task('serve', function () {
     gulp.watch(['app/images/**/*'], ['images']);
 });
 
+// Build Production Files
 gulp.task('build', function (cb) {
     runSequence('styles', ['jshint', 'html', 'images'], cb);
 });
 
+// Default Task
 gulp.task('default', ['clean'], function (cb) {
     gulp.start('build', cb);
 });
+
+// Run PageSpeed Insights 
+// Update `url` below to the public URL for your site
+gulp.task('pagespeed', pagespeed.bind(null, {
+    // By default, we use the PageSpeed Insights 
+    // free (no API key) tier. You can use a Google 
+    // Developer API key if you have one. See 
+    // http://goo.gl/RkN0vE for info key: 'YOUR_API_KEY'
+    url: 'https://example.com',
+    strategy: 'mobile'
+}));