Navigate back to the homepage

Broccoli and Angular.js

Bulkan Evcimen
February 16th, 2016 · 1 min read

Photo by Charles Deluvio on Unsplash

Warning

This post was initially written on 2014-05-28 and not published. Things might have changed.

Broccoli is a relatively new asset builder. It is based on doing operations on a trees of files.

Here is how I used it to concatenate front end dependencies installed via bower and an angular.js app.

Bower

First, let me show you the two files you need for bower.

bower.json

Here is an example bower.json that lists the frontend dependencies. Note the resolutions property.

1{
2 "dependencies": {
3 "angular-ui-router": "0.2.11",
4 },
5 "resolutions": {
6 "angular": "~1.3.0"
7 }
8}

.bowerrc

This is relative to your project and tells bower where to put the dependencies.

1{
2 "directory": "public/vendor"
3}

Broccoli

Now we need to install broccoli. I’ve installed the broccoli-cli globally and as per the installation guide.

1npm install --save-dev broccoli
2npm install --global broccoli-cli

We also need to install plugins for broccoli;

1npm install --saveDev broccoli-concat

Brocfile.js

Like all task runners broccoli has its own file format to define its operations, though its not really a task runner but rather a build tool.

Here is the brocfile.js to concatenate all of the above bower dependencies

1var broccoli = require('broccoli');
2var concat = require('broccoli-concat');
3
4var concatenated = concat('public/', {
5 inputFiles: [
6 'vendor/jquery/jquery.min.js',
7 'vendor/angular/angular.js',
8 'vendor/angular-ui-router/release/angular-ui-router.min.js',
9 'js/**/*.js',
10 ],
11 outputFile: '/assets/app.js',
12 separator: '\n', // (optional, defaults to \n)
13 wrapInEval: false // (optional, defaults to false)
14});
15
16module.exports = concatenated;

We explicitly define the order of concatenation to the concat function. This way we have jQuery loading before angular, and angular loading before ui-router and our app code (which is assumed to exist in public/js).

Now running broccoli serve will start a http server on port 4200 and the concatenated Javascript will be available at https://localhost:4200/assets/app.js.

Hope that helps.

More articles from Bulkan

Writing a Linked List using Go - part one

Photo by Glenn Carstens-Peters on Unsplash In this article series I will briefly talk about Linked Lists then go about implementing one…

May 31st, 2014 · 2 min read

Mocking a function that returns a (bluebird) Promise

Photo by Zdeněk Macháček on Unsplash With Sinon.JS mocking functions are quite easy. Here is how to stub a function that returns a Promise…

April 28th, 2014 · 1 min read
© 2007–2020 Bulkan
Link to $https://twitter.com/bulkanevcimenLink to $https://github.com/bulkanLink to $https://instagram.com/bulkan.evcimen