Comment-up the Gulpfile

master
Addy Osmani 2014-06-19 13:14:21 +01:00
parent f22738e3ba
commit 367f2a2f0e
1 changed files with 48 additions and 30 deletions

View File

@ -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'
}));