Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ES6 + ES5 Workflow gulpfile
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var del = require('del');
var source = require('vinyl-source-stream');
var _ = require('lodash');
var extReplace = require('gulp-ext-replace');
var less = require('gulp-less');
var gulpMerge = require('merge-stream');
var ngTemplates = require('gulp-ng-templates');
var concat = require('gulp-concat');
var wrap = require("gulp-wrap");
var ngAnnotate = require('gulp-ng-annotate');
var jshint = require('gulp-jshint');
var jscs = require('gulp-jscs');
var uglify = require('gulp-uglify');
var runSequence = require('run-sequence');
var rev = require("gulp-rev");
var replace = require("gulp-replace");
var karma = require('karma').server;
var minifyHTML = require('gulp-minify-html');
var output = './public';
var config = {
outputDir: output,
tmpDir: './tmp',
es6Files: './src/js/**/*.es6',
es6EntryFile: './tmp/es6/app.js',
es6TmpDir: './tmp/es6',
es6TmpOutputDir: './tmp/es6-output',
es5EntryFiles: './src/js/**/*.js',
outputJSES5File: 'app-es5.js',
outputJSES6File: 'app-es6.js',
outputJSDir: output + '/js',
lessEntry: './src/less/main.less',
outputCssDir: output + '/css',
fontsEntry: [
'./components/font-awesome/fonts/*'
// Other fonts
],
outputFontsDir: output + '/font',
imagesEntry: ['./src/images/**'],
outputImagesDir: output + '/images',
partialsConfig: {
'./src/partials/**': '/'
// Other partials
},
partialsTmpDir: './tmp/partials',
outputPartialsFile: 'templates.js',
localesConfig: {
'./src/locales/**': '/'
// Other locales
},
outputLocalesDir: output + '/locales',
indexEntry: './src/index.html',
outputIndex: output + '/index.html',
vendorsJsEntry: [
'./components/angular/angular.min.js'
// Other ES5 vendors
],
outputJSVendorsFile: 'vendor.js',
vendorsCssEntry: [
'./components/select2/select2.css'
// Other CSS vendors
],
outputVendorsCssFile: 'vendor.css',
jscsConfig: './src/pmsipilot.jscs.json'
};
gulp.task('build', ['build/index', 'build/es5', 'build/es6', 'build/less', 'build/fonts', 'build/images', 'build/partials', 'build/locales', 'build/js/vendor', 'build/css/vendor']);
gulp.task('release', function() {
runSequence('clean', 'build', 'release/js', 'release/index');
});
gulp.task('clean', function(done){
del(config.outputDir, function() {
del(config.tmpDir, done);
});
});
// Build Javascripts
gulp.task('prepare/es6', function() {
return gulp.src(config.es6Files)
.pipe(extReplace('.js'))
.pipe(gulp.dest(config.es6TmpDir));
});
gulp.task('build/es6', ['prepare/es6'], function() {
return browserify(config.es6EntryFile, { debug: true })
.transform(babelify)
.bundle()
.on('error', function(err) { console.log('Error: ' + err.message); })
.pipe(source(config.outputJSES6File))
.pipe(ngAnnotate())
.pipe(wrap('<%= contents %>\nloadES5Query();'))
.pipe(gulp.dest(config.outputJSDir));
});
gulp.task('build/es5', function() {
return gulp.src(config.es5EntryFiles)
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(jshint.reporter('fail'))
.pipe(jscs({ configPath: config.jscsConfig }))
.pipe(concat(config.outputJSES5File))
.pipe(ngAnnotate())
.pipe(wrap('function loadES5Query(){\n<%= contents %>\n};'))
.pipe(gulp.dest(config.outputJSDir));
});
// Build Less
gulp.task('build/less', function() {
return gulp.src(config.lessEntry)
.pipe(less())
.pipe(gulp.dest(config.outputCssDir));
});
// Build Fonts
gulp.task('build/fonts', function() {
return gulp.src(config.fontsEntry)
.pipe(gulp.dest(config.outputFontsDir));
});
// Build Images
gulp.task('build/images', function() {
return gulp.src(config.imagesEntry)
.pipe(gulp.dest(config.outputImagesDir));
});
// Build Partials
gulp.task('prepare/partials', function() {
var merge;
Object.keys(config.partialsConfig).forEach(function(srcDir) {
var destDir = config.partialsTmpDir + config.partialsConfig[srcDir];
var stream = gulp.src(srcDir)
.pipe(gulp.dest(destDir));
merge = merge ? gulpMerge(merge, stream) : stream;
});
return merge;
});
gulp.task('build/partials', ['prepare/partials'], function() {
return gulp.src(config.partialsTmpDir + '/**/*.html')
.pipe(minifyHTML())
.pipe(ngTemplates({
module: 'pmsipilot-templates',
filename: config.outputPartialsFile,
path: function (path, base) {
return 'partials/' + path.replace(base, '');
}
}))
.pipe(gulp.dest(config.outputJSDir));
});
// Build Locales
gulp.task('build/locales', function() {
var merge;
Object.keys(config.localesConfig).forEach(function(srcDir) {
var destDir = config.outputLocalesDir + config.localesConfig[srcDir];
var stream = gulp.src(srcDir)
.pipe(gulp.dest(destDir));
merge = merge ? gulpMerge(merge, stream) : stream;
});
return merge;
});
// Build Index
gulp.task('build/index', function() {
gulp.src(config.indexEntry)
.pipe(gulp.dest(config.outputDir));
});
// Build Vendors
gulp.task('build/js/vendor', function() {
gulp.src(config.vendorsJsEntry)
.pipe(concat(config.outputJSVendorsFile))
.pipe(gulp.dest(config.outputJSDir));
});
// Build Vendors CSS
gulp.task('build/css/vendor', function() {
gulp.src(config.vendorsCssEntry)
.pipe(concat(config.outputVendorsCssFile))
.pipe(gulp.dest(config.outputCssDir));
});
// Release JS
gulp.task('release/js', function() {
gulp.src([
config.outputJSDir + '/' + config.outputJSES5File,
config.outputJSDir + '/' + config.outputJSES6File,
config.outputJSDir + '/' + config.outputPMSIJSVendorsFile,
config.outputJSDir + '/' + config.outputPMSIGlobalJSVendorsFile
])
.pipe(uglify())
.pipe(gulp.dest(config.outputJSDir));
});
// Release Index "Rev"
gulp.task("release/index-rev", function() {
return gulp.src([config.outputJSDir + '/**/*.js', config.outputCssDir + '/**/*.css'], { base: config.outputDir })
.pipe(rev())
.pipe(gulp.dest(config.outputDir))
.pipe(rev.manifest())
.pipe(gulp.dest(config.tmpDir));
});
gulp.task("release/index", ['release/index-rev'], function() {
var manifest = require(config.tmpDir + "/rev-manifest.json");
var stream = gulp.src(config.outputIndex);
Object.keys(manifest).reduce(function(stream, key){
del(key);
return stream.pipe(replace(key.replace(__dirname + '/public/', ''), manifest[key]));
}, stream).pipe(gulp.dest(config.outputDir));
});
// Watch
gulp.task('watch', function() {
gulp.watch(config.es5EntryFiles, ['build/es5']);
gulp.watch(config.es6Files, ['build/es6']);
gulp.watch(config.lessEntry, ['build/less']);
gulp.watch(config.fontsEntry, ['build/fonts']);
gulp.watch(config.imagesEntry, ['build/images']);
gulp.watch(Object.keys(config.partialsConfig), ['build/partials']);
gulp.watch(Object.keys(config.localesConfig), ['build/locales']);
gulp.watch('gulpfile.js', ['build']);
});
// Karma jenkins
gulp.task('jenkins', ['build'], function (done) {
karma.start({
configFile: __dirname + '/test/unit/karma.conf.js',
reporters: ['progress', 'junit'],
singleRun: true
}, done);
});
// Karma test
gulp.task('test', ['build'], function (done) {
karma.start({
configFile: __dirname + '/test/unit/karma.conf.js',
singleRun: true
}, done);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.