04

gulp-steps : 04 - enhanced (pt-Br)

Enhanced usage of Gulp

• tools/
  • gulp/
    • helpers/
      • $.js - gulp utilities
        • gulp plugins loaded with gulp-load-plugins at $.js line 2
        • tools and gulp settings loaded at $.js line 29
      • loadTasks.js - load gulp tasks from given directory
    • tasks/ - gulp tasks splitted into multiple files
      • each gulp tasks file receive from tasks loader tools/gulp/helpers/loadTasks.js gulp and $ as parameters (ex.: clean.js)
  • config.js - tools and gulp settings
• gulpfile.js
  • gulp tasks files loaded with ./tools/gulp/helpers/loadTasks.js at gulpfile.js line 8
  • gulp default and main tasks defined on ./tools/gulp/tasks/default.js
• used lazypipe to share and reuse pipeline
  • jshint at ./tools/gulp/tasks/jshint.js line 3
  • lintspaces at ./tools/gulp/tasks/lintspaces.js line 3
  • $.streams. defined on utilities ./tools/gulp/helpers/$.js line 34

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/04
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 \
  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] 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