This is just a first pass at deploying NodeJS and Gulp for performance enhancements and frontend efficiency
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 |
- Install Node.js from NodeJS.org
- 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]
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.
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' }
- 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 topaths.loc.stage
andpaths.loc.prod
, and finally notify us that the task is done. - gulp sprites
check thepaths.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 thepaths.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 topaths.loc.stage
andpaths.loc.prod
, and finally notify us that the task is done. - gulp images
Check thepaths.loc.build
images directory for all image types. Then minimize the images and finally output the minimized files to thepaths.loc.stage
andpaths.loc.prod
directories. - gulp copyfonts
Copy the entirepaths.loc.build
/fonts/ items to thepaths.loc.stage
andpaths.loc.prod
directories. - gulp copybscss
Copy thepaths.loc.build
/vendor/ Bootstrap CSS file to thepaths.loc.stage
andpaths.loc.prod
directories. - gulp copybsjs
Copy thepaths.loc.build
/vendor/ Bootstrap JS file to thepaths.loc.stage
andpaths.loc.prod
directories. - gulp jquery
Copy thepaths.loc.build
/vendor/ jQuery file to thepaths.loc.stage
andpaths.loc.prod
directories.