Skip to content

Instantly share code, notes, and snippets.

@justinwhall
Last active January 5, 2018 18:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save justinwhall/6468d6db11bc11db9616c2098cd64f2f to your computer and use it in GitHub Desktop.
Save justinwhall/6468d6db11bc11db9616c2098cd64f2f to your computer and use it in GitHub Desktop.
Simple Gulp dev/build
var gulp = require( 'gulp' );
var gulpif = require( 'gulp-if' );
var browserSync = require( 'browser-sync' ).create();
var babel = require( 'gulp-babel' );
var sass = require( 'gulp-sass' );
var sourcemaps = require( 'gulp-sourcemaps' );
var autoprefixer = require( 'gulp-autoprefixer' );
var concat = require( 'gulp-concat' );
var cssnano = require( 'gulp-cssnano' );
var uglify = require( 'gulp-uglify' );
var notify = require( 'gulp-notify' );
var rename = require( 'gulp-rename' );
var changed = require( 'gulp-changed' );
var scsslint = require( 'gulp-scss-lint' );
var cache = require( 'gulp-cached' );
var runSequence = require( 'run-sequence' );
var handleErrors = function () {
var args = Array.prototype.slice.call( arguments );
// Send error to notification center with gulp-notify
notify.onError( {
title: "Compile Error",
message: "<%= error %>"
} ).apply( this, args );
// Keep gulp from hanging on this task
this.emit( 'end' );
};
// Set NODE_ENV to development by default
process.env.NODE_ENV = 'development';
// Set NODE_ENV to production when building
gulp.task( 'set-prod-node-env', function () {
return process.env.NODE_ENV = 'production';
} );
// Build and concatonate justinwhall JS before reload
gulp.task( 'reloadJS', [ 'scripts' ], function () {
browserSync.reload();
} );
// Open new browser window if --open flag is set
gulp.task( 'browser-sync', function () {
var option, i = process.argv.indexOf( "--open" );
if ( i > -1 ) {
// option = process.argv[i+1];
option = process.argv[ i ];
}
browserSync.init( {
proxy: 'http://justinwhall.wtf',
open: ( option ) ? true : true
} );
} );
gulp.task( 'sass', function () {
return gulp.src( "./assets/sass/milligram.sass" )
.pipe( sourcemaps.init() )
.pipe( sass() )
.on( 'error', handleErrors )
.pipe( autoprefixer( { browsers: [ 'last 3 versions' ] } ) )
.pipe( concat( 'justinwhall.css' ) )
.pipe( cssnano( {
'safe': true, // Use safe optimizations.
keepSpecialComments: 1
} ) )
.pipe( sourcemaps.write( './' ) )
.pipe( gulp.dest( './assets/dist/' ) )
.pipe( browserSync.stream() );
} );
// justinwhall JavaScript. Included in every page. Concatonated & minified to justinwhall.min.js
gulp.task( 'scripts', function () {
return gulp.src( [
// tweenMax
'./node_modules/gsap/src/uncompressed/TweenMax.js',
// Navigation
'./assets/js/justinwhall.js',
// comment reply
'./assets/js/comments.js'
] )
.pipe( sourcemaps.init() )
.pipe( concat( 'justinwhall.min.js' ) )
.pipe( babel( { "presets": [ [ "babel-preset-env", { modules: false }] ] } ) )
.pipe( gulpif( process.env.NODE_ENV === 'production', uglify() ) )
.pipe( sourcemaps.write( '.' ) ) // Creates sourcemap for minified JS
.pipe( gulp.dest( './assets/dist' ) )
} );
// Spin up dev
gulp.task( 'dev', [ 'browser-sync' ], function () {
// Compile & lint SASS on change
gulp.watch( "./assets/sass/*.sass", { interval: 500 }, [ 'sass' ] );
// Reload on PHP/JS changes
gulp.watch( [ "./**/*.php", "!./node_modules/**" ], { interval: 500 }, browserSync.reload );
gulp.watch( [ "./assets/js/*.js", "!./node_modules/**/*.js", '!./assets/scripts/dist/**' ], { interval: 500 }, [ 'reloadJS' ] );
} )
// Build for production
gulp.task( 'build', [ 'set-prod-node-env' ], function () {
runSequence(
'sass',
'scripts'
);
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment