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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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