Browserify &
the JS "Cool"chain
Glen Arrowsmith
@garrows
glen.arrowsmith@gmail.com
Browserify lets you require('modules') in the browser by bundling up all of your dependencies.
Get started
npm install -g browserify
vim index.html<html>
<body>
<script src="./build.js"></script>
</body>
</html>
vim index.js
require('cat-picture');npm install cat-picture
browserify index.js -o build.js
open index.html
Write your own module
Greeter.js
console.log("Init"); //Only run once.
function Greeter(target) {
console.log("Constructor"); //Run every 'new Greeter()'
if (target)
this.target = target;
}
Greeter.prototype = {
greeting: "Hello",
target: "World",
greet : function() {
console.log(this.greeting + " " + this.target + "!");
}
}
module.exports = Greeter;
var Greeter = require('./Greeter.js');
var greeter = new Greeter("Bris.js");
greeter.greet();Static Variables
Greeter.js
Greeter.prototype = {
//...
overrideGreeting : function(greeting) {
Greeter.prototype.greeting = greeting;
}
}var Greeter = require('./Greeter.js');
var g = new Greeter();
g.overrideGreeting("Lookout");
g.greet();
var Greeter2 = require('./Greeter.js');
var g2 = new Greeter2();
g2.greet();Lookout World!
Lookout World!Private Variables
Private variables are static and not exposed.
var counter = 0;
Greeter.prototype = {
//...
count : function() {
counter++;
console.log("The count is " + counter);
}
}
jshint
a tool that helps to detect errors and potential
problems in your JavaScript code.
npm install -g jshint
jshint index.jsTired of running commands yet?
How can I force my team mates to keep Good code?
The streaming build system
npm install -g gulpgulp
Less
var less = require('gulp-less')
gulp.task('styles', function() {
return gulp.src(['./app/styles/index.less'])
.pipe(less())
.pipe(gulp.dest('./build/'))
.on('end', livereload('.css'));
});
gulp.task('watch', function() {
...
gulp.watch(['./app/**/*.less'], ['styles']);
});
Extras
gulp-minify-css gulp-minify-html gulp-rename gulp-uglifygulp-shell
CONFIGURATION over documentation?
Utilise package.json to run gulp on npm install
{
"name": "Demo",
"scripts": {
"postinstall": "gulp build",
}
...
}Questions?
Glen Arrowsmith
glen.arrowsmith@gmail.com
Browserify & the JS 'Cool'Chain
By Glen Arrowsmith
Browserify & the JS 'Cool'Chain
The 2014 javascript coolchain including Browserify, Gulp.js, Angular, LiveReload, Bower, Less & more.
