Gulp ES6 Recipes

A Collection of Gulp.js Recipes in ES6

Overview

Recipes

Recipes combine multiple Ingredients together, and are designed to be copied into new projects.

Ingredients

Most Ingredients complete a single task. Watch, Browsersync and some Image Ingredients contain multiple tasks.

Configuration

Configuration is stored in config.

The following properties are included in the basic configuration.

config.root      // The project root.
config.env       // Relevant environment variables.
config.src       // The project source paths/directories/globs.
config.src.root  // The project source directory.
config.dist       // The project distribution directories.
config.dist.root  // The project distribution directory.
config.clean     // The paths of generated files and directories for cleanup.
config.plugins   // Gulp plug-in configurations.

Additional configuration can be performed by adding additional properties to config.src, config.dist, config.plugins etc..

Index

Recipes

Essential Ingredients

• Basic Web (HTML, CSS, and JS)

  • Clean, Watch, and Sync Browser.
  • HTML: Lint and Minify.
  • CSS: Lint, Prefix, and Minify with Source Maps.
  • JS: Lint, Bundle, Transpile, and Minify with Source Maps.
  • Images: Optimize (jpg/jpeg, png, svg, gif).

• Sassy Web (HTML, SASS, and JS)

  • Clean, Watch, and Sync Browser.
  • HTML: Lint and Minify.
  • SASS: Lint, Compile, Prefix, and Minify with Source Maps.
  • JS: Lint, Bundle, Transpile, and Minify with Source Maps.
  • Images: Optimize (jpg/jpeg, png, svg, gif).

• Modern Web (HTML, SASS, and TS)

  • Clean, Watch, and Sync Browser.
  • HTML: Lint and Minify.
  • SASS: Lint, Compile, Prefix, and Minify with Source Maps.
  • TS: Lint, Bundle, Compile, and Minify with Source Maps.
  • Images: Optimize (jpg/jpeg, png, svg, gif).

Advanced Ingredients (Development/Production)

• Advanced Sassy Web (HTML, SASS, and JS)

  • Includes Sassy Web Recipe with:
  • HTML: Injected JS, and Gzip.
  • CSS: Purge, Critical, PostCSS Assets, and Gzip.
  • Generate Sitemap.

• Advanced Modern Web (HTML, SASS, and TS)

  • Includes Modern Web Recipe with:
  • HTML: Injected JS, and Gzip.
  • CSS: Purge, Critical, PostCSS Assets, and Gzip.
  • Generate Sitemap.

Advanced Images (Development/Production)

• Responsive Sassy Web (HTML, SASS, and JS with Inject Responsive Images)

  • Includes Advanced Sassy Web Recipe with:
  • HTML: Inject Image Strings, in-line base64 miniature images.
  • JS: Concatenate.
  • Images: Responsive Image Sets.

• Responsive Modern Web (HTML, SASS, and TS with Inject Responsive Images)

  • Includes Advanced Modern Web Recipe with:
  • HTML: Inject Image Strings, in-line base64 miniature images.
  • TS: Concatenates JS Plugins.
  • Images: Responsive Image Sets.

Ingredients

• Base
• Clean
• HTML
  • Lint HTML
  • Minify HTML
  • Inject HTML
  • Gzip HTML
  • Watch HTML
  • BrowserSync HTML
• CSS
  • Lint CSS
  • Autoprefix CSS
  • Autoprefix CSS with Source Maps
  • Minify CSS
  • Minify CSS with Source Maps
  • Gzip CSS
  • Inject CSS
  • Critical CSS
  • Purge CSS
  • PostCSS Assets
  • Watch CSS
  • BrowserSync CSS
• SASS
  • Lint SASS
  • Compile SASS
  • Compile SASS with Source Maps
  • Minify SASS
  • Minify SASS with Source Maps
  • Watch SASS
  • BrowserSync SASS
• JS
  • Lint JS
  • Minify JS
  • Minify JS with Source Maps
  • Browserify JS
  • Browserify JS with Source Maps
  • Babel JS
  • Babel JS with Source Maps
  • Browserify and Babelify JS
  • Concatenate JS
  • Concatenate JS with Source Maps
  • Inject JS
  • Gzip JS
  • Watch JS
  • BrowserSync JS
• TS
  • Lint TS
  • Compile TS
  • Compile TS with Source Maps
  • Minify TS
  • Minify TS with Source Maps
  • Browserify TS
  • Browserify TS with Source Maps
  • Watch TS
  • BrowserSync TS
• PHP
  • Connect and BrowserSync PHP
  • PHP HTML Connect
• Images
  • Optimize Images
  • Responsive Images
  • Inject Images
  • Inject Responsive Images
  • Data URL Images
  • Watch Images
• Sitemap Generator
• If Conditional