It’s fair to say that when it comes to the modern world of javascript, I’m something of a luddite. It’s not a world I’ve spent a lot of time with and while looking at options to start projects much of what I read may as well be double dutch. However, I have spent some time and EmberJS is slowly become more familiar and useful. So, now that I’m writing apps, the next step in my learning curve is deploying them. Having read about a few of the tools that are currently in use (this week at least) I chose to try Broccoli. In keeping with my “one step at a time” philosophy I elected to start simple 🙂

What follows is what I did after looking at various tutorials, but is largely based on a blog post by Tim Eagan.

The first step was making sure it was installed.

npm install --save-dev broccoli<br></br>
sudo npm install --global broccoli-cli```

Of course this just gets you the tool, so now I needed some plugins to help it do useful stuff. To see what’s available, I looked at [http://broccoliplugins.com/](http://broccoliplugins.com/). Initially I installed what seemed like the basics.

npm install --save-dev broccoli-merge-trees


npm install --save-dev broccoli-uglify-js


npm install --save-dev broccoli-static-compiler


npm install --save-dev broccoli-concat```

The broccoli-sass plugin failed to install for me.

Writing the Brocfile.js was the next step. This is just a javascript file and there were many examples to look at to get started. This was my first attempt.

var concatenate = require('broccoli-concat'),<br></br>
    mergeTrees  = require('broccoli-merge-trees'),<br></br>
    pickFiles   = require('broccoli-static-compiler'),<br></br>
    uglifyJs    = require('broccoli-uglify-js'),<br></br>
    app = '.',<br></br>
    appHtml,<br></br>
    appJs;```

appHtml = pickFiles(app, {  
 srcDir : '/',  
 files : ['index.html'],  
 destDir : '/production'  
 });

appJs = concatenate(app, {  
 inputFiles : ['**/*.js'],  
 outputFile : '/production/app.js'  
 });  
 appJs = uglifyJs(appJs, {  
 compress: true  
 });

module.exports = mergeTrees([appHtml, appJs], {overwrite: true});

After creating the file in the root of my project, I was able to simply run it.

`broccoli build 'public'`

I now had 2 files, public/production/index.html and public/production/app.js. Tim’s example used the sass plugin to generate css files, but as I wasn’t using that some modification were needed to include the css files I was using.

appHtml = pickFiles(app, {


srcDir : '/',


files : ['index.html', 'css/style.css'],


destDir : '/production'


});```

However, after making the changes and running the command again, it failed as the public directory already existed! Sadly, there is no option presently available to force an overwrite, so I had to manually remove the existing directory and will need to do this each time (a small shell script will simplify this!). This is a little annoying, but not too much effort.

After looking at the plugins available, I installed broccoli-manifest to simplify production of the appcache file, which works very well and automates another job for me.

I also installed the broccoli-uncss plugin to eliminate unused css.

UPDATE

There is a plugin that cures this problem, clear-broccoli-build-target. Installing it and adding to Brocfile.js has fixed the existing directory problem.