Skip to content

Instantly share code, notes, and snippets.

@GJSmith3rd

GJSmith3rd/gulpfile.js

Created July 25, 2015 17:47
Show Gist options
  • Save GJSmith3rd/c1a86c5b399547f5ddc9 to your computer and use it in GitHub Desktop.
Save GJSmith3rd/c1a86c5b399547f5ddc9 to your computer and use it in GitHub Desktop.
Download ZIP
Gulp file that starts a node.js app and performs other tasks like auto restarting browsers, injecting CSS and JS, Linting, etc.
Raw
gulpfile.js
/// <reference path="typings/tsd.d.ts" />
var gulp = require('gulp');
var args = require('yargs').argv;
var browserSync = require('browser-sync');
//require func-sion containing config variable and run
var config = require('./gulp.config.js')();
var del = require('del');
//auto gulp-load-plugin loader
var $ = require('gulp-load-plugins')({ lazy: true });
var port = process.env.PORT || config.defaultPort;
gulp.task('help', $.taskListing);
// gulp plugins no needed to gulp-plugin-loader $.plugin
// var jshint = require('gulp-jshint');
// var jscs = require('gulp-jscs');
// var util = require('gulp-util');
// var gulpprint = require('gulp-print');
// var gulpif = require('gulp-if');
gulp.task('vet', function () {
log('Analyzing source with JSHint and JSCS');
return gulp
.src
//moved into gulp.config.js as config.alljs
// ([
// './src/**/*.js',
// './*.js'
// ])
(config.alljs)
.pipe($.if(args.verbose, $.print()))
.pipe($.jscs())
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish', { verbose: true }))
.pipe($.jshint.reporter('fail'));
});
gulp.task('vet-es', function () {
log('Analyzing source with ESlint and JSCS');
return gulp
.src
//moved into gulp.config.js as config.alljs
// ([
// './src/**/*.js',
// './*.js'
// ])
(config.alljs)
.pipe($.if(args.verbose, $.print()))
.pipe($.jscs())
.pipe($.eslint());
//.pipe($.eslint('eslint-stylish', { verbose: true }))
//.pipe($.eslint.reporter('fail'));
});
//task styles runs task clean-styles first then runs
gulp.task('styles', ['clean-styles'], function () {
log('Compiling Less ---> CSS');
return gulp
.src
(config.less) //TODO add the config
.pipe($.plumber())
.pipe($.less())
//error handling using errorLogger function
//.on('error', errorLogger)
//replaced with gulp-plumber
.pipe($.autoprefixer({ browsers: ['last 2 version', '> 5%'] }))
.pipe(gulp.dest(config.temp));
});
//task clean-styles callback waits for done then runs
gulp.task('clean-styles', function (done) {
var files = config.temp + '**/*.css';
clean(files, done);
});
//task less-watcher run tasks styles if there are changes
gulp.task('less-watcher', function () {
gulp.watch([config.less], ['styles']);
});
gulp.task('hello-world', function () {
console.log('This is our first Gulp task!');
});
//wiredep and inject to manage index.html scripts and dependencies
gulp.task('wiredep', function () {
log('Wire up the bower css js and our app js into the html');
var options = config.getWiredepDefaultOptions();
var wiredep = require('wiredep').stream;
return gulp
.src(config.index)
.pipe(wiredep(options))
.pipe($.inject(gulp.src(config.js)))
.pipe(gulp.dest(config.client));
});
//wiredep and inject to manage index.html scripts and dependencies
gulp.task('inject', ['wiredep', 'styles'], function () {
log('Inject the custom css into the app html');
return gulp
.src(config.index)
.pipe($.inject(gulp.src(config.css)))
.pipe(gulp.dest(config.client));
});
//automate node server start and restart on changes
gulp.task('serve-dev', ['inject'], function () {
log('Start pre processes and node server...');
var isDev = true;
var nodeOptions = {
script: config.nodeServer,
delayTime: 3,
env: {
'PORT': port,
'NODE_ENV': isDev ? 'dev' : 'build'
},
watch: [config.server]
};
return $.nodemon(nodeOptions)
.on('restart', ['vet'], function (ev) {
log('*** nodemon restarted');
log('files changes on restart:\n' + ev);
setTimeout(function () {
browserSync.notify('reloading now ...');
browserSync.reload({stream: false});
}, config.browserReloadDelay);
})
.on('start', function () {
log('*** nodemon started');
startBrowserSync();
})
.on('crash', function () {
log('*** nodemon crashed: script crashed for some reason');
})
.on('exit', function () {
log('*** nodemon exited cleanly');
});
});
////////////
//Handle errors with logging
//replaced with gulp-plumber
// function errorLogger(error) {
// log('*** Start of Error ***');
// log(error);
// log('*** End of Error ***');
// this.emit('end');
// }
function changeEvent(event) {
var srcPattern = new RegExp('/.^(?=/' + config.source + ')/');
log('File ' + event.path.replace(srcPattern, '') + ' ' + event.type);
}
function startBrowserSync() {
//disable browserSync with --nosync arg
if (args.nosync || browserSync.active) {
return;
}
log('Starting browser-sync on port ' + port);
gulp.watch([config.less], ['styles'])
.on('change', function (event) {
changeEvent(event);
});
var options = {
port: 3099,
proxy: 'localhost:' + port,
files: [
config.client + '**/*.*',
'!' + config.less,
config.temp + '**/*.css'
],
ghostMode: {
clicks: true,
location: false,
forms: true,
scroll: true
},
injectChanges: true,
logFileChanges: true,
logLevel: 'debug',
logPrefix: 'gulp-patterns',
notify: true,
reloadDelay: 5000
};
browserSync(options);
}
//task clean dels path and returns done to callback
function clean(path, done) {
log('Cleaning ' + $.util.colors.blue(path));
del(path, done);
}
//function log checks for objects and iterates and prints or just prints
function log(msg) {
if (typeof (msg) === 'object') {
for (var item in msg) {
if (msg.hasOwnProperty(item)) {
$.util.log($.util.colors.blue(msg[item]));
}
}
} else {
$.util.log($.util.colors.blue(msg));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment