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