Robert Winterbottom @RWinter85
Aamir Suleman @iSpatial
Slides: http://bit.ly/1Fb5ZHk
Make JavaScript Lean, Mean, and Clean
Mesquite C
March 11th , 2:30pm
Overview
• Gulp
• RequireJS Optimizer
• Other considerations
Gulp
• Task Automation
• Simple and Efficient
Gulp – Common Uses
1. JSLint
2. Code Minification
3. Image Optimization
4. FTP
5. Watch files
Gulp – What is needed?
• Install NodeJS
• Install Gulp
• Get the Ingredients
gulp-* plugins
• Make the Recipe
gulpfile.js
Gulp - Plugin
Gulp – More Plugins
• gulp-concat
• gulp-autoprefixer
• gulp-minify-html
• gulp-imagemin
• gulp-uglify
• http://gulpjs.com/plugins/
Gulp - Chaining
development workflow
• Jade HTML
• Stylus CSS on edit
• JavaScript JSLint on edit
• Minify
• Port only require files (no jade, stylus, etc)
• FTP the build
build workflow
Demo : GulpJS
Build Option 2
• Concatenate JS files to a single file using
RequireJS Optimizer
RequireJS Optimizer
• Simple to use !!!
• Open source
• Optimize your AMD
modules
• Works easily with your
favorite task runner or
directly in node.js
What can the optimizer do for you?
• Make your app load faster
• require your css and have it
inlined into the bundle.
• Generate multiple bundles, or
layers, for single or multi page
applications, including shared
bundles.
• Minimize the number of http
requests made when your app
loads.
src version
built
version
src folder build folder
~ 20 items
~ 100 KB
~ 3 items
~ 44 KB
Getting Started
• Grunt
• npm install grunt-contrib-requirejs --save
• Gulp
• npm install gulp-requirejs --save
• Node.js
• npm install requirejs --save
Installation
Dependencies• node.js
• or Java (although I have not used this approach)
• or Browser (new way to generate bundles)
Simple example with Grunt
Simple example with Gulp
Build Profile
Build Profile Explained
• baseUrl - base directory for the project
• paths - these are the packages you configured in
dojoConfig or require config
• empty: - special reserved word for empty or CDN
modules, such as esri, dijit, dojo, etc.
• name - name of your entry file (minus the .js extension), this
is where the optimizer will start looking for dependencies
• out - Where to put the bundled file
Gotchas• plugins
• dojo/text!myTemplate.html
• CDN or empty resources
• must be specified as empty: in the build
profile
• Aliases
• full path specified in build profile, not
relative to packages.
• Example:
'MainModel': 'app/js/models/Main'
as opposed to:
'MainModel': 'models/Main'source: http://i.verylol.com/
Additional Considerations
• Gzip
• CloudFront, CloudFlare
• AppCache – several gotchas!
• Service Workers – coming soon…
Resources
• https://developers.arcgis.com/javascript/
• https://github.com/requirejs/example-multipage/
• http://requirejs.org
• https://github.com/requirejs/
• http://gruntjs.com/
• http://gulpjs.com/
Questions
Github Code example
http://bit.ly/1A6JXzR
http://bit.ly/1Fb5ZHk
• @RWinter85
• @iSpatial