NewDug2016
Presentation to 2016 NewDug Code Camp on March 12, 2016
##Setup##
- npm install
- bower install
Slides
PowerPoint slides from presentation
##Demos## Demo 1- Introduct the gulp.task API and run gulp taskTheFirst demonstrates a simple task
gulp taskTheSecond demonstrates injecting a task (first task) into another task (taskTheSecond)
Demo 2- Install your first gulp plugin. _npm install gulp-util --save_dev-- and then run the previous tasks, this time using the plugin, gulp utilTaskTheSecond
Demo 3- Introduce the gulpConfig.js file and run a task to show a value, gulp displayConfig
Demo 4- Introduce the gulp.src and gulp.dest APIs. Copy files from the src directory the dist directory. gulp moveStatic moves static HTML and JSON files
Demo 5- Introduce JSHint plugin and demo it catching an error by removing a semi-colon on a JS file. gulp jsValidate
Demo 6- Introduce the Gulp SASS plugin to compile SASS files to CSS. gulp sass
Demo 7- Introduce new copy functions to account for new CSS, etc. gulp moveStatic2
Demo 8- Introduce Gulp Watch API to setup a file watcher for SASS, HTML and JS files. gulp watchAll
Demo 9- Introduce Connect and Open plugins to create a dev server. gulp startDevServer
Demo 10- Introduce concatanation. gulp moveCss2
Demo 11- Introduce Yargs and Gulp-if plugins. Run gulp and gulp --prod to demonstrate
Plugins used
- gulp-util - Gulp Utilities, for example logging
- gulp-jshint - Gulp JsHint provides code anlaysis for Javascript
- gulp-sass - Gulp SASS plugin to compile SASS files to CSS
- gulp-connect - Gulp plugin to run a web server
- gulp-open - Opens a URL on a web server
- gulp-concat - Concatenates files together
- gulp-uglify - Uglifies Javascript files
- yargs - Provides command line arguments
- gulp-if - Provides if/then logic in Gulp files