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