Skip to content

Instantly share code, notes, and snippets.

@mbcooper
Created December 19, 2014 15:56
Show Gist options
  • Save mbcooper/901bdc4fd120923dd643 to your computer and use it in GitHub Desktop.
Save mbcooper/901bdc4fd120923dd643 to your computer and use it in GitHub Desktop.
My port of my Grunt file ....
/**
* Created by mike on 12/8/2014.
*/
module.exports = {
build_dir: 'build',
dev_dir: 'dev',
path_dir: 'src/common/config',
connectPort: 3444,
app_files: {
js: [
'src/**/*.js',
'!src/**/*.spec.js',
'!src/assets/**/*.js',
'!src/common/mocks/**'
],
jsunit: ['src/**/*.spec.js'],
atpl: ['src/app/**/*.tpl.html'],
ctpl: ['src/common/**/*.tpl.html'],
html: ['src/index.html'],
less: 'src/less/main.less',
assets: ['src/assets/**', '!src/assets/README.md']
},
vendor_files: {
js: [
'vendor/angular/angular.js',
'vendor/angular-animate/angular-animate.js',
'vendor/angular-sanitize/angular-sanitize.js',
'vendor/angular-ui-router/release/angular-ui-router.js',
'vendor/lodash/dist/lodash.js',
'vendor/angular-bootstrap/ui-bootstrap-tpls.js',
'vendor/moment/moment.js',
'vendor/angular-moment/angular-moment.js',
'vendor/angular-messages/angular-messages.js',
'vendor/angular-ui-select/dist/select.js',
'vendor/AngularJS-Toaster/toaster.js',
'vendor/angular-local-storage/dist/angular-local-storage.js'
],
jskarma: [
'vendor/angular/angular.min.js',
'vendor/angular-animate/angular-animate.min.js',
'vendor/angular-sanitize/angular-sanitize.min.js',
'vendor/angular-mocks/angular-mocks.js',
'vendor/angular-ui-router/release/angular-ui-router.min.js',
'vendor/lodash/dist/lodash.min.js',
'vendor/angular-bootstrap/ui-bootstrap-tpls.min.js',
'vendor/moment/min/moment.min.js',
'vendor/angular-moment/angular-moment.min.js',
'vendor/angular-messages/angular-messages.min.js',
'vendor/angular-ui-select/dist/select.min.js',
'vendor/AngularJS-Toaster/toaster.js',
'vendor/angular-local-storage/dist/angular-local-storage.min.js',
'src/common/mocks/**',
'fixtures/**/*.js'
],
css: [],
assets: [],
fonts: [
'vendor/font-awesome/fonts/FontAwesome.otf',
'vendor/font-awesome/fonts/fontawesome-webfont.eot',
'vendor/font-awesome/fonts/fontawesome-webfont.svg',
'vendor/font-awesome/fonts/fontawesome-webfont.ttf',
'vendor/font-awesome/fonts/fontawesome-webfont.woff',
'vendor/angular-ui-grid/ui-grid.eot',
'vendor/angular-ui-grid/ui-grid.svg',
'vendor/angular-ui-grid/ui-grid.woff',
'vendor/angular-ui-grid/ui-grid.ttf',
'vendor/bootstrap/fonts/glyphicons-halflings-regular.eot',
'vendor/bootstrap/fonts/glyphicons-halflings-regular.svg',
'vendor/bootstrap/fonts/glyphicons-halfings-regular.ttf',
'vendor/bootstrap/fonts/glyphicons-halflings-regular.woff'
]
}
};
/**
* Created by michael.cooper on 12/1/2014.
*/
'use strict';
var
gulp = require('gulp'),
_ = require('lodash'),
template = require('gulp-template'),
merge = require('gulp-merge'),
jshint = require('gulp-jshint'),
minifyCss = require('gulp-minify-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
del = require('del'),
inject = require('gulp-inject'),
liveReload = require('gulp-livereload'),
copy = require('gulp-copy'),
connect = require('gulp-connect'),
orderedStream = require('stream-series'),
order = require('gulp-order'),
bump = require('gulp-bump'),
less = require('gulp-less'),
karma = require('gulp-karma'),
annotate = require('gulp-ng-annotate'),
html2js = require('gulp-html2js'),
htmlmin = require('gulp-htmlmin'),
nodemon = require('gulp-nodemon'),
ngConstant = require('gulp-ng-constant'),
notify = require('gulp-notify'),
ignore = require('gulp-ignore'),
util = require('gulp-util'),
colors = require('colors'),
toDo = require('gulp-todo'),
runSequence = require('run-sequence'),
program = require('commander'),
json2Js = require('gulp-ng-json2js');
var WATCH_MODE = 'watch',
RUN_MODE = 'run',
VENDOR_PATH = /^vendor\/.*\/([^\/]*)$/;
var userConfig = require('./config/buildConfig.js');
var pkg = require('./package.json');
var mode = WATCH_MODE;
function list(val) {
return val.split(',');
}
/**
* sets up constants for different build environments.
* MOVE: to config dir
*
*/
var pathConfigs = {
working: {
"ENVIRONMENT": {
"ENV": "working",
"API_PATH": "http://localhost:47269/",
"VERSION": 'v ' + pkg.version
}
},
dev: {
"ENVIRONMENT": {
"ENV": "prod",
"API_PATH": "https://tigerx.azurewebsites.net/",
"VERSION": 'v ' + pkg.version
}
}
};
var htmlMinOptions = {
collapseBooleanAttributes: false,
collapseWhitespace: true,
conservativeCollapse: true,
removeAttributeQuotes: false,
removeComments: true,
removeEmptyAttributes: false,
removeRedundantAttributes: false,
removeScriptTypeAttributes: false,
removeStyleLinkTypeAttributes: false,
caseSensitive: true
};
program
.version('0.0.1')
.option('-t, --tests [glob]', 'Specify which tests to run')
.option('-b, --browsers <items>', 'Specify which browsers to run on', list)
.option('-r, --reporters <items>', 'Specify which reporters to use', list)
.parse(process.argv);
/**
* sets up simple node connect server with live reload
*/
gulp.task(
'connect', function () {
connect.server(
{
root: 'build',
fallback: 'build/index2.html',
port: userConfig.connectPort,
livereload: true
}
);
}
);
/**
* Bumps build version of bower and package
*/
gulp.task(
'bump', function (cb) {
return gulp.src(['./bower.json', './package.json'])
.pipe(bump({type: 'patch'}))
.pipe(gulp.dest('./'));
}
);
/**
* lints file from .jshintrc
*/
gulp.task(
'lint', function () {
return gulp.src(userConfig.app_files.js)
.pipe(jshint())
.pipe(jshint.reporter('default'));
}
);
/**
* creates build-dependent constants module
* - for working dir
*/
gulp.task(
'ngConstant-working', function (cb) {
var options = pathConfigs.working;
constantBuild(options, cb);
}
);
gulp.task(
'ngConstant-dev', function (cb) {
var options = pathConfigs.dev;
constantBuild(options, cb);
}
);
var constantBuild = function (options, cb) {
var path = userConfig.path_dir + '/path.js';
del(
path, function (err, deletedFiles) {
gulp.src('config/path.json')
.pipe(
ngConstant(
{
constants: options
}
)
)
.pipe(gulp.dest(userConfig.path_dir));
}
);
cb();
};
/**
* makes the compressed html templates for app
*/
gulp.task(
'html2js-app', function () {
return gulp.src(userConfig.app_files.atpl)
.pipe(
htmlmin(
htmlMinOptions
)
)
.pipe(
html2js(
{
useStrict: true,
base: 'src/app',
outputModuleName: 'templates-app'
}
)
)
.pipe(concat('templates-app.js'))
.pipe(gulp.dest(userConfig.build_dir));
}
);
/**
* makes the compressed html templates for common
*
* */
gulp.task(
'html2js-common', function () {
return gulp.src(userConfig.app_files.ctpl)
.pipe(
htmlmin(
htmlMinOptions
)
)
.pipe(
html2js(
{
useStrict: true,
base: 'src/common',
outputModuleName: 'templates-common'
}
)
)
.pipe(concat('templates-common.js'))
.pipe(gulp.dest(userConfig.build_dir));
}
);
/**
* clean out build directory
*/
gulp.task(
'clean', function (cb) {
del([userConfig.build_dir], {}, cb);
}
);
/**
* clean out build directory
*/
gulp.task(
'clean-dev', function (cb) {
del([userConfig.dev_dir], {}, cb);
}
);
/**
* convert less files to css and merge with vendor css files
* */
gulp.task(
'lessCss', function (cb) {
var cssTarget = pkg.name + '-' + pkg.version + '.css';
merge(
gulp.src(userConfig.app_files.less)
.pipe(less()),
gulp.src(userConfig.vendor_files.css)
)
.pipe(concat(cssTarget))
.pipe(gulp.dest(userConfig.build_dir + '/assets/css'));
cb();
}
);
gulp.task(
'lessCss-dev', function (cb) {
var cssTarget = pkg.name + '-' + pkg.version + '.css';
return gulp.src(userConfig.build_dir + '/assets/css/' + cssTarget)
.pipe(
minifyCss()
)
.pipe(gulp.dest(userConfig.dev_dir + '/assets/css/'));
}
);
/**
* copy user js files
* */
gulp.task(
'buildJs-app', function (cb) {
return gulp.src(userConfig.app_files.js)
.pipe(gulp.dest(userConfig.build_dir + '/src'));
}
);
/**
* copy vendor js files
* */
gulp.task(
'buildJs-vendor', function (cb) {
return gulp.src(userConfig.vendor_files.js)
.pipe(gulp.dest(userConfig.build_dir + '/vendor'));
}
);
/**
* copy assets
* */
gulp.task(
'copySupport', function (cb) {
gulp.src(userConfig.app_files.assets)
.pipe(gulp.dest(userConfig.build_dir + '/assets'));
gulp.src(userConfig.vendor_files.assets)
.pipe(gulp.dest(userConfig.build_dir + '/assets'));
gulp.src(userConfig.vendor_files.fonts)
.pipe(gulp.dest(userConfig.build_dir + '/assets/fonts'));
cb();
}
);
gulp.task(
'copySupport-dev', function (cb) {
return gulp.src(
[userConfig.build_dir + '/assets/**',
'!' + userConfig.build_dir + '/assets/css/**']
)
.pipe(gulp.dest(userConfig.dev_dir + '/assets'));
}
);
// generate a todo.md from your javascript files
gulp.task(
'todo', function () {
gulp.src('src/**/*.js')
.pipe(toDo())
.pipe(gulp.dest('./'));
// -> Will output a TODO.md with your todos
}
);
gulp.task(
'karma', function () {
return gulp.src('/src/app/app.js')
.pipe(
karma(
{
configFile: userConfig.build_dir + '/karma.conf.js',
action: 'run'
}
)
.on(
'error', function (err) {
// Make sure failed tests cause gulp to exit non-zero
console.log(colors.red.underline('Tests failed'));
}
)
);
}
);
gulp.task(
'karma-coverage', function () {
return gulp.src('/src/app/common/*.js')
.pipe(
karma(
{
configFile: userConfig.build_dir
+ '/karma-coverage.conf.js',
action: 'run'
}
)
.on(
'error', function (err) {
// Make sure failed tests cause gulp to exit non-zero
console.log(colors.red.underline('Coverage failed'));
}
)
);
}
);
/**
* configure karma tests
* */
gulp.task(
'karmaConfig', function (cb) {
// manufacture the karma
var target = gulp.src('./karma/karma.conf.js')
.pipe(template({files: userConfig.vendor_files.jskarma}))
.pipe(gulp.dest(userConfig.build_dir));
var target2 = gulp.src('./karma/karma-coverage.conf.js')
.pipe(template({files: userConfig.vendor_files.jskarma}))
.pipe(gulp.dest(userConfig.build_dir));
cb();
}
);
/**
* copy flattens vendor directory, so we chop out middle
* @param {string} rootName
* @return {string}
* @example
* 'vendor/angular/angular.js' to 'vendor/angular.js',
* 'vendor/lodash/dist/lodash.js' to 'vendor/lodash.js'
*/
var trimOutVendor = function (rootName) {
var parts = VENDOR_PATH.exec(rootName);
return parts[1];
};
/**
* build index page with injected scripts
* */
gulp.task(
'index', function () {
// create ordered vendor file list to inject
var files = [];
_.each(
userConfig.vendor_files.js, function (vendor) {
files.push('vendor/' + trimOutVendor(vendor));
}
);
var target = gulp.src('./src/index2.html')
.pipe(template({files: files}));
var sources = orderedStream(
gulp.src(
[userConfig.build_dir + '/*.js'],
{read: false}
),
gulp.src(
[userConfig.build_dir + '/src/**/*.js',
userConfig.build_dir + '/**/*.css'],
{read: false}
)
);
return target.pipe(
inject(
sources,
{
ignorePath: '/build/',
addRootSlash: false
}
)
)
.pipe(gulp.dest(userConfig.build_dir));
}
);
gulp.task(
'console-wait', function (cb) {
console.log(colors.green('Watching ...'));
}
);
/**
* complete build
* */
gulp.task(
'build', function (cb) {
console.log(colors.green.underline('Building ' + pkg.name));
runSequence(
'clean',
'lint',
['ngConstant-working', 'html2js-app', 'html2js-common',
'lessCss', 'copySupport', 'todo'],
['buildJs-app', 'buildJs-vendor'],
['index', 'karmaConfig'],
cb
);
}
);
gulp.task(
'compile', function () {
var now = new Date();
var jsTarget = pkg.name + '-' + pkg.version + '.js';
var banner = '/**\n' +
' * ' + pkg.name + ' - v' + pkg.version + ' - ' + now.toString()
+ '\n' +
' * ' + pkg.homepage + '\n' +
' *\n' +
' * Copyright (c) ' + now.getFullYear() + ' '
+ pkg.author + '\n' +
' */\n';
var uglyOptions = {
output: {
preamble: banner
}
};
return gulp.src(
[userConfig.build_dir + '/vendor/**/*.js',
userConfig.build_dir + '/src/**/*.js',
userConfig.build_dir + '/templates-*.js'
]
)
.pipe(annotate())
.pipe(concat(jsTarget))
.pipe(uglify(uglyOptions))
.pipe(gulp.dest(userConfig.dev_dir));
}
);
gulp.task(
'index-dev', function () {
// create ordered vendor file list to inject
var sources = gulp.src(
[
userConfig.dev_dir + '/**/*.js',
userConfig.dev_dir + '/**/*.css'
], {read: false}
);
var templateFiles = {
files: [],
styles: []
};
var target = gulp.src('./src/index2.html')
.pipe(template(
{
files: templateFiles.files,
styles: templateFiles.styles
}));
return target.pipe(
gulp.src(sources, {addRootSlash: false})
)
.pipe(gulp.dest(userConfig.dev_dir));
}
);
gulp.task(
'build-dev', function (cb) {
console.log(colors.yellow.underline('Building dev deploy' + pkg.name));
runSequence(
['clean', 'clean-dev'],
'lint',
['ngConstant-dev', 'html2js-app', 'html2js-common',
'lessCss', 'copySupport'],
['buildJs-app', 'buildJs-vendor'],
['index', 'karmaConfig'],
'karma',
'bump',
// dev construction
['lessCss-dev', 'copySupport-dev'],
// big concat
'compile',
'index-dev',
cb
);
}
);
// for now - default task
gulp.task(
'default', function (cb) {
runSequence(
'build',
['watch-mode', 'connect'],
'console-wait',
cb
)
}
);
/**
* Set up watchers
* */
gulp.task(
'watch-mode', function (cb) {
mode = WATCH_MODE;
var jsWatcher = gulp.watch(
['src/**/*.js'],
['buildJs-app', 'karma']
),
lessWatcher = gulp.watch('src/less/**/*.less', ['lessCss']),
htmlAppWatcher = gulp.watch(
'src/app/**/*.tpl.html',
['html2js-app']
),
htmlCommonWatcher = gulp.watch(
'src/common/**/*.tpl.html',
['html2js-common']
);
function changeNotification(event) {
console.log(
'File', event.path, 'was', event.type,
', running tasks...'
);
}
jsWatcher.on('change', changeNotification);
lessWatcher.on('change', changeNotification);
htmlAppWatcher.on('change', changeNotification);
htmlCommonWatcher.on('change', changeNotification);
cb();
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment