Front-End Tooling and Workflows with Grunt and Beyond
This course has been updated! We now recommend you take the Webpack 4 Fundamentals course.
Table of Contents
IntroductionDave 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.
Web AppsTraditional 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.
ToolingTraditionally, 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.
GruntDave 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.
Project SetupDave 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.
Starting PointIn 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
NPM Init & GruntThe 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.
Globs & CoffeeScriptWith 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.
Grunt WatchThe 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.
CSS PreprocessorsDave 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.
LESS MixinsUsing 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.
LESS Watch TasksRight 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.
Grunt DocumentationDave takes a break from the hands-on portion of the course to look at the Grunt documentation. Specifically he notes the configuring tasks section.
Splitting Concerns & Using CopyAs 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.
Custom Server TasksUsing 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.
Finishing the Custom TaskDave 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.
Using Express CompressSetting 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.
Live ReloadLive-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.
Chrome WorkspacesIn 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.
Grunt Clean & Grunt LESSThe 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.
Grunt OpenGrunt open will automatically launch a new browser. This can be somewhat annoying when using live-reload, though.
Match DependenciesIncluding each Grunt plugin every time can be tedious. Using matchdep, Grunt will automatically load any dependencies that match the specified pattern.
Simulating Production AssetsUsing the prodsim task, application assets will be served in a way that simulates a production environment. This includes minifying, compressing, and gzipping files.
Compiling CoffeeScriptNow 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.
BowerSimilar 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.
Reorganizing the ApplicationNow 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.
BackboneTo 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.
Yeoman IntroductionYeoman 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.
BrowserifyDave 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
Yeoman WorkflowAfter introducing Yeoman in a previous video, Dave walks through the installation and configuration files. Hey also demonstrates the generators inside of Yeoman.
Lineman WorkflowLineman, 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.
Lineman Spec and BuildLineman-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.
Test-Driven Development QuestionsDave answers a few audience questions about using Lineman's test-driven development. Specifically, should Lineman be used over Karma in an Angular application.
End-to-End TestingDave demonstrates some techniques around end-to-end testing using Angular and Protractor. He simulates a backend using server.js inside Lineman
Push State SimulationPush 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.
Integrating with RailsAn 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.
Unit Testing Grunt PluginsAs 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.
Writing a blog with LinemanDave ends the course showing how to use Lineman to create static markdown for a blog.
Wrap-upFinal audience comments and questions.