Start Use Gulp and Browserify to Build Angular App with Node.js
Use Gulp, Gulp Plugins and Browserify to build Angular app
This sample app use following technologies.
- Node.js
- Angular.js
- Browserify
- Gulp
- gulp-connect
- gulp-ng-annotate
The files structure will be following, also you can check the sample code
at Github. After you download the code, run following command should be able to start
your app. The fisrt command will install all the node.js dependecy modules,
and second command will run the gulp task defined at
gulpfile.js
npm install -d gulp
App folder are all the client side file for build angular app.
Gulpfile contains all the client side task build.
Index.html is the html page will be request by the client, also
contains the angular app.
package.json contains all the dependencies for this example.
- gulp-test1
- app
- controllers
- controller1.js
- controller2.js
- controller3.js
- views
- controller1.html
- controller2.html
- controller3.html
- app.js
- gulpfile.js
- index.html
- package.json
package.json
The main module here are angular, angular-route and browserify, because browserify will take care of angular app's dependency that's why need angular as node module. Also, gulp and gulp's plugin modules, the gulp-np-annotate will fix the issue when mininize js in angular, gulp-connect will run a test app.
{
"name": "gulp-test1",
"version": "1.0.0",
"description": "gulp-test1",
"dependencies": {
"angular": "^1.5.5",
"gulp": "^3.9.1"
},
"devDependencies": {
"angular": "^1.5.5",
"angular-route": "^1.5.5",
"browserify": "^13.0.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-connect": "^3.2.2",
"gulp-cssmin": "^0.1.7",
"gulp-ng-annotate": "^2.0.0",
"gulp-uglify": "^1.5.3",
"vinyl-source-stream": "^1.1.0"
},
"author": "dake"
}
Angular App
Following is the example code use browserify with angular, broserify will take
all the dependencies for angular. For example, following code is the
app.js at angular.js, which define where is the controller and
views, in angualr it is useing angular-route, and ofcourse,
app.js is also depend on angular.js. In Browserify, it is very
simple to define, you just need to write, require('angular'),
browserify will take care the dependency for you. Similar to the angular
controllers, you'll need to define as
require('./controllers/controller1');.
'use strict';
require('angular');
require('angular-route');
var app = angular.module('gulp.test1', ['ngRoute']);
require('./controllers/controller1');
require('./controllers/controller2');
require('./controllers/controller3');
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/controller1.html',
controller: 'controller1',
controllerAs: 'controller1'
})
.when('/1', {
templateUrl: 'views/controller2.html',
controller: 'controller2',
controllerAs: 'controller2'
})
.when('/2', {
templateUrl: 'views/controller3.html',
controller: 'controller3',
controllerAs: 'controller3'
})
.otherwise({
redirectTo: '/'
});
});
'use strict';
angular.module('gulp.test1')
.controller('controller1', function ($scope) {
$scope.message = 'controller1!';
});
<h2>message: {{message}}</h2>
How do I use browserify to bundle all javascript
This is sample task at gulpfile.js, at end of this task, it will create a
javascript combined all the dependency javascript. In our previous
app.js. It shouldn't contains angular.js angular-route.js, all
the angular controllers and the app.js itself.
gulp.task('browserify', function () {
return browserify('./app/app.js')
.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest('./public/js/'));
});
index.html
In this example, index.html is the actual web page, as you can
see it is any reference to the minified javascript.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="/js/app.min.js"></script>
</head>
<body>
<div ng-app="gulp.test1">
<div ng-view></div>
</div>
<ul>
<li><a href="/#">home</a></li>
<li><a href="/#1">main</a></li>
<li><a href="/#2">main1</a></li>
</ul>
</body>
</html>
gulpfile.js
/// setup gulp
var gulp = require('gulp');
var connect = require('gulp-connect');
// requires browserify and vinyl-source-stream
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');
//var cssmin = require("gulp-cssmin");
var uglify = require("gulp-uglify");
var ngAnnotate = require('gulp-ng-annotate');
gulp.task('connect', function () {
connect.server({
root: 'public',
port: 4000
})
});
gulp.task('browserify', function () {
// Grabs the app.js file
return browserify('./app/app.js')
// bundles it and creates a file called main.js
.bundle()
.pipe(source('app.js'))
// saves it the public/js/ directory
.pipe(gulp.dest('./public/js/'));
});
gulp.task("min:js", function () {
gulp.src(["./public/js/app.js"], { base: "." })
.pipe(ngAnnotate())
.pipe(concat("./public/js/app.min.js"))
.pipe(uglify())
.pipe(gulp.dest("."));
});
gulp.task("min", ["min:js"]);
// Views task
gulp.task('views', function () {
// Any other view files from app/views
gulp.src('./app/views/**/*')
// Will be put in the dist/views folder
.pipe(gulp.dest('./public/views/'));
// copy html to production folder
gulp.src('./index.html').pipe(gulp.dest('./public/'));
});
gulp.task('watch', function () {
gulp.watch('app/**/*.js', ['browserify','views']);
});
gulp.task('default', ['browserify', 'views', 'min', 'watch','connect']);
References or Links
- gulp's plugins There's thousands of plugins for gulp
- browserify Official website
- angular1 and angular2
- Most popular gulp plugins
Conclusion
Gulp is very powerful client side task runner, there're many different plugins you can use, also popular IDE visual studio is also start to use gulp/grunt as client side task runner to build assets. That means more people will start using it and create modules for it. Also with browserify it will even become more powerful, it use node.js to combined all client side resources.