diff --git a/gulpfile.js b/gulpfile.js index 488cd674..37768b04 100644 --- a/gulpfile.js +++ b/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 -var PUBLIC_URL = 'https://example.com'; +// Lint JavaScript +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 () { - return gulp.src('app/scripts/**/*.js') - .pipe($.jshint()) - .pipe($.jshint.reporter('jshint-stylish')) - .pipe($.jshint.reporter('fail')) - .pipe(reload({stream: true, once: true})); -}); - +// Scan Your HTML For Assets & Optimize Them 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 () { - 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' -})); - +// Clean Output Directory 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' +}));