Skip to content

Instantly share code, notes, and snippets.

@smysnk
Created April 22, 2015 22:12
Show Gist options
  • Save smysnk/ebf0ceb133c0b0c58c28 to your computer and use it in GitHub Desktop.
Save smysnk/ebf0ceb133c0b0c58c28 to your computer and use it in GitHub Desktop.
Browserify + Typescript + Less + Minification
var gulp = require('gulp');
var gulpIf = require('gulp-if');
var gutil = require('gutil');
var notifier = require('node-notifier');
var sourceMaps = require('gulp-sourcemaps');
var sourceStream = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');
var templateCache = require('gulp-angular-templatecache');
var es = require('event-stream');
var path = require('path');
var browserify = require('browserify');
var util = require('gulp-util');
var runSequence = require('run-sequence');
var del = require('del');
// HTTP Server
var connect = require('gulp-connect');
var historyApiFallback = require('connect-history-api-fallback');
var watching = false;
// Options
var options = require('./options');
var settings = options.settings;
var source = options.source;
var target = options.target;
var alpha = options.alpha;
var beta = options.beta;
// process.env.BROWSERIFYSHIM_DIAGNOSTICS=1
// Standard handler
function standardHandler(err) {
// Notification
notifier.notify({ message: 'Error: ' + err.message });
// Log to console
gutil.log(util.colors.red('Error'), err.message);
this.emit('end');
}
function bundle() {
var bundler = browserify({ debug: true })
.add(source.file.browserify.entry)
.plugin('tsify', {
//noImplicitAny: true
})
.on('update', bundle) // on any dep update, runs the bundler
.on('log', gutil.log); // output build logs to terminal
return bundler
.bundle()
.on('error', standardHandler)
.pipe(sourceStream(alpha.file.browserify.output))
.pipe(buffer())
.pipe(sourceMaps.init({ loadMaps: true }))
// Add transformation tasks to the pipeline here.
.pipe(uglify())
.on('error', standardHandler)
.pipe(sourceMaps.write('./map'))
.pipe(gulp.dest(alpha.dir.base))
.pipe(gulpIf(watching, connect.reload()));
}
gulp.task('default', function (cb) {
watching = true;
return runSequence(['clean'], ['augment'], ['connect', 'watch'], cb);
});
gulp.task('clean', function (cb) {
return del(target.dir.base, cb);
});
gulp.task('watch', function () {
watching = true;
gulp.watch(source.glob.copy, ['copy']);
gulp.watch(source.glob.font, ['augment-font']);
gulp.watch(source.glob.less, ['augment-less']);
gulp.watch(source.glob.script, ['augment-script']);
return gulp.watch(source.glob.html, ['augment-script']); // Call script because 'augment-html' is a dependency
});
gulp.task('augment', ['copy', 'augment-html', 'augment-font', 'augment-script', 'augment-less']);
gulp.task('copy', function () {
return gulp
.src(source.glob.copy, { base: source.dir.base })
.pipe(gulp.dest(alpha.dir.base))
.pipe(gulpIf(watching, connect.reload()));
});
gulp.task('augment-html', function () {
return gulp
.src(source.glob.html)
.pipe(templateCache({
filename: 'templates.js',
templateHeader: 'angular.module("<%= module %>"<%= standalone %>).run(["$templateCache", function($templateCache) {',
standalone: true
}))
.pipe(gulp.dest(source.dir.app));
});
gulp.task('augment-font', function () {
return gulp
.src(source.glob.font)
.pipe(es.map(function(file, callback) { // Rebase files from random bower directories
file.path = file.base + file.path.replace(/^.*\//i, '');
return callback(null, file);
}))
.pipe(gulp.dest(alpha.dir.font))
.pipe(gulpIf(watching, connect.reload()));
});
gulp.task('augment-script', ['augment-html'], bundle);
gulp.task('augment-less', function() {
return gulp
.src(source.file.less.entry)
.pipe(sourceMaps.init())
.pipe(less({
paths: [path.join(__dirname, 'less', 'includes')],
}))
.on('error', standardHandler)
.pipe(minifyCSS())
.pipe(sourceMaps.write('./map'))
.pipe(gulp.dest(alpha.dir.base))
.pipe(gulpIf(watching, connect.reload()));
});
gulp.task('connect', function () {
return connect.server({
root: [alpha.dir.base],
port: settings.port,
livereload: true,
middleware: function (connect, o) {
return [
(function () {
var proxy, url;
url = require('url');
proxy = require('proxy-middleware');
options = url.parse('http://localhost:8080/api');
options.route = '/api';
options.headers = { 'X-Forwarded-Host': 'localhost:9000' };
return proxy(options);
})(),
historyApiFallback
];
}
});
});
var source;
var alpha;
var beta;
var settings;
/**
* Source Settings
*/
source = {
dir: {
base: 'frontend'
}
};
source = {
dir: {
base: source.dir.base,
app: source.dir.base + '/app',
less: source.dir.base + '/less',
image: source.dir.base + '/image',
font: source.dir.base + '/font'
}
};
source.file = {
browserify: {
entry: './frontend/app/application.ts'
},
less: {
entry: source.dir.base + '/style.less'
}
}
source.glob = {
script: source.dir.app + '/**/*.ts',
less: [
source.file.less.entry,
source.dir.less + '/**/*.*'
],
copy: [
source.dir.base + '/index.html',
source.dir.base + '/keycloak.json',
source.dir.image + '/**/*.*'
],
font: [
source.dir.base + '/bower_components/**/*.eot',
source.dir.base + '/bower_components/**/*.svg',
source.dir.base + '/bower_components/**/*.ttf',
source.dir.base + '/bower_components/**/*.woff',
source.dir.base + '/bower_components/**/*.woff2'
],
html: [
source.dir.app + '/**/*.html'
]
};
/**
* Target
*/
target = {
dir: {
base: 'target/frontend'
}
};
/**
* Target - Alpha Settings
*/
alpha = {
dir: {
base: target.dir.base + '/alpha'
}
};
alpha = {
dir: {
base: alpha.dir.base,
image: alpha.dir.base + '/image',
font: alpha.dir.base + '/font'
}
};
alpha.file = {
browserify: {
sourceMap: alpha.dir.base + '/application.js.map',
output: 'application.js'
}
};
/**
* Target - Beta Settings
*/
beta = {
dir: {
base: target.dir.base + '/beta'
}
};
settings = {
port: 9000
};
module.exports = {
source: source,
target: target,
alpha: alpha,
beta: beta,
settings: settings
};
{
"name": "amt",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"bower": "~1.3.12",
"browserify": "^9.0.3",
"browserify-shim": "^3.8.5",
"connect-history-api-fallback": "0.0.5",
"connect-livereload": "~0.5.0",
"del": "~0.1.3",
"event-stream": "~3.1.7",
"gulp": "~3.8.10",
"gulp-angular-templatecache": "^1.6.0",
"gulp-connect": "~2.2.0",
"gulp-if": "1.2.5",
"gulp-less": "^3.0.2",
"gulp-livereload": "~2.1.1",
"gulp-minify-css": "^1.0.0",
"gulp-open": "~0.3.1",
"gulp-replace": "^0.5.3",
"gulp-rev-all": "*",
"gulp-sourcemaps": "^1.5.2",
"gulp-uglify": "^1.1.0",
"gulp-usemin": "~0.3.8",
"gulp-util": "^3.0.4",
"gulp-wrap-amd": "~0.3.1",
"gutil": "^1.6.4",
"jasmine-core": "^2.2.0",
"karma": "^0.12.31",
"karma-chrome-launcher": "^0.1.8",
"karma-jasmine": "^0.3.5",
"karma-phantomjs-launcher": "^0.1.4",
"node-notifier": "^4.2.1",
"proxy-middleware": "~0.7.0",
"q": "~1.1.1",
"run-sequence": "^1.0.2",
"tsify": "^0.8.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
},
"engines": {
"node": ">=0.8.0"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browser": {
"angular-ui-router": "./frontend/bower_components/angular-ui-router/release/angular-ui-router.js",
"traverson": "./frontend/bower_components/traverson/browser/dist/traverson.js",
"traverson-angular": "./frontend/bower_components/traverson-angular/browser/dist/traverson-angular.js",
"traverson-hal": "./frontend/bower_components/traverson-hal/browser/dist/traverson-hal.js"
},
"browserify-shim": {
"angular": "global:angular"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment