Advanced

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.
Course info
Rating
(1263)
Level
Intermediate
Updated
Jan 29, 2015
Duration
4h 51m
Table of contents
Course Introduction
Welcome 0m What to Expect 2m A Glimpse of What You Will Learn to Do 2m Environment and Prerequisites 1m Future 1m
The Value of Gulp as a JavaScript Task Runner
The Value of a Task Runner 3m Using Gulp as a Task Runner 1m What's in It for You 1m Choosing Between Grunt and Gulp 5m Gulp Streams in Action 1m Streamline Your Tasks Using Gulp 1m
4 Things You Need to Know About Gulp
Overview of Gulp APIs 1m gulp.task 3m gulp.src 2m gulp.dest 1m gulp.watch 2m Fitting Together the 4 Gulp APIs 2m
Getting Started With Gulp
Getting the StarteSr Code 2m Getting Node.js 3m Installing Chocolatey and Homebrew 3m Installing the Gulp CLI 2m Installing Gulp and Bower Globally 2m Creating a Local Package for a Project 4m Creating a Gulpfile.js 2m Recap 1m
Code Analysis With JSHint and JSCS
Code Analysis With JSHint and JSCS 2m JSHint and JSCS in Brackets 2m Installing JSHint and JSCS for Gulp 1m Coding the JSHint and JSCS Task 5m Reusable Functions 2m Failing the Task 1m Conditionally Displaying the Source Files 3m Lazy Loading Gulp Plugins 2m Reusable Configuration Module 3m Recap 1m
CSS Compilation
Compiling to CSS and Error Handling 1m CSS Pre-Compilers and Vendor Prefixes 2m Creating a Less and AutoPrefixer Gulp Task 5m Deleting Files in a Dependency Task 5m Creating a Watch Task to Compile CSS 2m Handling Errors and Using Gulp Plumber 4m Recap 1m
HTML Injection
Gulp and HTML Injection 1m Exploring wiredep and gulp-inject 2m Adding Bower Files and Your JavaScript to the HTML 9m Removing Scripts and Styles From the Main HTML 3m Adding Bower Files Automatically on Install 2m Injecting Custom CSS 5m Recap 2m
Serving Your Dev Build
Serving Your Development Build 1m Using nodemon in a Gulp Task 1m Prepare, Serve, and Restart the Code 6m Run Tasks on Node Restart 4m Recap 0m
Keeping Your Browser in Sync
Syncing the Browser 1m Exploring browser-sync 2m Configuring browser-sync 5m Injecting CSS From Less 6m Connecting browser-sync and nodemon 2m Synchronizing Multiple Browsers 2m Recap 1m
Building Assets and Keeping Organized
Build Assets 1m Task Listings, Image Compression, and Copying 2m Creating Task Listing 2m Copying Fonts 3m Optimizing Images 2m Cleaning 4m Recap 1m
Caching HTML Templates for Angular
Caching HTML Templates 1m Angular's Template Cache 2m Cleaning the Built Code Folder 2m Minifying HTML and Putting in $templateCache 7m Recap 1m
Creating a Production Build Pipeline
Optimized Production Build Pipelines 1m Exploring gulp-useref 3m Creating the Optimize Gulp Task With Template Cache 3m Adding gulp-useref to the Optimization Pipeline 4m Cleaning and Serving the Built Code 2m Serving the Optimized Build 5m Recap 1m
Minifying and Filtering
Minifying and Filtering 1m Exploring Minification 1m Optimizing CSS 3m Optimizing JavaScript 1m Serving Optimized Code 1m When Optimized Code Fails 3m Foreshadowing of the Effect of Mangling on Angular 1m Recap 1m
Angular Dependency Injections
Angular Dependency Injections 1m Mangling and gulp-ng-annotate 2m Adding ng-annotate to the Optimization Task 6m Adding Hints 5m Recap 1m
Static Asset Revisions and Version Bumping
Revisions and Versions 1m Exploring File Revisions 2m Adding Static Asset Revisions and Replacements 3m Generating a Revision Manifest 1m Bumping Versions With Server 6m Recap 1m
Testing
Testing 1m Karma and Single Run vs. Watching 2m Creating the First Test Task 7m Karma Configuration 7m Installing Packages and Running the Tests 2m Making Tests Run Before Other Tasks 5m Continuously Running Tests During Development 1m Next Steps 1m
Integration Testing and HTML Test Runners
Intro 1m Node Child Processes 1m Running Tests That Require a Node Server 4m Setting Up an HTML Test Runner Task 3m Injecting the HTML 4m browser-sync and the Test Runner 3m Launching the HTML Test Runner 4m Running Server Tests in the HTML Test Runner 2m Recap 1m
Migrating to Gulp 4
Gulp 4 1m Tasks and Changes 4m Migrating 7m Running the Refactored Tasks 4m Installing the Latest Gulp 1m Recap 1m
Description
Course info
Rating
(1263)
Level
Intermediate
Updated
Jan 29, 2015
Duration
4h 51m
Description

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.

About the author
John Papa
About the author

John Papa is a Principal Developer Advocate with Microsoft and an alumni of the Google Developer Expert, Microsoft Regional Director, and MVP programs.

More from the author
Angular CLI
Beginner
3h 8m
Feb 1, 2021
Learning Angular from Scratch
Beginner
1h 15m
Sep 3, 2020
Angular AMA
Beginner
1h 5m
Sep 3, 2020
More courses by John Papa

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT