In the previous post we did a quick walk through of the sample application. The basic idea is that we have a javascript file in js/app.js and a index.html file in the root of the project that pulls in app.js and its dependencies.
The first thing to note about the sample application is that it doesn't have a build step. Because we haven't yet introduced a build tool we face 2 problems. The first is that we make an http request for each of the static assets separately and at this time the best practice is to make a single http request for all of your javascript assets. The second is that if we want to test our application we need to create another index.html for qunit and add the assets again (duplicating what we've done in the original index.html file).
To solve the first problem, lets introduce a build tool to concatenate all of the javascript files into a single js file. The build tool we are using in the eak-lite blog series is called grunt. Grunt has a huge ecosystem of plugins that we will leverage throughout this process and it's a great task runner.
The first step is to add grunt, grunt-cli and grunt-contrib-concat to your package.json file and npm install each of them.
The next step is to add a new file that will hold the configuration for our build process. For grunt this file is called literally Gruntfile.js
At the top of the script you need to load the concat task so we have access to it when we run our grunt command. Next we declare the concat task itself, providing both a list of assets to concatenate and finally a single file name for the combined output file. Then at the very bottom we simply register a task named "local" that will run the concat step we defined above.
The final step is to replace all the assets in index.html with our new output file.
If you already completed the npm install of grunt/grunt-cli/grunt-contrib-concat you should be able to add grunt to your path and type "grunt local". This command will generate a single js file named deps.min.js and put it in the dist folder. After you run the grunt command you can run the python script by typing "./bin/server" from the root of the project. This should host the static directory so you can view the running app at localhost:3000
Now that we have a working grunt build we can serve up a single javascript file. Up next, we will precompile our handlebars templates!
If you want to follow along on github, this repository has a commit for each part in the series
