Table of Contents
Building a JavaScript Development Environment
by Cory House
Return to JavaScript courses, JavaScript glossary or JavaScript
Starting a new JavaScript project from scratch is overwhelming. This course provides a playbook outlining the key decisions you need to make. Build a robust development environment that handles bundling, linting, transpiling, testing, and much more.
Hello! My name is Cory, and welcome to Building a JavaScript Development Environment. In this course, you will explore the long list of decisions and patterns for building your own JavaScript development from scratch using modern tooling. You will get there by learning about major topics like transpiling, bundling, testing, and npm scripts for automation. By the end of this course, you will be able to create a rapid feedback JavaScript development experience that suits your team's unique preferences. Before you begin, make sure you are already familiar with JavaScript and HTML. After this course, you'll be ready to move on to building applications in a wide array of technologies including Angular, React, Node.js, and Electron. I hope you'll join me, and I look forward to helping you on your learning journey here at Pluralsight.
Contents
-
- The Value of a Task Runner
- Gulp Streams in Action
- Streamline Your Tasks Using Gulp
- 4 Things You Need to Know About Gulp
- Overview of Gulp APIs
- Fitting Together the 4 Gulp APIs
- Getting Started With Gulp
- Getting the StarteSr Code
- Installing Chocolatey and Homebrew
- Installing the Gulp CLI
- Installing Gulp and Bower Globally
- Creating a Local Package for a Project
- Creating a Gulpfile.js
-
- Code Analysis With JSHint and JSCS
Installing JSHint and JSCS for Gulp
38s Coding the JSHint and JSCS Task 4m 57s Reusable Functions 1m 48s Failing the Task 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 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 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 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 20s
Keeping Your Browser in Sync 18m 44s
Syncing the Browser 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 41s
Building Assets and Keeping Organized 13m 13s
Build Assets 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 35s
Caching HTML Templates for Angular 11m 52s
Caching HTML Templates 37s Angular's Template Cache 1m 55s Cleaning the Built Code Folder 1m 42s Minifying HTML and Putting in $templateCache 6m 58s Recap 37s
Creating a Production Build Pipeline 19m 4s
Optimized Production Build Pipelines 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 35s
Minifying and Filtering 12m 17s
Minifying and Filtering 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 49s Recap 59s
Angular Dependency Injections 15m 33s
Angular Dependency Injections 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 49s Exploring File Revisions 1m 30s Adding Static Asset Revisions and Replacements 2m 45s Generating a Revision Manifest 58s Bumping Versions With Server 5m 59s Recap 49s
Testing 25m 49s
Testing 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 32s
Migrating to Gulp 4 17m 14s
Gulp 4 31s Tasks and Changes 3m 44s Migrating 6m 40s Running the Refactored Tasks 4m 24s Installing the Latest Gulp 1m 6s Recap
Fair Use: https://app.pluralsight.com/library/courses/javascript-development-environment/table-of-contents