This course has been replace by our Webpack course. We recommend you check that out instead!
Transform a static app with basic script includes and no tooling into a first class citizen using many different tools and techniques with Grunt.js and beyond (Yeoman, Lineman and more).
This course covers adding an intermediary build process so that you can use CSS preprocessors, live reload, concat and minifying resources, coffeescript while splitting asset pipeline settings for local development vs production. You’ll also learn about getting up and running with new projects using Yeoman or Lineman to get up and running quickly building single page apps and unit testing your project.
Workflows and Tooling
- 0:00:00 - 0:05:59 Introduction Dave begins the course with an overview of his work at both Test Double and Shopify and discusses why workflow is so important to front-end development.
- 0:06:00 - 0:10:49 Web Apps Traditional web applications are "the heavy". They handle the templates, generating front-end code, MVC, authentication, security, and storage. Modern web applications tend to separate the responsibilities. Authentication and security stay on the server. The front-end logic is moved to a separate workflow.
0:10:50 - 0:19:55
Traditionally, tooling like compiling, minifying, modularizing, etc. has been managed by the server. Moving from one server environment to another is very difficult. Modern tooling allows for a normalization layer on the front-end. Dave discusses tooling options like Node and Node Packaged Modules.
0:19:56 - 0:29:17
Dave gives a very brief overview about Grunt. There are two main pieces: The command line interface and the Gruntfile.js. He will be diving deeper into Grunt throughout the course.
0:29:18 - 0:40:20
Dave demonstrates a few ways to set up the project using both GitCrawl and GitX. Either tool can be used to move backward and forward through the history of the project. He also gives some troubleshooting tips for setting up this workflow.
0:40:21 - 0:47:56
In this course, Dave will be working with a game: The Banner Saga. The game has been pre-constructed so the focus will be on slicing it up and creating a maintainable workflow. Dave reviews all the assets in the project.
Working with Grunt
- 0:47:57 - 0:54:54 NPM Init & Grunt The first step is to get NPM setup. Doing an "npm init" command will take you through a wizard with all the necessary configuration. Dave demonstrates the process of installing Grunt.
1:07:22 - 1:13:32
Globs & CoffeeScript
With the Gruntfile.js created, Dave adds some additional configuration. He introduces the concept of Globs. They ease the inclusion of framework dependencies and library files by automatically picking up files in the build process. Dave also compares Gruntfile.js with Gruntfile.coffee.
- 1:13:33 - 1:19:32 Grunt Watch The grunt-contrib-watch task will continuously watch any of the included files in the project for changes. When a change occurs, it will re-run all tasks specified in the watch task. This allows developers to streamline their workflow by not having to run grunt after each change.
- 1:19:33 - 1:26:35 CSS Preprocessors Dave adds the CSS preprocessor, LESS, into the workflow. He does this by adding the Grunt LESS task and introduces the concept of "options" in the Gruntfile.
- 1:26:36 - 1:33:44 LESS Mixins Using a few LESS mixins, Dave demonstrates how to base-64 encode images and the pros and cons of it. He also show a few other mixins that helped his workflow when building the game.
- 1:33:45 - 1:38:11 LESS Watch Tasks Right now, the watch task we created do not monitor the LESS files. Dave separates his watch task to include a JS target and a LESS target.
1:38:12 - 1:42:42
Dave takes a break from the hands-on portion of the course to look at the Grunt documentation. Specifically he notes the configuring tasks section.
- 1:42:43 - 1:52:41 Splitting Concerns & Using Copy As the Gruntfile grows, there can be confusion between the list of files and the tasks associated with them. By separating the files and the tasks, the configuration of those tasks becomes cleaner. Dave also uses the copy task to copy our index.html file into the generated folder along with the other build files.
- 1:52:42 - 2:00:17 Custom Server Tasks Using the Grunt registerTask method, custom tasks can be created. In this example, Dave creates a custom task called "server" which will set up a static file development server.
- 2:00:18 - 2:11:59 Finishing the Custom Task Dave answers a few general questions about the usefulness of the Node server. He then finishes the custom server task by instantiating the Express server and configuring the deployment.
- 2:12:00 - 2:17:51 Using Express Compress Setting up the development environment to mirror production as much as possible will remove a whole category of bugs when moving to production. The Express compress method turns on gzip compression for the application's assets.
- 2:17:52 - 2:26:22 Live Reload Live-reload is a Chrome extension that makes switching from the editor to the browser faster. The Grunt watch task includes the live-reload task so installing the plugin is the only step.
- 2:30:00 - 2:38:01 Chrome Workspaces In the Chrome Developer Tools, adding a folder to the workspace allows developers to edit their source files in Chrome and save the changes. With the Grunt watch task running, changes will automatically reload the browser.
- 2:38:02 - 2:43:37 Grunt Clean & Grunt LESS The Grunt clean task will remove any workspace added to the "workspaces" target. This wouldn't be a task to include as a part of the project's automation layer so it will be run manually as needed. Dave also updates the LESS plugin to use the merged version.
- 2:57:50 - 3:01:21 Grunt Open Grunt open will automatically launch a new browser. This can be somewhat annoying when using live-reload, though.
- 3:01:22 - 3:04:39 Match Dependencies Including each Grunt plugin every time can be tedious. Using matchdep, Grunt will automatically load any dependencies that match the specified pattern.
- 3:04:40 - 3:09:12 Simulating Production Assets Using the prodsim task, application assets will be served in a way that simulates a production environment. This includes minifying, compressing, and gzipping files.
- 3:14:55 - 3:24:39 Compiling CoffeeScript Now that all the source code has been ported to CoffeeScript, Dave adds a coffee task to the configuration file. He also looks at Grunt Newer to make the watch task more efficient.
- 3:24:40 - 3:35:56 Bower Similar to NPM, Bower manages packages that are consumed in the browser. This would include any of the files from the "vendor" folder in this application.
- 3:35:57 - 3:48:24 Reorganizing the Application Now that the application includes Bower and NPM modules, Dave organizes all the source code into an "app" directory. He also creates the necessary Angular template files and install the Grunt task for pre-compiling these templates.
- 3:57:59 - 4:10:07 Backbone To prove the workflow is robust, Dave swaps out Angular for Backbone. This can be done with minimal changes to the Gruntfile and build processes. Most of the changes are Backbone-specific.
- 4:10:08 - 4:14:25 Yeoman Introduction Yeoman scaffolds out a new application by writing the Grunt configuration and pulling in relevant tasks. It includes generators for 100's of frameworks and can quickly streamline web application development.
- 4:14:26 - 4:28:19 Browserify Dave sidetracks from his Yeoman example to discuss Browserify. Browserify incorporates CommonJS to recursively bundle all required modules into a single file. Dave also shows how to add source maps with CommonJS
- 4:28:20 - 4:36:16 Yeoman Workflow After introducing Yeoman in a previous video, Dave walks through the installation and configuration files. Hey also demonstrates the generators inside of Yeoman.
- 4:36:17 - 4:45:46 Lineman Workflow Lineman, like Yeoman, is helps scaffold an application. While Yeoman covers a boarder range of applications, Lineman tends to focus more on rich client MVC applications.
- 4:45:47 - 4:52:33 Lineman Spec and Build Lineman-spec kicks off a test runner. This happens in parallel with Lineman-run. Any tests in the spec folder would execute. Lineman-build generates the production-ready assets. Dave also overviews the scaffolding that ships with Lineman.
- 4:52:34 - 5:01:55 Test-Driven Development Questions Dave answers a few audience questions about using Lineman's test-driven development. Specifically, should Lineman be used over Karma in an Angular application.
- 5:01:56 - 5:08:45 End-to-End Testing Dave demonstrates some techniques around end-to-end testing using Angular and Protractor. He simulates a backend using server.js inside Lineman
- 5:08:46 - 5:17:30 Push State Simulation Push state simulation is built into Angular and can integrate with Lineman. When enabled, server request will be intercepted by the server.js file and allow for URLs that don't use the hash tag.
- 5:17:31 - 5:25:06 Integrating with Rails An audience member asks how this workflow integrates with deployment frameworks like Rails Asset Pipeline. Dave shows how they handle this at Shopify. Dave also answers some additional audience questions.
- 5:25:07 - 5:35:55 Unit Testing Grunt Plugins As some bonus content, Dave demonstrates how to unit test Grunt plugins. This is done by using Node Unit. A more robust way is to use grunt-jasmine-bundle.
- 5:35:56 - 5:44:00 Writing a blog with Lineman Dave ends the course showing how to use Lineman to create static markdown for a blog.
- 5:44:01 - 5:49:13 Wrap-up Final audience comments and questions.