Gulp 4: Automate your development workflow

Learn Gulp basics, installation, and its core features. Set up a structured project, create the first gulp task, and add sass, watch, and browser reload tasks.

Learn how gulp automates repetitive web development tasks, from auto-prefixing CSS and compiling preprocessors to Babel transpilation, image optimization, and live browser reload with plugins.

install and verify node and npm, understand gulp dependencies, and prepare your environment for gulp installation by checking versions and handling security prompts.

Install the gulp command line interface globally, create a project folder and package.json, then install gulp as a development dependency and review node_modules.

Discover how to configure gulp with a gulpfile.js, define your first asynchronous gulp task using a callback, and run it to automate your development workflow.

Learn how to signal gulp task completion in asynchronous workflows, using either a callback function or a return statement. The lesson shows practical patterns to ensure tasks finish without errors.

Structure a gulp project by separating source code and assets, with a source folder named sirc containing index.html, img, styles, and javascript folders, plus a distribution folder for output.

Explore how to automate styles with gulp 4 by installing gulp-sass and sass as dev dependencies, then create a gulp task that uses pipe and destination to compile scss files.

Explore gulp glob patterns to target multiple sass files: use an asterisk for a single extension, a double star for subfolders, and a negation operator to exclude files.

discover how Sass source maps connect compiled CSS to original Sass sources using gulp 4, enabling precise debugging and easier maintenance by mapping lines in dev tools.

Learn to automate style updates with a Gulp watch task that monitors source files and runs tasks in sequence, applying changes live in the browser.

Set up a live browser-sync server in gulp to preview changes in real time. Auto-reload the page on file changes to streamline your development workflow.

Extend gulp’s watch task to monitor multiple html files across folders with an array of glob patterns, trigger live browser reloads, and update linked content across the project.

Install golpe and its dependencies, write tasks and watch for changes, and use golpe api methods and golpe plug ins; improve configuration file for web development in the next module.

Explore Gulp 4 for automating development tasks with an optimization focus. Minify CSS and JavaScript, concatenate scripts, run image-focused tests, and set a default task to execute all tasks.

Minify css with gulp by merging styles into a single line and removing spaces, indentation, and comments to shrink file size and speed up loading with a watch task.

Configure a gulp 4 JavaScript task to modify code, set up a watch that tracks all JavaScript files, and minify output with a plugin.

Learn to rename minified outputs in Gulp 4 by installing and integrating a rename plugin, configuring a suffix for JavaScript and CSS files, and ensuring only minified files are renamed.

Learn to concatenate JavaScript files with gulp 4 using the gulp-concat plugin, merging multiple scripts in a defined order, and test the results in a minified build.

Automate image optimization with gulp by creating an image optimization task, adding three images to the project, installing a gulp plugin for image optimization, and validating the size reductions.

Fix gulp-imagemin errors by downgrading to version 7.1.0, uninstalling the latest plugin, and reinstalling the exact version. Avoid modifying node_modules; verify gulp-imagemin works without breaking the gulp file.

Learn to automate image optimization in Gulp 4 with the gulp cache plugin, caching and minifying new images and clearing cache to rebuild from scratch.

Set the default gulp command with gulp.series to run the watch task, which starts a live server and monitors JavaScript files and images for changes.

This module demonstrates minifying JavaScript with a .min suffix, merging files in desired order, setting up image optimization and a creation feature to process needed assets, and evaluating Gulp configuration.

Refine the gulp workflow by templating email files, minifying assets, and using Babel to transpile modern JavaScript to ES5, while adding a siestas styles plugin for browser compatibility.

Learn to use the kit templating language with gulp to create reusable partials. Import files, assign variables, and include underscore-prefixed partials in index to streamline static websites and landing pages.

Configure the editor to apply HTML-like syntax highlighting to .kit files and partials, by setting the file association and language, and use Emmet to insert new elements.

Install the gulp ASML minify plugin, apply collapse whitespace, and minify HTML in the gulp task; test by checking the index file is minified and note performance improvements.

Install and configure gulp autoprefixer to automatically add vendor prefixes to css for major browsers. Integrate it into the gulp pipeline before source maps, then test in the browser.

Install and configure babel with gulp to transpile modern JavaScript, ensuring compatibility across devices, test by running and validating the transpiled output in the terminal.

Structure your gulpfile.js by creating a files object to map globs to properties, reducing repetition in watch tasks, and switch to gulp.parallel with a serve task that runs before watching.

Automate packaging by installing the gulp zip plugin, configuring a zip task, and archiving the project (excluding node_modules) to a root output with a project-named zip file.

Set up a gulp clean task to delete all contents inside the GST folder using the installed npm module, then run gulp clean to verify the folder is empty.

Enhance error handling in Gulp 4 by integrating Gulp plumber and Gulp notifier to continue the watch on errors and display notifications in the notification center.

Convert a gulp configuration to a modern style, export tasks, and rewrite tasks to automate your development workflow with gulp 4.

Learn how gulp 4 automates the workflow by running only the changed task, not all tasks. Configure per-task watches and browser sync to speed up builds in large projects.

Learn to search for a gulp plugin, install it, configure a task using the pipe method, set source paths with the SRT method, and apply the gold standard for output.

Explore a fully featured gulp configuration file with comments on gold tasks and global patterns, plus a step-by-step guide to set up a gulp task and adapt the project structure.

Complete the course and apply its material to boost your web development skills. Pursue opportunities in London web development and build your career.