Gulp Starter App

Based off tutorials:

Gulp Quick Start

Start Coding ES6 With Babel

babeljs.io/en/setup

Compiling ES6 with Gulp and Babel

Learn Gulp from Scratch

A Short and Simple Guide to Babel

Browsersync + Gulp

Develop WordPress Themes Faster with Gulp

Building a simple responsive images pipeline with Gulp

---

NPM

---

Install

# ---------------------------------------
# Install dependencies from package.json
# ---------------------------------------
npm install

# --------------------------
# Or install from scratch
# --------------------------

# 1. npm initialize
npm init -y

# 2. general dev dependencies
npm install --save-dev gulp@next gulp-rename gulp-sourcemaps vinyl-source-stream vinyl-buffer gulp-size browser-sync gulp-imagemin

# 3. sass dev dependencies
npm install --save-dev gulp-sass gulp-autoprefixer

# 4. es6 js dev dependencies - Babel 7
npm install --save-dev gulp-babel @babel/core @babel/preset-env @babel/register babelify browserify gulp-uglify

# 5. dependencies
npm install express @babel/polyfill

# -----------------------
# Older Babel 6
# -----------------------
npm install --save-dev gulp-babel@6 babel-core babel-preset-env babel-register babel-polyfill babelify@8 browserify gulp-uglify

Aliases

# install local package
npm i <package>

# install local --save-dev
npm i -D <package>

# install global package
npm i -g <package>

# uninstall local package
npm un <package>

# npm update packages
npm up

# run tests
npm t

# list installed modules
npm ls

# list installed modules 1st level only
npm ls --depth=0

# list installed modules with dependencies
npm ls --depth=1

# print additional package information while listing modules
npm ll or npm la

# npm update
npm install npm@latest -g

---

Gulp

---

Minimum version:

Run

# View task list
gulp --tasks

# Run all tasks ( default )
gulp

# Build html, style, scripts tasks
gulp build

# Watch source files
gulp watch

# Move html from source to distribution
gulp html

# Compress image files
gulp images

# Process for SASS
gulp style

# Process for ES6
gulp scripts

# Turn on BrowserSync ( also done by default and watch )
gulp browserSync

On Error

// General & wordier
.on('error', function (err) { console.log( err.toString() ); this.emit('end'); })

// Sass specific & shorter
.on( 'error', sass.logError )

Polyfill Generator Error

In web development, a polyfill is code that implements a feature on web browsers that do not support the feature. - Polyfill Programming

When you see this generator error of "regeneratorRuntime is not defined":

It means you need to call the polyfill at the beginning of the file. In this starter project it applies to client/src/js/scripts.js @babel/polyfill

require("@babel/polyfill");

Babel Presets

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

Use inline

browserify({ entries: jsPaths.src, debug: true })
   .transform( babelify, { presets: ["@babel/preset-env"] })
   .bundle()

// ---------------------------------------
// Alternative
// If using presets in package.json or .babelrc then this would suffice
// ---------------------------------------
browserify({ entries: jsPaths.src, debug: true })
       .transform( babelify )
       .bundle()

Or use in package.json

{
 "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "express": "^4.16.4",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0"
  },
  "babel": {
    "presets": ["@babel/preset-env"]
  }
}

Or use in .babelrc

{
    "presets": ["@babel/preset-env"]
}

BrowserSync

Serve from base directory, don't open automatically, and inject changes. Note I'm only using inject changes to insert CSS changes for speedier style adjustments.

// gulpfile.js

function browser_sync( cb ) {

  browserSync.init({
    server: { baseDir: './client/dist/' },
    open: false,
    injectChanges: true,
  });

  cb();
}

function watchme( cb ) {
  
  // Reload not needed b/c changes are being injected in browser_sync
  watch( stylePaths.watch, style );

  // Reload on change
  watch( jsPaths.watch, scripts ).on( 'change', browserSync.reload );
  watch( htmlPaths.watch, html ).on( 'change', browserSync.reload );

  cb();
}

---

Dependencies

---

Dependencies vs devDependencies

Dependencies are for node js server apps. devDependencies are for for client side apps and only required during development.

General

gulp - npm

gulp.org docs

gulp-rename

gulp-size

gulp-sourcemaps

Browsersync + Gulp

SASS

gulp-sass gulp-autoprefixer

ES6

gulp-babel

@babel/core - npm

@babel/core - babeljs

@babel/preset-env

@babel/polyfill

@babel/register

babelify

browserify

vinyl-buffer

vinyl-source-stream

Server

acorn

express

Other

axios

browsersync

delete

gulp-beautify

gulp-concat

gulp-if

gulp-ignore

gulp-imagemin

gulp-uglify

gulp-uglifycss

lazypipe - create an immutable, lazily-initialized pipeline.

rollup

rxjs

through2

---

Docs

---

Styles

Output Styles

node-sass

JS Callbacks

javascript.info/callbacks

medium.com - Understanding Javascript Function Executions — Call Stack, Event Loop , Tasks & more

es5 module.exports vs es6 export

https://medium.com/@zachgavin/module-exports-and-loading-es5-to-es6-a33ac592989c

Babel

Using Babel with Gulp

Using Babel

Compiling ES6 with Gulp and Babel

Plugins

Presets

gulp-babel github

Start Coding ES6 With Babel

NPM Shortcuts

Shorthands and Other CLI Niceties

Markdown Cheatsheet

markdownguide.org

Syntax highlighting