Skip to content

Instantly share code, notes, and snippets.

@AlexEscalante
Last active May 4, 2016 14:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save AlexEscalante/5ea0d6d949349eacac6802607ce7664f to your computer and use it in GitHub Desktop.
Save AlexEscalante/5ea0d6d949349eacac6802607ce7664f to your computer and use it in GitHub Desktop.
Ionic build with Browserify, development & production builds with sass, es6 transpiling, minification and more. Standard JS, no semicolons.
module.exports = {
default: {
// versionify will replace the following string with the actual version number
BUILD_VERSION: '__VERSION__'
},
development: {
API_URL: 'http://localhost:3000'
},
production: {
API_URL: 'http://acme.com'
}
}
/*
* Ionic build with Browserify, development & production builds with sass,
* es6 transpiling, minification and more. Standard JS, no semicolons
*
* alex.escalante@gmail.com
*/
'use strict'
let gulp = require('gulp')
let path = require('path')
let del = require('del')
let sass = require('gulp-sass')
let minifyCss = require('gulp-clean-css')
let rename = require('gulp-rename')
let eslint = require('gulp-standard')
let browserify = require('browserify')
let vinylSource = require('vinyl-source-stream')
let minimist = require('minimist')
let ngConstant = require('gulp-ng-constant')
let insert = require('gulp-insert')
let exorcist = require('exorcist')
require('browserify-ngannotate')
require('browserify-versionify')
/*
* Configuration
*/
const paths = {
// your sass
sass: ['./app/scss/**/*.scss'],
// and it's css
css: './www/css',
// your javascript files
js: ['./app/js/**/*.js'],
// your entry point
appjs: './app/js/app.js',
// your bower components
bowerComponents: 'www/lib',
// and your bundle goes into…
dist: './www/dist'
}
/*
* Config module
*
* You get a free angular module with your own config constants
* see config() below
*/
const configModule = 'cruise.config'
const configConstants = require('./appconfig')
/*
* Configuration ends here
*/
// Handle command line options to allow production settings
let knownOptions = {
boolean: 'production',
default: { production: false }
}
let options = minimist(process.argv.slice(2), knownOptions)
// Generate an angular module with constants according to your configuration
function config () {
let constants = Object.assign(configConstants['default'], configConstants[options.production ? 'production' : 'development'])
return ngConstant({
name: configModule,
constants: constants,
stream: true,
wrap: 'commonjs'
})
.pipe(rename('config.js'))
.pipe(insert.prepend(['/* global angular */', '/* eslint quotes: 0, semi: 0 */'].join('\n')))
.pipe(gulp.dest('app/js/'))
}
// Make sure your code follows the standard
function lint () {
return gulp.src(paths.js)
.pipe(eslint())
.pipe(eslint.reporter('default', {
breakOnError: true
}))
}
function bundleForDevelopment () {
return browserify(paths.appjs, {debug: true})
.transform('browserify-versionify', {
placeholder: '__VERSION__'
})
.transform('babelify', {presets: ['es2015'], ignore: paths.bowerComponents})
.transform('debowerify')
.bundle()
.pipe(exorcist(path.join(paths.dist, 'bundle.js.map')))
.on('error', function (err) {
console.error(err)
this.emit('end')
})
.pipe(vinylSource('bundle.js'))
.pipe(gulp.dest(paths.dist))
}
function bundleForProduction () {
return browserify(paths.appjs, {debug: false})
.transform('browserify-versionify', {
placeholder: '__VERSION__'
})
.transform('babelify', {presets: ['es2015'], ignore: paths.bowerComponents, sourceMaps: false})
.transform('debowerify')
.transform('browserify-ngannotate')
.transform({global: true}, 'uglifyify')
.bundle()
.on('error', function (err) {
console.error(err)
this.emit('end')
})
.pipe(vinylSource('bundle.js'))
.pipe(gulp.dest(paths.dist))
}
function bundle () {
console.log('bundling for', options.production ? 'production' : 'development')
return del(path.join(paths.dist, '*')).then(function () {
if (options.production) {
return bundleForProduction()
} else {
return bundleForDevelopment()
}
})
}
function styles () {
return gulp.src(paths.sass)
.pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest(paths.css))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.css' }))
.pipe(gulp.dest(paths.css))
}
function watch () {
gulp.watch(paths.sass, ['styles'])
gulp.watch(paths.js, ['bundle'])
}
gulp.task('default', ['styles', 'bundle'])
gulp.task('styles', styles)
gulp.task('config', config)
gulp.task('lint', ['config'], lint)
gulp.task('bundle', ['lint'], bundle)
gulp.task('watch', watch)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment