Skip to content

Instantly share code, notes, and snippets.

@rc1
Last active September 4, 2018 01:23
Show Gist options
  • Save rc1/886084a0140b931ca075205ccc871c1a to your computer and use it in GitHub Desktop.
Save rc1/886084a0140b931ca075205ccc871c1a to your computer and use it in GitHub Desktop.
A single gulpfile which can be configured via run scripts. Puts configuration over code, contradicting the goal of gulp. But handy when you need to do the same thing over and over again quickly.
// Modules
// =======
//
// gulp gulp-plumber gulp-concat gulp-if gulp-rename gulp-sourcemaps browser-sync gulp-csso gulp-less gulp-autoprefixer gulp-uglify gulp-babel babel-preset-es2015 gulp-jade git://github.com/oroce/gulp-jade-php#v2.0.0-0 gulp-sass
// Gulp
// ----
var gulp = require( 'gulp' );
var gulpif = require( 'gulp-if' );
var concat = require( 'gulp-concat' );
var plumber = require( 'gulp-plumber' );
var sourcemaps = require( 'gulp-sourcemaps' );
var rename = require( 'gulp-rename' );
// Watch
// -----
var browserSync = require( 'browser-sync' ).create();
// Sass
// ----
var sass = require( 'gulp-sass' );
// Less
// ----
var less = require( 'gulp-less' );
// CSS
// ---
var csso = require( 'gulp-csso' );
var autoprefixer = require( 'gulp-autoprefixer' );
// Jade
// ----
var jade = require( 'gulp-pug' );
// JadePHP
// -------
var jadePhp = require( 'gulp-jade-php' );
// JS
// --
var babel = require( 'gulp-babel' );
var uglify = require( 'gulp-uglify' );
// Config
// ======
/*
Options only please.
Use a caller script set specific configurations (hostname based, dev/production etc).
Keep this generic so it can copy/pasted to other projects/contexts.
### Example
Create an file called `gulp-config-local.env` containing:
export DESTINATION="./.." \
USE_JADE_PRETTY=1 \
USE_JS_SOURCEMAPS=1 \
USE_JS_UGLYFY=1 \
USE_BROWSER_SYNC=1 \
BROWSER_SYNC_FROM_URL="rosscairns.local:80" \
BROWSER_SYNC_TO_PORT=8000
Then create a file called `script-gulp.sh`
##!/bin/bash
if [ "$#" -lt 1 ]; then
echo "[ Warning ] Did you forget a gulp argument like start?"
fi
. gulp-config-local.env
gulp "$@"
The set the file to be exectuable with `chmod u+x script-gulp.sh`
Then run: `./script-gulp.sh start`.
*/
// Destination
// -----------
var DESTINATION = useIfDefined( process.env.DESTINATION ).or( './..' );
// Jade
// ----
var USE_JADE_PRETTY = !!process.env.USE_JADE_PRETTY;
// JS
// --
var USE_JS_SOURCEMAPS = !!process.env.USE_JS_SOURCEMAPS;
var USE_JS_UGLYFY = !!process.env.USE_JS_UGLYFY;
// CSS
// ---
var USE_CSS_SOURCEMAPS = !!process.env.USE_CSS_SOURCEMAPS;
// BrowserSync
// -----------
var USE_BROWSER_SYNC = !!process.env.USE_BROWSER_SYNC;
var BROWSER_SYNC_FROM_URL = useIfDefined( process.env.BROWSER_SYNC_FROM_URL ).or( 'localhost:80' );
var BROWSER_SYNC_TO_PORT = parseInt( useIfDefined( process.env.BROWSER_SYNC_TO_PORT ).or( 8080 ), 10 );
// Tasks
// ======
// Default
// -------
gulp.task( 'default', [ 'jade', 'jade-php', 'sass', 'less', 'js', 'js-concat', 'copy' ] );
// Start
// -----
gulp.task( 'start', [ 'default', 'watch' ] );
// Jade
// ----
gulp.task( 'jade', function () {
return gulp.src( [ 'jade/**/*.jade', '!jade/**/*.php.jade', '!jade/includes/**/*.jade' ] )
.pipe( plumber() )
.pipe( jade( { pretty: USE_JADE_PRETTY } ) )
.pipe( gulp.dest( DESTINATION ) );
});
// Jade PHP
// --------
gulp.task( 'jade-php', function () {
return gulp.src( [ 'jade/**/*.php.jade', '!jade/includes/**/*.php.jade' ] )
.pipe( plumber( {
errorHandler: function ( err ) {
console.error( 'jade-php error' );
console.error( err );
}
}))
.pipe( rename( function ( path ) {
path.basename = path.basename.replace( '.php', '' );
}))
.pipe( jadePhp( { pretty: USE_JADE_PRETTY, usestrip: true } ) )
.pipe( gulp.dest( DESTINATION ) );
});
// JS Contact
// ----------
// These are JS file which only need concatinating into libs.js (i.e. mininfied libaries)
gulp.task( 'js-concat', function () {
return gulp.src( [ 'js-concat/**/*.js' ] )
.pipe( plumber() )
.pipe( concat( 'concat.js' ) )
.pipe( gulp.dest( DESTINATION + '/js' ) );
});
// JS
// --
gulp.task( 'js', function () {
return gulp.src( [ './js/**/*.js', './js/main.js' ] )
.pipe( plumber() )
.pipe( gulpif( USE_JS_SOURCEMAPS, sourcemaps.init() ) )
.pipe( babel( { presets: [ 'es2015' ] } ) )
.pipe( concat( 'all.js' ) )
.pipe( gulpif( USE_JS_UGLYFY, uglify() ) )
.pipe( gulpif( USE_JS_SOURCEMAPS, sourcemaps.write( '.' ) ) )
.pipe( gulp.dest( DESTINATION + '/js' ) );
});
// Sass
// ----
gulp.task( 'sass', function () {
return gulp.src( './sass/*.scss' )
.pipe( plumber() )
.pipe( sass().on( 'error', sass.logError ) )
.pipe( autoprefixer( { browsers: [ 'last 3 versions' ] }) )
.pipe( csso() )
.pipe( gulp.dest( DESTINATION + '/css' ) )
.pipe( browserSync.stream( { match: '**/*.css' } ) );
});
// Less
// ----
gulp.task( 'less', function () {
return gulp.src( './less/*.less' )
.pipe( plumber() )
.pipe( gulpif( USE_CSS_SOURCEMAPS, sourcemaps.init()))
.pipe( less() )
.pipe( autoprefixer( { browsers: [ 'last 3 versions' ] }) )
.pipe( csso() )
.pipe( gulpif( USE_CSS_SOURCEMAPS, sourcemaps.write( '.' ) ) )
.pipe( gulp.dest( DESTINATION + '/css' ) )
.pipe( browserSync.stream( { match: '**/*.css' } ) );
});
// Copy
// ----
gulp.task( 'copy', function () {
return gulp.src( [ './copy/**' ] )
.pipe( gulp.dest( DESTINATION ) );
});
// Watch
// -----
gulp.task('watch', function () {
if ( USE_BROWSER_SYNC ) {
browserSync.init({
port: BROWSER_SYNC_TO_PORT,
proxy: BROWSER_SYNC_FROM_URL,
ui: { port: BROWSER_SYNC_TO_PORT + 1 },
browser: []
});
}
gulp.watch( [ 'jade/**/*.jade', '!jade./**/*.php.jade' ], [ 'jade' ] )
.on( 'change', browserSync.reload );
gulp.watch( 'jade/**/*.php.jade', [ 'jade-php' ] )
.on( 'change', browserSync.reload );
gulp.watch( './sass/*.scss', [ 'sass' ] );
gulp.watch( 'less/**/*.less', [ 'less' ] );
gulp.watch( 'js-concat/**/*', [ 'js-concat' ] )
.on( 'change', browserSync.reload );
gulp.watch( 'js/**/*', [ 'js' ] )
.on( 'change', browserSync.reload );
gulp.watch( 'copy/**/*', [ 'copy' ] )
.on( 'change', browserSync.reload );
});
// Utils
// =====
function useIfDefined( arg ) {
return {
or: function ( alternative ) {
return arg ? arg : alternative;
}
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment