jrdepew/GulpDemo

description

Demonstration

This is just a first pass at deploying NodeJS and Gulp for performance enhancements and frontend efficiency

Packages Included

Name	Description
Uglify	JavaScript parser, mangler/compress and beautify toolkit
Concat	Concatenate files
JSHint	check JS files for errors
Jade	markdown template engine
CSSComb	CSScomb is a coding style formatter for CSS
AutoPrefixer	adds prefixes (ex: :fullscreen becomes :moz-fullscreen)
csso	A CSS minifier
Watch	Watch, that actually is an endless stream
Plumber	Prevent pipe breaking caused by errors from gulp plugins
Clean	A gulp plugin for removing files and folders
gUtil	utilities to work with gulp
ImageMin	Minify PNG, JPEG, GIF and SVG images
PNGQuant	The pngquant utility as a readable/writable stream
Notify	gulp plugin to send messages based using the node-notifier
SpriteSmith	Convert images into spritesheets and coordinate maps
Strip CSS Comments	Strip comments from CSS
Merge Stream	Create a stream that emits events from multiple other streams

1. Install Node.js from NodeJS.org
2. Open up a command prompt.
   • Verify that node is install [node -v]
   • Install Gulp [$ npm install --global gulp]
   • Verify that Gulp is installed [gulp -v]
   • Navigate to the project folder
   • install the dependencies [npm install]

The Paths

In this section we are creating the paths that are used in the tasks.

var paths = {
  loc: {
      build:      './_01-build/',
      stage:      './_02-stage/',
      prod:       './_03-prod/'
  }
}

The plan is to make all of your changes in the paths.loc.build and then have those changes copied to paths.loc.stage and paths.loc.prod.

The Configuration

In this section we will define the necessary information regarding this project. Eventually, this will feed into a separate HTML file for a final checklist.

var config = {
  name:           'demo',
  instance:       'carbon',
  version:        '0.0.1',
  spr:            '000000',
  cmr:            'r11111',
  designer:       'Person One',
  developer:      'Person Two',
  analyst:        'Person Three',
  project:        'Person Four'
}

The Tasks

• gulp js
  check the javascript for errors, parse and beautify the scripts, concatenate the files into one file (name: (config.name).app.min.js), copy the file to paths.loc.stage and paths.loc.prod, and finally notify us that the task is done.
• gulp sprites
  check the paths.loc.build sprites folder for .png files. Then we tell the task what the final names of the PNG and CSS file will be named. Finally, we stream create the image and css files and put them in the paths.loc.build location
• gulp css
  first we will comb the file and make everything easy to read, next we concatenate the files into one file (name: (config.name).local.min.css), then we will minify that file, copy the file to paths.loc.stage and paths.loc.prod, and finally notify us that the task is done.
• gulp images
  Check the paths.loc.build images directory for all image types. Then minimize the images and finally output the minimized files to the paths.loc.stage and paths.loc.prod directories.
• gulp copyfonts
  Copy the entire paths.loc.build /fonts/ items to the paths.loc.stage and paths.loc.prod directories.
• gulp copybscss
  Copy the paths.loc.build /vendor/ Bootstrap CSS file to the paths.loc.stage and paths.loc.prod directories.
• gulp copybsjs
  Copy the paths.loc.build /vendor/ Bootstrap JS file to the paths.loc.stage and paths.loc.prod directories.
• gulp jquery
  Copy the paths.loc.build /vendor/ jQuery file to the paths.loc.stage and paths.loc.prod directories.