Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gulpfile for replicating ngboilerplate
//<editor-fold desc="Node Requires, gulp, etc">
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
csso = require('gulp-csso'),
debug = require('gulp-debug'),
footer = require('gulp-footer'),
gutil = require('gulp-util'),
gzip = require('gulp-gzip'),
header = require('gulp-header'),
help = require('gulp-task-listing'),
_if = require('gulp-if'),
inject = require('gulp-inject'),
jshint = require('gulp-jshint'),
karma = require('gulp-karma'),
less = require('gulp-less'),
livereload = require('gulp-livereload'),
livereloadEmbed = require('gulp-embedlr'),
minifyHtml = require('gulp-minify-html'),
ngHtml2js = require('gulp-ng-html2js'),
ngmin = require('gulp-ngmin'),
plumber = require('gulp-plumber'),
recess = require('gulp-recess'),
rename = require('gulp-rename'),
rev = require('gulp-rev'),
tap = require('gulp-tap'),
uglify = require('gulp-uglify'),
watch = require('gulp-watch'),
_ = require('lodash'),
anysort = require('anysort'),
connect = require('connect'),
es = require('event-stream'),
fs = require('fs'),
http = require('http'),
lazypipe = require('lazypipe'),
open = require('open'),
path = require('path'),
runSequence = require('run-sequence'),
server = require('tiny-lr')();
//</editor-fold>
// Load user config and package data
var cfg = require('./build.config.js');
// common variables
var concatName = cfg.pkg.name;
//=============================================
// MAIN TASKS
//=============================================
gulp.task('default', ['watch']);
gulp.task('server', ['watch'], function(cb) {
startServer(cb);
});
gulp.task('build', function(cb) {
runSequence(['build-assets', 'build-scripts', 'build-styles'], ['build-html', 'test'], cb);
});
gulp.task('watch', ['lr-server', 'build', 'test-watch'], function() {
watch({glob: cfg.watchFiles.js, emitOnGlob: false, name: 'JS'})
.pipe(plumber())
.pipe(jsBuildTasks())
.pipe(livereload(server));
watch({glob: cfg.watchFiles.tpl, emitOnGlob: false, name: 'Templates'})
.pipe(plumber())
.pipe(tplBuildTasks())
.pipe(livereload(server));
watch({glob: cfg.watchFiles.html, emitOnGlob: false, name: 'HTML'}, function() {
return buildHTML();
});
watch({glob: cfg.watchFiles.less, emitOnGlob: false, name: 'Styles'}, function() {
// run this way to ensure that a failed pipe doesn't break the watcher.
return buildStyles();
});
watch({glob: cfg.watchFiles.assets, emitOnGlob: false, name: 'Assets'})
.pipe(gulp.dest(join(cfg.buildDir, cfg.assetsDir)));
});
gulp.task('compile', function() {
runSequence(
'compile-clean',
['compile-assets', 'compile-scripts', 'compile-styles'],
'compile-html'
);
});
gulp.task('clean', ['compile-clean', 'build-clean']);
gulp.task('help', help);
//=============================================
// UTILITIES
//=============================================
function readFile(filename) {
return fs.existsSync(filename) ? fs.readFileSync(filename, {encoding: 'utf8'}) : '';
}
var join = path.join;
var embedLR = false;
function startServer(cb) {
var devApp, devServer, devAddress, devHost, url, log=gutil.log, colors=gutil.colors;
devApp = connect();
if(cfg.server.log) {
devApp.use(connect.logger(cfg.server.log===true ? 'dev' : cfg.server.log));
}
devApp.use(connect.static(cfg.buildDir));
devServer = http.createServer(devApp).listen(cfg.server.port, cfg.server.host||undefined);
devServer.on('error', function(error) {
log(colors.underline(colors.red('ERROR'))+' Unable to start server!');
cb(error);
});
devServer.on('listening', function() {
devAddress = devServer.address();
devHost = devAddress.address === '0.0.0.0' ? 'localhost' : devAddress.address;
url = 'http://' + devHost + ':' + devAddress.port + join('/', cfg.indexFile);
log('');
log('Started dev server at '+colors.magenta(url));
var openByDefault = cfg.server.openByDefault;
if(gutil.env.open || (openByDefault && gutil.env.open !== false)) {
log('Opening dev server URL in browser');
if(openByDefault) {
log(colors.gray('(Run with --no-open to prevent automatically opening URL)'));
}
// Open the URL in the browser at this point.
open(url);
} else if(!openByDefault) {
log(colors.gray('(Run with --open to automatically open URL on startup)'));
}
log('');
cb();
});
}
//=============================================
// SUB TASKS
//=============================================
//---------------------------------------------
// HTML
//---------------------------------------------
var buildHTML = function() {
var htmlFile = readFile(join(cfg.buildDir, cfg.indexFile));
return gulp.src([join(cfg.buildDir, '/**/*.*'), '!' + join(cfg.buildDir, cfg.indexFile)], {read: false})
.pipe(plumber())
.pipe(inject(cfg.appFiles.html, {
addRootSlash: false,
sort: fileSorter, // see below
ignorePath: join('/',cfg.buildDir,'/')
}))
.pipe(_if(embedLR, livereloadEmbed({port: cfg.server.lrPort})))
.pipe(gulp.dest(cfg.buildDir))
.pipe(tap(function(file) {
var newHtmlFile = file.contents.toString();
if(newHtmlFile !== htmlFile) {
htmlFile = newHtmlFile;
gulp.src(file.path).pipe(livereload(server));
}
}));
};
gulp.task('build-html', function() {
// NOTE: this task does NOT depend on buildScripts and buildStyles,
// therefore, it may incorrectly create the HTML file if called
// directly.
return buildHTML();
});
gulp.task('compile-html', function() {
// NOTE: this task does NOT depend on compileScripts and compileStyles,
// therefore, it may incorrectly create the HTML file if called
// directly.
return gulp.src([join(cfg.compileDir, '/**/*.*'), '!' + join(cfg.compileDir, cfg.indexFile)], {read: false})
.pipe(inject(cfg.appFiles.html, {
addRootSlash: false,
ignorePath: join('/', cfg.compileDir, '/')
}))
.pipe(minifyHtml({empty:true,spare:true,quotes:true}))
.pipe(gulp.dest(cfg.compileDir))
.pipe(gzip())
.pipe(gulp.dest(cfg.compileDir))
});
// used by build-html to ensure correct file order during builds
var fileSorter = (function(){
var as = anysort(_.flatten([
// JS files are sorted by original vendor order, common, app, then everything else
cfg.vendorFiles.js.map(function(f){ return join(cfg.jsDir, f); }),
join(cfg.jsDir, 'common/**/*.js'),
join(cfg.jsDir, 'app/**/*.js'),
join(cfg.jsDir, '**/*.js'),
// CSS order should be maintained via Less includes
join(cfg.cssDir, '**/*.css')
]));
return function(a,b){ return as(a.filepath, b.filepath) };
})();
//---------------------------------------------
// JavaScript
//---------------------------------------------
var jsFiles = function() { return gulp.src(cfg.appFiles.js); },
jsBaseTasks = lazypipe()
.pipe(plumber) // jshint won't render parse errors without plumber
.pipe(function() {
return jshint(_.clone(cfg.taskOptions.jshint));
})
.pipe(jshint.reporter, 'jshint-stylish'),
jsBuildTasks = jsBaseTasks
.pipe(gulp.dest, join(cfg.buildDir, cfg.jsDir)),
tplFiles = function() { return gulp.src(cfg.appFiles.tpl); },
tplBuildTasks = lazypipe()
.pipe(ngHtml2js, {moduleName: 'templates'})
.pipe(gulp.dest, join(cfg.buildDir, cfg.jsDir, cfg.templatesDir));
//noinspection FunctionWithInconsistentReturnsJS
gulp.task('build-scripts-vendor', function() {
if(cfg.vendorFiles.js.length) {
return gulp.src(cfg.vendorFiles.js, {base: cfg.vendorDir})
.pipe(gulp.dest(join(cfg.buildDir, cfg.jsDir, cfg.vendorDir)))
}
});
gulp.task('build-scripts-app', function() {
return jsFiles().pipe(jsBuildTasks());
});
gulp.task('build-scripts-templates', function() {
return tplFiles().pipe(tplBuildTasks());
});
gulp.task('build-scripts', ['build-scripts-vendor', 'build-scripts-app', 'build-scripts-templates']);
gulp.task('compile-scripts', function() {
var appFiles = jsFiles()
.pipe(jsBaseTasks())
.pipe(concat('appFiles.js')) // not used
.pipe(ngmin())
.pipe(header(readFile('module.prefix')))
.pipe(footer(readFile('module.suffix')));
var templates = tplFiles()
.pipe(minifyHtml({empty: true, spare: true, quotes: true}))
.pipe(ngHtml2js({moduleName: 'templates'}))
.pipe(concat('templates.min.js')); // not used
var files = [appFiles, templates];
if(cfg.vendorFiles.js.length) {
files.unshift(gulp.src(cfg.vendorFiles.js));
}
return es.concat.apply(es, files)
.pipe(concat(concatName + '.js'))
.pipe(uglify(cfg.taskOptions.uglify))
.pipe(rev())
.pipe(gulp.dest(join(cfg.compileDir, cfg.jsDir)))
.pipe(gzip())
.pipe(gulp.dest(join(cfg.compileDir, cfg.jsDir)))
});
//---------------------------------------------
// Less / CSS Styles
//---------------------------------------------
var styleFiles = function() { return gulp.src(cfg.appFiles.less); },
styleBaseTasks = lazypipe()
.pipe(recess, cfg.taskOptions.recess)
.pipe(less, cfg.taskOptions.less)
.pipe(autoprefixer),
buildStyles = function() {
return styleFiles()
.pipe(plumber())
.pipe(styleBaseTasks())
.pipe(gulp.dest(join(cfg.buildDir, cfg.cssDir)))
.pipe(livereload(server))
};
gulp.task('build-styles', function() {
return buildStyles();
});
gulp.task('compile-styles', function() {
return styleFiles()
.pipe(styleBaseTasks())
.pipe(rename(concatName + '.css'))
.pipe(csso(cfg.taskOptions.csso))
.pipe(rev())
.pipe(gulp.dest(join(cfg.compileDir, cfg.cssDir)))
.pipe(gzip())
.pipe(gulp.dest(join(cfg.compileDir, cfg.cssDir)))
});
//---------------------------------------------
// Unit Testing
//---------------------------------------------
var testFiles = function() {
return gulp.src(_.flatten([cfg.vendorFiles.js, cfg.testFiles.js, cfg.appFiles.jsunit]));
};
gulp.task('test', ['build-scripts'], function() {
return testFiles()
.pipe(karma({
configFile: cfg.testFiles.config
}))
});
gulp.task('test-watch', ['build-scripts', 'test'], function() {
// NOT returned on purpose!
testFiles()
.pipe(karma({
configFile: cfg.testFiles.config,
action: 'watch'
}))
});
//---------------------------------------------
// Assets
//---------------------------------------------
// If you want to automate image compression, or font creation,
// this is the place to do it!
//noinspection FunctionWithInconsistentReturnsJS
gulp.task('build-assets-vendor', function() {
if(cfg.vendorFiles.assets.length) {
return gulp.src(cfg.vendorFiles.assets, {base: cfg.vendorDir})
.pipe(gulp.dest(join(cfg.buildDir, cfg.assetsDir, cfg.vendorDir)))
}
});
gulp.task('build-assets', ['build-assets-vendor'], function() {
return gulp.src(cfg.appFiles.assets)
.pipe(gulp.dest(join(cfg.buildDir, cfg.assetsDir)))
});
//noinspection FunctionWithInconsistentReturnsJS
gulp.task('compile-assets-vendor', function() {
if(cfg.vendorFiles.assets.length) {
return gulp.src(cfg.vendorFiles.assets, {base: cfg.vendorDir})
.pipe(gulp.dest(join(cfg.compileDir, cfg.assetsDir, cfg.vendorDir)))
}
});
gulp.task('compile-assets', ['compile-assets-vendor'], function() {
return gulp.src(cfg.appFiles.assets)
.pipe(gulp.dest(join(cfg.compileDir, cfg.assetsDir)))
});
//---------------------------------------------
// Miscellaneous Tasks
//---------------------------------------------
gulp.task('lr-server', function() {
embedLR = true;
server.listen(cfg.server.lrPort, function(err) {
if(err) {
console.log(err);
}
gutil.log('Started LiveReload server');
});
});
gulp.task('build-clean', function() {
return gulp.src(cfg.buildDir, {read: false}).pipe(clean());
});
gulp.task('compile-clean', function() {
return gulp.src(cfg.compileDir, {read: false}).pipe(clean());
});
/**
* PLEASE NOTE: I HAVEN'T UPDATED THE COMMENTS IN THIS FILE!
*
* This file/module contains all configuration for the build process.
*/
var join = require('path').join,
bowerrc = JSON.parse(require('fs').readFileSync('./.bowerrc', {encoding: 'utf8'})),
bower = require(bowerrc.json.replace(/^\.?\/?/, './')),
pkg = require('./package.json'),
/**
* The `buildDir` folder is where our projects are compiled during
* development and the `compileDir` folder is where our app resides once it's
* completely built.
*/
buildDir = 'build',
compileDir = 'compile',
vendorDir = bowerrc.directory,
templatesDir = 'templates',
indexFile = 'index.html',
jsDir = 'js',
cssDir = 'css',
assetsDir = 'assets';
module.exports = {
buildDir: buildDir,
compileDir: compileDir,
// Relative paths to core files and folders for input and output
indexFile: indexFile,
jsDir: jsDir,
cssDir: cssDir,
assetsDir: assetsDir,
vendorDir: vendorDir,
templatesDir: templatesDir,
// allows settings reuse from package.json and bower.json
bower: bower,
pkg: pkg,
/**
* Settings for the server task
* When run, this task will start a connect server on
* your build directory, great for livereload
*/
server: {
port: 8081, // 0 = random port
host: null, // null/falsy means listen to all, but will auto open localhost
// Enable disable default auto open
// false: run with --open to open
// true: run with --no-open to not open, recommended if port is 0
openByDefault: false,
// set to false to prevent request logging
// set to any non-`true` value to configure the logger
log: false,
// Live Reload server port
lrPort: 35729
},
taskOptions: {
csso: false, // set to true to prevent structural modifications
jshint: {
eqeqeq: true,
camelcase: true,
freeze: true,
immed: true,
latedef: true,
newcap: true,
undef: true,
unused: true,
browser: true,
globals: {
angular: false,
console: false
}
},
less: {},
recess: {
strictPropertyOrder: false,
noOverqualifying: false,
noUniversalSelectors: false
},
uglify: {}
},
/**
* This is a collection of file patterns that refer to our app code (the
* stuff in `src/`). These file paths are used in the configuration of
* build tasks. `js` is all project javascript, less tests. `ctpl` contains
* our reusable components' (`src/common`) template HTML files, while
* `atpl` contains the same, but for our app's code. `html` is just our
* main HTML file, `less` is our main stylesheet, and `unit` contains our
* app's unit tests.
*/
appFiles: {
js: [ 'src/**/*.js', '!src/**/*.spec.js', '!src/assets/**/*.js' ],
jsunit: [ join(buildDir, '/**/*.js'), 'src/**/*.spec.js', '!'+join(buildDir,'/assets/**/*.js'), '!'+join(buildDir, vendorDir, '**/*.js') ],
tpl: [ 'src/app/**/*.tpl.html', 'src/common/**/*.tpl.html' ],
html: join('src', indexFile),
less: 'src/less/main.less',
assets: join('src', assetsDir, '**/*.*')
},
/**
* Similar to above, except this is the pattern of files to watch
* for live build and reloading.
*/
watchFiles: {
js: [ 'src/**/*.js', '!src/**/*.spec.js', '!src/assets/**/*.js' ],
//jsunit: [ 'src/**/*.spec.js' ], // watch is handled by the karma plugin!
tpl: [ 'src/app/**/*.tpl.html', 'src/common/**/*.tpl.html' ],
html: [ join(buildDir, '**/*'), '!'+join(buildDir,indexFile), join('src',indexFile) ],
less: [ 'src/**/*.less' ],
assets: join('src',assetsDir,'**/*.*')
},
/**
* This is a collection of files used during testing only.
*/
testFiles: {
config: 'karma/karma.conf.js',
js: [
'vendor/angular-mocks/angular-mocks.js'
]
},
/**
* This is the same as `app_files`, except it contains patterns that
* reference vendor code (`vendor/`) that we need to place into the build
* process somewhere. While the `app_files` property ensures all
* standardized files are collected for compilation, it is the user's job
* to ensure non-standardized (i.e. vendor-related) files are handled
* appropriately in `vendorFiles.js`.
*
* The `vendorFiles.js` property holds files to be automatically
* concatenated and minified with our project source files.
*
* The `vendorFiles.assets` property holds any assets to be copied along
* with our app's assets. This structure is flattened, so it is not
* recommended that you use wildcards.
*/
vendorFiles: {
js: [
'vendor/angular/angular.js',
'vendor/angular-ui-router/release/angular-ui-router.js'
],
assets: [
]
}
};
{
"author": "Phil DeJarnett",
"name": "example-gulpfile",
"version": "0.1.0",
"homepage": "http://www.overzealous.com",
"licenses": {
"type": "",
"url": ""
},
"bugs": "",
"repository": {
"type": "",
"url": ""
},
"dependencies": {},
"devDependencies": {
"anysort": "~0.1.1",
"event-stream": "*",
"gulp": "3.*",
"gulp-autoprefixer": "*",
"gulp-clean": "*",
"gulp-concat": "*",
"gulp-csso": "*",
"gulp-debug": "*",
"gulp-embedlr": "~0.5.2",
"gulp-footer": "*",
"gulp-gzip": "0.0.4",
"gulp-header": "*",
"gulp-if": "*",
"gulp-inject": "*",
"gulp-jshint": "*",
"gulp-karma": "*",
"gulp-less": "*",
"gulp-livereload": "*",
"gulp-minify-html": "*",
"gulp-ng-html2js": "*",
"gulp-ngmin": "*",
"gulp-plumber": "*",
"gulp-recess": "*",
"gulp-rename": "*",
"gulp-rev": "*",
"gulp-tap": "*",
"gulp-task-listing": "*",
"gulp-uglify": "*",
"gulp-util": "*",
"gulp-watch": "*",
"jshint-stylish": "*",
"lazypipe": "*",
"lodash": "~2.4.1",
"run-sequence": "*",
"tiny-lr": "0.0.5",
"connect": "~2.12.0",
"open": "0.0.4"
}
}
module.exports = function ( grunt ) {
/**
* Load required Grunt tasks. These are installed based on the versions listed
* in `package.json` when you do `npm install` in this directory.
*/
require('load-grunt-tasks')(grunt);
/**
* Load in our build configuration file.
*/
var userConfig = require( './build.config.js' );
/**
* This is the configuration object Grunt uses to give each plugin its
* instructions.
*/
var taskConfig = {
/**
* We read in our `package.json` file so we can access the package name and
* version. It's already there, so we don't repeat ourselves here.
*/
pkg: grunt.file.readJSON("package.json"),
/**
* The banner is the comment that is placed at the top of our compiled
* source files. It is first processed as a Grunt template, where the `<%=`
* pairs are evaluated based on this very configuration object.
*/
meta: {
banner:
'/**\n' +
' * <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %>\n' +
' * <%= pkg.homepage %>\n' +
' *\n' +
' * Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
' * Licensed <%= pkg.licenses.type %> <<%= pkg.licenses.url %>>\n' +
' */\n'
},
/**
* Creates a changelog on a new version.
*/
changelog: {
options: {
dest: 'CHANGELOG.md',
template: 'changelog.tpl'
}
},
/**
* Increments the version number, etc.
*/
bump: {
options: {
files: [
"package.json",
"bower.json"
],
commit: false,
commitMessage: 'chore(release): v%VERSION%',
commitFiles: [
"package.json",
"client/bower.json"
],
createTag: false,
tagName: 'v%VERSION%',
tagMessage: 'Version %VERSION%',
push: false,
pushTo: 'origin'
}
},
/**
* The directories to delete when `grunt clean` is executed.
*/
clean: [
'<%= build_dir %>',
'<%= compile_dir %>'
],
/**
* The `copy` task just copies files from A to B. We use it here to copy
* our project assets (images, fonts, etc.) and javascripts into
* `build_dir`, and then to copy the assets to `compile_dir`.
*/
copy: {
build_app_assets: {
files: [
{
src: [ '**' ],
dest: '<%= build_dir %>/assets/',
cwd: 'src/assets',
expand: true
}
]
},
build_vendor_assets: {
files: [
{
src: [ '<%= vendor_files.assets %>' ],
dest: '<%= build_dir %>/assets/',
cwd: '.',
expand: true,
flatten: true
}
]
},
build_appjs: {
files: [
{
src: [ '<%= app_files.js %>' ],
dest: '<%= build_dir %>/',
cwd: '.',
expand: true
}
]
},
build_vendorjs: {
files: [
{
src: [ '<%= vendor_files.js %>' ],
dest: '<%= build_dir %>/',
cwd: '.',
expand: true
}
]
},
compile_assets: {
files: [
{
src: [ '**' ],
dest: '<%= compile_dir %>/assets',
cwd: '<%= build_dir %>/assets',
expand: true
}
]
}
},
/**
* `grunt concat` concatenates multiple source files into a single file.
*/
concat: {
/**
* The `build_css` target concatenates compiled CSS and vendor CSS
* together.
*/
build_css: {
src: [
'<%= vendor_files.css %>',
'<%= recess.build.dest %>'
],
dest: '<%= recess.build.dest %>'
},
/**
* The `compile_js` target is the concatenation of our application source
* code and all specified vendor source code into a single file.
*/
compile_js: {
options: {
banner: '<%= meta.banner %>'
},
src: [
'<%= vendor_files.js %>',
'module.prefix',
'<%= build_dir %>/src/**/*.js',
'<%= html2js.app.dest %>',
'<%= html2js.common.dest %>',
'module.suffix'
],
dest: '<%= compile_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.js'
}
},
/**
* `ng-min` annotates the sources before minifying. That is, it allows us
* to code without the array syntax.
*/
ngmin: {
compile: {
files: [
{
src: [ '<%= app_files.js %>' ],
cwd: '<%= build_dir %>',
dest: '<%= build_dir %>',
expand: true
}
]
}
},
/**
* Minify the sources!
*/
uglify: {
compile: {
options: {
banner: '<%= meta.banner %>'
},
files: {
'<%= concat.compile_js.dest %>': '<%= concat.compile_js.dest %>'
}
}
},
/**
* `recess` handles our LESS compilation and uglification automatically.
* Only our `main.less` file is included in compilation; all other files
* must be imported from this file.
*/
recess: {
build: {
src: [ '<%= app_files.less %>' ],
dest: '<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css',
options: {
compile: true,
compress: false,
noUnderscores: false,
noIDs: false,
zeroUnits: false
}
},
compile: {
src: [ '<%= recess.build.dest %>' ],
dest: '<%= recess.build.dest %>',
options: {
compile: true,
compress: true,
noUnderscores: false,
noIDs: false,
zeroUnits: false
}
}
},
/**
* `jshint` defines the rules of our linter as well as which files we
* should check. This file, all javascript sources, and all our unit tests
* are linted based on the policies listed in `options`. But we can also
* specify exclusionary patterns by prefixing them with an exclamation
* point (!); this is useful when code comes from a third party but is
* nonetheless inside `src/`.
*/
jshint: {
src: [
'<%= app_files.js %>'
],
test: [
'<%= app_files.jsunit %>'
],
gruntfile: [
'Gruntfile.js'
],
options: {
curly: true,
immed: true,
newcap: true,
noarg: true,
sub: true,
boss: true,
eqnull: true
},
globals: {}
},
/**
* HTML2JS is a Grunt plugin that takes all of your template files and
* places them into JavaScript files as strings that are added to
* AngularJS's template cache. This means that the templates too become
* part of the initial payload as one JavaScript file. Neat!
*/
html2js: {
/**
* These are the templates from `src/app`.
*/
app: {
options: {
base: 'src/app'
},
src: [ '<%= app_files.atpl %>' ],
dest: '<%= build_dir %>/templates-app.js'
},
/**
* These are the templates from `src/common`.
*/
common: {
options: {
base: 'src/common'
},
src: [ '<%= app_files.ctpl %>' ],
dest: '<%= build_dir %>/templates-common.js'
}
},
/**
* The Karma configurations.
*/
karma: {
options: {
configFile: '<%= build_dir %>/karma-unit.js'
},
unit: {
port: 9101,
background: true
},
continuous: {
singleRun: true
}
},
/**
* The `index` task compiles the `index.html` file as a Grunt template. CSS
* and JS files co-exist here but they get split apart later.
*/
index: {
/**
* During development, we don't want to have wait for compilation,
* concatenation, minification, etc. So to avoid these steps, we simply
* add all script files directly to the `<head>` of `index.html`. The
* `src` property contains the list of included files.
*/
build: {
dir: '<%= build_dir %>',
src: [
'<%= vendor_files.js %>',
'<%= build_dir %>/src/**/*.js',
'<%= html2js.common.dest %>',
'<%= html2js.app.dest %>',
'<%= vendor_files.css %>',
'<%= recess.build.dest %>'
]
},
/**
* When it is time to have a completely compiled application, we can
* alter the above to include only a single JavaScript and a single CSS
* file. Now we're back!
*/
compile: {
dir: '<%= compile_dir %>',
src: [
'<%= concat.compile_js.dest %>',
'<%= vendor_files.css %>',
'<%= recess.compile.dest %>'
]
}
},
/**
* This task compiles the karma template so that changes to its file array
* don't have to be managed manually.
*/
karmaconfig: {
unit: {
dir: '<%= build_dir %>',
src: [
'<%= vendor_files.js %>',
'<%= html2js.app.dest %>',
'<%= html2js.common.dest %>',
'<%= test_files.js %>'
]
}
},
/**
* And for rapid development, we have a watch set up that checks to see if
* any of the files listed below change, and then to execute the listed
* tasks when they do. This just saves us from having to type "grunt" into
* the command-line every time we want to see what we're working on; we can
* instead just leave "grunt watch" running in a background terminal. Set it
* and forget it, as Ron Popeil used to tell us.
*
* But we don't need the same thing to happen for all the files.
*/
delta: {
/**
* By default, we want the Live Reload to work for all tasks; this is
* overridden in some tasks (like this file) where browser resources are
* unaffected. It runs by default on port 35729, which your browser
* plugin should auto-detect.
*/
options: {
livereload: true
},
/**
* When the Gruntfile changes, we just want to lint it. In fact, when
* your Gruntfile changes, it will automatically be reloaded!
*/
gruntfile: {
files: 'Gruntfile.js',
tasks: [ 'jshint:gruntfile' ],
options: {
livereload: false
}
},
/**
* When our JavaScript source files change, we want to run lint them and
* run our unit tests.
*/
jssrc: {
files: [
'<%= app_files.js %>'
],
tasks: [ 'jshint:src', 'karma:unit:run', 'copy:build_appjs' ]
},
/**
* When assets are changed, copy them. Note that this will *not* copy new
* files, so this is probably not very useful.
*/
assets: {
files: [
'src/assets/**/*'
],
tasks: [ 'copy:build_assets' ]
},
/**
* When index.html changes, we need to compile it.
*/
html: {
files: [ '<%= app_files.html %>' ],
tasks: [ 'index:build' ]
},
/**
* When our templates change, we only rewrite the template cache.
*/
tpls: {
files: [
'<%= app_files.atpl %>',
'<%= app_files.ctpl %>'
],
tasks: [ 'html2js' ]
},
/**
* When the CSS files change, we need to compile and minify them.
*/
less: {
files: [ 'src/**/*.less' ],
tasks: [ 'recess:build' ]
},
/**
* When a JavaScript unit test file changes, we only want to lint it and
* run the unit tests. We don't want to do any live reloading.
*/
jsunit: {
files: [
'<%= app_files.jsunit %>'
],
tasks: [ 'jshint:test', 'karma:unit:run' ],
options: {
livereload: false
}
}
}
};
grunt.initConfig( grunt.util._.extend( taskConfig, userConfig ) );
/**
* In order to make it safe to just compile or copy *only* what was changed,
* we need to ensure we are starting from a clean, fresh build. So we rename
* the `watch` task to `delta` (that's why the configuration var above is
* `delta`) and then add a new task called `watch` that does a clean build
* before watching for changes.
*/
grunt.renameTask( 'watch', 'delta' );
grunt.registerTask( 'watch', [ 'build', 'karma:unit', 'delta' ] );
/**
* The default task is to build and compile.
*/
grunt.registerTask( 'default', [ 'build', 'compile' ] );
/**
* The `build` task gets your app ready to run for development and testing.
*/
grunt.registerTask( 'build', [
'clean', 'html2js', 'jshint', 'recess:build',
'concat:build_css', 'copy:build_app_assets', 'copy:build_vendor_assets',
'copy:build_appjs', 'copy:build_vendorjs', 'index:build', 'karmaconfig',
'karma:continuous'
]);
/**
* The `compile` task gets your app ready for deployment by concatenating and
* minifying your code.
*/
grunt.registerTask( 'compile', [
'recess:compile', 'copy:compile_assets', 'ngmin', 'concat:compile_js', 'uglify', 'index:compile'
]);
/**
* A utility function to get all app JavaScript sources.
*/
function filterForJS ( files ) {
return files.filter( function ( file ) {
return file.match( /\.js$/ );
});
}
/**
* A utility function to get all app CSS sources.
*/
function filterForCSS ( files ) {
return files.filter( function ( file ) {
return file.match( /\.css$/ );
});
}
/**
* The index.html template includes the stylesheet and javascript sources
* based on dynamic names calculated in this Gruntfile. This task assembles
* the list into variables for the template to use and then runs the
* compilation.
*/
grunt.registerMultiTask( 'index', 'Process index.html template', function () {
var dirRE = new RegExp( '^('+grunt.config('build_dir')+'|'+grunt.config('compile_dir')+')\/', 'g' );
var jsFiles = filterForJS( this.filesSrc ).map( function ( file ) {
return file.replace( dirRE, '' );
});
var cssFiles = filterForCSS( this.filesSrc ).map( function ( file ) {
return file.replace( dirRE, '' );
});
grunt.file.copy('src/index.html', this.data.dir + '/index.html', {
process: function ( contents, path ) {
return grunt.template.process( contents, {
data: {
scripts: jsFiles,
styles: cssFiles,
version: grunt.config( 'pkg.version' )
}
});
}
});
});
/**
* In order to avoid having to specify manually the files needed for karma to
* run, we use grunt to manage the list for us. The `karma/*` files are
* compiled as grunt templates for use by Karma. Yay!
*/
grunt.registerMultiTask( 'karmaconfig', 'Process karma config templates', function () {
var jsFiles = filterForJS( this.filesSrc );
grunt.file.copy( 'karma/karma-unit.tpl.js', grunt.config( 'build_dir' ) + '/karma-unit.js', {
process: function ( contents, path ) {
return grunt.template.process( contents, {
data: {
scripts: jsFiles
}
});
}
});
});
};
@yocontra
Copy link

yocontra commented Jan 9, 2014

@OverZealous

gulp.task('compile-scripts', function () {

  var appFiles = jsBase()
    .pipe(tasks.concat(tmpFileName))
    .pipe(tasks.ngmin());

  var vendorFiles = gulp.src(config.vendorFiles.js)
    .pipe(tasks.concat(concatName + '.js'));

  var tail = tasks.uglify(config.taskOptions.uglify)
    .pipe(tasks.rev())
    .pipe(gulp.dest(config.compileDir + '/js'));

  appFiles.pipe(tail);
  vendorFiles.pipe(tail);
});

I wasn't sure which part you wanted to happen on both forks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment