Front-End Tooling and Workflows with Grunt and Beyond

Front-End Tooling and Workflows with Grunt and Beyond

Год выпуска: 2014
Производитель: frontendmasters
производителя: frontendmasters/courses/workflows-and-tooling/
Автор: David Mosher
Продолжительность: 5 hours, 46 min
Тип раздаваемого материала: Видеоклипы
Язык: Английский
Описание: This course has been replace by our Webpack course frontendmasters/courses/webpack/. 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.
Course Slides - speakerdeck/dmosher/frontend-workflows-and-tooling
Course Code - github/davemo/fem-grunt-workflow

Содержание
Table of Contents
Introduction
Introduction

00:00:00 - 00:06:38
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.
Web Apps

00:06:39 - 00:11:31
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.
Tooling

00:11:32 - 00:20:38
Tooling
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. - //package.json.nodejitsu
Grunt

00:20:39 - 00:29:52
Grunt
Dave gives a very brief overview about Grunt. There are two main pieces: The command line interface and the Grun СПАМ He will be diving deeper into Grunt throughout the course. - //gruntjs/project-scaffolding
Project Setup

00:29:53 - 00:40:58
Project Setup
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. - //rowanj.github.io/gitx/ - //github/davemo/fem-grunt-workflow
Starting Point

00:40:59 - 00:48:27
Starting Point
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. - github/davemo/tbs-battle-planner
Working with Grunt
NPM Init & Grunt

00:48:28 - 00:55:21
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.
Grun СПАМ

00:55:22 - 01:07:58
Grun СПАМ
Dave creates a config object inside the Grun СПАМ file. The moves all the required JavaScript library definitions there so they can be concatenated during the build phase. The build can be initiated by running the 'grunt' command.
Globs & CoffeeScript

01:07:59 - 01:14:11
Globs & CoffeeScript
With the Grun СПАМ 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 Grun СПАМ with Grun СПАМ - //tbranyen/post/coffeescript-has-the-ideal-syntax-for-configurations
Grunt Watch

01:14:12 - 01:20:11
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.
CSS Preprocessors

01:20:12 - 01:27:03
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 Grun СПАМ
LESS Mixins

01:27:04 - 01:34:16
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.
LESS Watch Tasks

01:34:17 - 01:38:46
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.
Grunt Documentation

01:38:47 - 01:43:04
Grunt Documentation
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. - //gruntjs
Splitting Concerns & Using Copy

01:43:05 - 01:53:04
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.
Custom Server Tasks

01:53:05 - 02:00:46
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.
Finishing the Custom Task

02:00:47 - 02:12:13
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.
Using Express Compress

02:12:14 - 02:17:58
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.
Live Reload

02:17:59 - 02:26:05
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.
Live Reload Alternative

02:26:06 - 02:29:23
Live Reload Alternative
The Grunt live-reload task also has a JavaScript snippet that can added to implement the live-reload functionality without the Chrome extension. The drawback of this is you have to modify the HTML to turn off the reloading.
Chrome Workspaces

02:29:24 - 02:37:25
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.
Grunt Clean & Grunt LESS

02:37:26 - 02:43:06
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.
The DIST Workflow

02:43:07 - 02:49:22
The DIST Workflow
Dave adds the 'dist' target to the workflow. This will involve minifying the CSS and JavaScript and copying the HTML to the correct directory.
Minifying JavaScript

02:49:23 - 02:57:17
Minifying JavaScript
Grunt has a nice API for adding metadata to distribution files. It supports reading JSON or YAML. This metadata could include dates, authors, copyrights, etc.
Grunt Open

02:57:18 - 03:00:48
Grunt Open
Grunt open will automatically launch a new browser. This can be somewhat annoying when using live-reload, though.
Match Dependencies

03:00:49 - 03:04:09
Match Dependencies
Including each Grunt plugin every time