03

gulp-steps : 03 - advanced (pt-Br)

Advanced usage of Gulp

• Spreading Gulp
  • tasks into multiple files inside ./gulp/tasks
    • each gulp tasks file needs to require gulp and $.js (ex.: ./gulp/tasks/clean.js)
  • settings defined on file ./gulp/config.js
  • utilities defined on file ./gulp/$.js
    • gulp plugins loaded with gulp-load-plugins at ./gulp/$.js line 2
    • gulp settings loaded at ./gulp/$.js line 16
• gulpfile.js
  • gulp tasks files loaded with requireDir at gulpfile.js line 7
  • gulp ultilities ./gulp/$.js loaded at gulpfile.js line 3
  • gulp default and main tasks defined at gulpfile.js lines 12-26
• used lazypipe to share and reuse pipeline
  • jshint at ./gulp/tasks/jshint.js line 7
  • lintspaces at ./gulp/tasks/lintspaces.js line 7
  • $.streams. defined on utilities ./gulp/$.js line 21

Prerequisites

• Must have Git installed

• Must have node.js (at least v0.10.x) installed with npm (Node Package Manager)

• Must have Gulp.js node package installed globally. sudo npm install -g gulp

• Must have bower node package installed globally. sudo npm install -g bower

Installation Guide

Enter the following commands in the terminal

git clone https://github.com/soudev/gulp-steps.git
cd gulp-steps/03
npm install

Commands

run gulp

npm start

Gulp

• development workflow

gulp

• build (production version)

gulp release

• preview builded

gulp preview

Commands on Mac

Create commands list

npm init

npm install \
  require-dir \
  del \
  jshint-stylish \
  browser-sync \
  lazypipe \
  gulp-load-plugins \
  gulp \
  gulp-util \
  gulp-sequence \
  gulp-cached \
  gulp-jshint \
  gulp-lintspaces \
  gulp-rev \
  gulp-rev-replace \
  gulp-useref \
  gulp-filter \
  gulp-uglify \
  gulp-csso \
  gulp-minify-html \
  --save-dev

touch gulpfile.js

bower init

bower install \
  jquery \
  --save

Links

• jQuery

--

• [GitHub] aseemk / requireDir - Node.js helper to require() directories.

  • Spreading Gulp tasks into multiple files | Medium by @_rywar

• [GitHub] sindresorhus / del - Delete files/folders using globs

• [GitHub] BrowserSync / browser-sync - Keep multiple browsers & devices in sync when building websites.

• [GitHub] OverZealous / lazypipe - Lazily create a pipeline out of reusable components. Useful for gulp.

• [GitHub] jackfranklin / gulp-load-plugins - Automatically load in gulp plugins

• [GitHub] gulpjs / gulp - The streaming build system

  • [GitHub] gulpjs / gulp-util - Utilities for gulp plugins

  • [GitHub] wearefractal / gulp-cached - A simple in-memory file cache for gulp

  • [GitHub] spalger / gulp-jshint - JSHint plugin for gulp

    • [GitHub] sindresorhus / jshint-stylish - Stylish reporter for JSHint

  • [GitHub] ck86 / gulp-lintspaces - A Gulp plugin for lintspaces

  • [GitHub] teambition / gulp-sequence - Run a series of gulp tasks in order

    • [GitHub] teambition / gulp-sequence : ISSUE 2 - Error: thunk already filled on subsequent run

  • [GitHub] sindresorhus / gulp-rev - Static asset revisioning by appending content hash to filenames: unicorn.css → unicorn-d41d8cd98f.css

  • [GitHub] jamesknelson / gulp-rev-replace - Rewrite occurences of filenames which have been renamed by gulp-rev

  • [GitHub] jonkemp / gulp-useref - Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.

  • [GitHub] sindresorhus / gulp-filter - Filter files in a vinyl stream

  • [GitHub] terinjokes / gulp-uglify - Minify files with UglifyJS

  • [GitHub] ben-eb / gulp-csso - Minify CSS with CSSO.

  • [GitHub] murphydanger / gulp-minify-html - A Gulp plugin that minifies html with Minimize

License

• MIT