AngularJS + Gulp Skeleton

Build automation for AngularJS projects is indispensable for anyone who works with this amazing and powerful framework. If you are planning to work on new projects using AngularJS, this post is for you. In this article, I am going to show you in a few and simple steps, how to structure a new AngularJS project using GULP.

Tools required:
NPM / Node.js
Any code editor - Visual Studio Code is always a great choice!!!

Step One
Under your project's folder, run the command: "npm init". Before creating the package.json file, this command will ask you a few questions, it's ok if you just press [enter] for all of them.

C:\dev\angularjs-gulp-skeleton>npm init



Step Two
Install AngularJS, Angular Route and Angular UI Bootstrap(optional). Angular UI Bootstrap requires Bootstrap CSS version 3.x or higher.
Font-awesome and JQuery will be also installed just to show you how to configure gulpfile.js when new libraries are installed.

1
2
3
4
5
6
npm install --save angular
npm install --save angular-route
npm install --save angular-ui-bootstrap
npm install --save bootstrap
npm install --save jquery
npm install --save font-awesome



Step Three
Let's install our devDependencies - gulp, gulp-concat, gulp-sass, gulp-uglify, browser-sync and gulp-image

1
2
3
4
5
6
npm install --save-dev gulp
npm install --save-dev gulp-concat
npm install --save-dev gulp-sass
npm install --save-dev gulp-uglify
npm install --save-dev browser-sync
npm install --save-dev gulp-image



Checking out the package.json file...

Step Four
Create three files at the root of your project directory:
gulpfile.js - the file that gulp uses to execute tasks
scripts.json - contains the path of javascript files, including external libraries, which will be included into /dist directory.
styles.json - contains all CSS files which will be included into /dist directory
We’ll come back to these files later on.

Now let's create some folders. Basically, this is how my project structure will be.

You can create your own structure and then configure gulpfile.js according to it.

Finally, let's configure the gulpfile.js, scripts.json and styles.json.
gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const browserSync = require('browser-sync').create();
const image = require('gulp-image');
const scripts = require('./scripts');
const styles = require('./styles');
 
var gutil = require('gulp-util'); 
 
gulp.task('css', function() {
    gulp.src(styles)
        .pipe(concat('main.css'))
        .pipe(gulp.dest('./dist/assets/css'))
        .pipe(browserSync.reload({
            stream: true
        }));
});
 
gulp.task('js', function() {
    gulp.src(scripts)
        .pipe(uglify())
        .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); }) // get more details on possible errors during uglify process
        .pipe(concat('scripts.js'))
        .pipe(gulp.dest('./dist/assets/js'))
        .pipe(browserSync.reload({
            stream: true
        }));
});
 
gulp.task('image', function () {
    gulp.src('./src/assets/img/*')
        .pipe(image())
        .pipe(gulp.dest('./dist/assets/img'))
        .pipe(browserSync.reload({
            stream: true
        }));
});
 
gulp.task('fonts', function() {
    return gulp.src(['./node_modules/font-awesome/fonts/fontawesome-webfont.*'])
        .pipe(gulp.dest('./dist/assets/fonts/'));
});
 
gulp.task('html', function() {
    return gulp.src('./src/app/**/*.html')
        .pipe(gulp.dest('./dist/'))
        .pipe(browserSync.reload({
            stream: true
        }));
});
 
gulp.task('build', function() {
    gulp.start(['css', 'js', 'image', 'fonts', 'html'])
});
 
gulp.task('browser-sync', function() {
    browserSync.init(null, {
        open: false,
        server: {
            baseDir: 'dist',
        }
    });
});
 
gulp.task('start', function() {
    devMode = true;
    gulp.start(['build', 'browser-sync']);
    gulp.watch(['./src/assets/css/**/*.css'], ['css']);
    gulp.watch(['./src/assets/js/**/*.js'], ['js']);
    gulp.watch(['./src/app/**/*.js'], ['js']);
    gulp.watch(['./src/app/**/*.html'], ['html']);
});

Basically, Gulp will run five tasks named as "css", "js", "image", "fonts" and "html" when running "build" task. Each of those has its own declaration block in gulpfile. Notice that this is a pretty simple configuration.

scripts.json

1
2
3
4
5
6
[
    "./node_modules/angular/angular.min.js",
    "./node_modules/angular-route/angular-route.js",
    "./src/app/**/*.js",
    "./node_modules/jquery/dist/jquery.min.js"
]

styles.json

1
2
3
4
5
6
[
    "./src/assets/css/**/*.css",
    "./node_modules/bootstrap/dist/css/bootstrap.css",
    "./node_modules/font-awesome/css/font-awesome.css",
    "./src/assets/css/style.css"
]

Final Step
Well, it's time to run the project!!!

C:\dev\angularjs-gulp-skeleton>gulp start

That's all folks!

Project available on my Github.
Source Code - Github

Happy coding!!!

One thought on “AngularJS + Gulp Skeleton

  1. Hello there,

    My name is Aly and I would like to know if you would have any interest to have your website here at alexandreomiranda.com promoted as a resource on our blog alychidesign.com ?

    We are in the midst of updating our broken link resources to include current and up to date resources for our readers. Our resource links are manually approved allowing us to mark a link as a do-follow link as well
    .
    If you may be interested please in being included as a resource on our blog, please let me know.

    Thanks,
    Aly

Leave a Reply

Your email address will not be published. Required fields are marked *

This blog is kept spam free by WP-SpamFree.