JavaScript Build Automation With Gulp.js

By John Papa

Learn how to take advantage of JavaScript task automation using Gulp to streamline time consuming yet important tasks, find and resolve issues faster, and be a more productive developer.

Start free trial now

By John Papa

Learn how to take advantage of JavaScript task automation using Gulp to streamline time consuming yet important tasks, find and resolve issues faster, and be a more productive developer.

Table of contents
Description

Expand all

Course Introduction

5m 50s

Welcome 0m 27s What to Expect 1m 32s A Glimpse of What You Will Learn to Do 2m 9s Environment and Prerequisites 1m 10s Future 0m 30s

The Value of Gulp as a JavaScript Task Runner

11m 56s

The Value of a Task Runner 2m 46s Using Gulp as a Task Runner 1m 19s What's in It for You 1m 18s Choosing Between Grunt and Gulp 4m 34s Gulp Streams in Action 1m 11s Streamline Your Tasks Using Gulp 0m 46s

4 Things You Need to Know About Gulp

9m 35s

Overview of Gulp APIs 0m 45s gulp.task 2m 39s gulp.src 2m 5s gulp.dest 0m 51s gulp.watch 1m 30s Fitting Together the 4 Gulp APIs 1m 43s

Getting Started With Gulp

18m 21s

Getting the StarteSr Code 1m 50s Getting Node.js 2m 41s Installing Chocolatey and Homebrew 2m 36s Installing the Gulp CLI 1m 34s Installing Gulp and Bower Globally 2m 28s Creating a Local Package for a Project 3m 47s Creating a Gulpfile.js 2m 27s Recap 0m 54s

Code Analysis With JSHint and JSCS

21m 13s

Code Analysis With JSHint and JSCS 1m 50s JSHint and JSCS in Brackets 1m 47s Installing JSHint and JSCS for Gulp 0m 38s Coding the JSHint and JSCS Task 4m 57s Reusable Functions 1m 48s Failing the Task 0m 30s Conditionally Displaying the Source Files 2m 53s Lazy Loading Gulp Plugins 2m 2s Reusable Configuration Module 3m 26s Recap 1m 19s

CSS Compilation

21m 3s

Compiling to CSS and Error Handling 0m 41s CSS Pre-Compilers and Vendor Prefixes 2m 16s Creating a Less and AutoPrefixer Gulp Task 4m 48s Deleting Files in a Dependency Task 5m 18s Creating a Watch Task to Compile CSS 2m 24s Handling Errors and Using Gulp Plumber 4m 22s Recap 1m 10s

HTML Injection

23m 59s

Gulp and HTML Injection 0m 34s Exploring wiredep and gulp-inject 1m 46s Adding Bower Files and Your JavaScript to the HTML 9m 2s Removing Scripts and Styles From the Main HTML 3m 24s Adding Bower Files Automatically on Install 2m 20s Injecting Custom CSS 4m 31s Recap 2m 20s

Serving Your Dev Build

12m 2s

Serving Your Development Build 0m 42s Using nodemon in a Gulp Task 1m 18s Prepare, Serve, and Restart the Code 5m 57s Run Tasks on Node Restart 3m 42s Recap 0m 20s

Keeping Your Browser in Sync

18m 44s

Syncing the Browser 0m 33s Exploring browser-sync 1m 34s Configuring browser-sync 5m 9s Injecting CSS From Less 6m 25s Connecting browser-sync and nodemon 2m 25s Synchronizing Multiple Browsers 1m 54s Recap 0m 41s

Building Assets and Keeping Organized

13m 13s

Build Assets 0m 30s Task Listings, Image Compression, and Copying 1m 39s Creating Task Listing 1m 59s Copying Fonts 2m 46s Optimizing Images 1m 47s Cleaning 3m 54s Recap 0m 35s

Caching HTML Templates for Angular

11m 52s

Caching HTML Templates 0m 37s Angular's Template Cache 1m 55s Cleaning the Built Code Folder 1m 42s Minifying HTML and Putting in $templateCache 6m 58s Recap 0m 37s

Creating a Production Build Pipeline

19m 4s

Optimized Production Build Pipelines 0m 35s Exploring gulp-useref 3m 23s Creating the Optimize Gulp Task With Template Cache 3m 3s Adding gulp-useref to the Optimization Pipeline 4m 13s Cleaning and Serving the Built Code 1m 44s Serving the Optimized Build 5m 27s Recap 0m 35s

Minifying and Filtering

12m 17s

Minifying and Filtering 0m 56s Exploring Minification 1m 3s Optimizing CSS 3m 25s Optimizing JavaScript 1m 19s Serving Optimized Code 1m 12s When Optimized Code Fails 2m 30s Foreshadowing of the Effect of Mangling on Angular 0m 49s Recap 0m 59s

Angular Dependency Injections

15m 33s

Angular Dependency Injections 0m 58s Mangling and gulp-ng-annotate 2m 6s Adding ng-annotate to the Optimization Task 6m 7s Adding Hints 4m 58s Recap 1m 23s

Static Asset Revisions and Version Bumping

12m 52s

Revisions and Versions 0m 49s Exploring File Revisions 1m 30s Adding Static Asset Revisions and Replacements 2m 45s Generating a Revision Manifest 0m 58s Bumping Versions With Server 5m 59s Recap 0m 49s

Testing

25m 49s

Testing 0m 55s Karma and Single Run vs. Watching 1m 36s Creating the First Test Task 6m 51s Karma Configuration 6m 46s Installing Packages and Running the Tests 2m 17s Making Tests Run Before Other Tasks 4m 52s Continuously Running Tests During Development 1m 25s Next Steps 1m 2s

Integration Testing and HTML Test Runners

21m 34s

Intro 1m 4s Node Child Processes 1m 0s Running Tests That Require a Node Server 4m 0s Setting Up an HTML Test Runner Task 3m 4s Injecting the HTML 3m 36s browser-sync and the Test Runner 2m 42s Launching the HTML Test Runner 3m 48s Running Server Tests in the HTML Test Runner 1m 43s Recap 0m 32s

Migrating to Gulp 4

17m 14s

Gulp 4 0m 31s Tasks and Changes 3m 44s Migrating 6m 40s Running the Refactored Tasks 4m 24s Installing the Latest Gulp 1m 6s Recap 0m 47s

You've built your JavaScript application, but how do you automate testing, perform code analysis, run it, or optimize the code? These redundant tasks can consume valuable time and resources. Stop working so hard and take advantage of JavaScript task automation using Gulp to streamline these tasks and give you back more time in the day. You will learn how Gulp works, how to jump-start task automation with Gulp, find and resolve issues faster, and be a more productive developer.

Table of Contents