a quick overview of javascript task runners and scaffolding tools

1. ngBoilerplate &
generator-angular
JS HCM Meetup – presented by Vincent De Smet

2. Why?
• Yeoman - Stamp out a skeleton for your app quickly
• Try: http://yeoman.io/codelab.html
- very good intro!
Uses generator-angular

3. Why ngBoilerplate?
generator-angular
• Package by layer
• How to reuse?
• How to debug?
• Extensive sub-generators
• Configuration options
ngBoilerplate
• Package by module
• Lacks sub-generators
• Lacks configuration options

4. Yeoman
• Yo
• Grunt / Gulp
• Bower
Get started: Install the ngBoilerplate generator globally:
Using generator-ngbp.. Last updated on Aug, 28

5. Run generator of your choice

6. Use Bower package management
• Uninstall what your project does not allow:
• Install what your project requires:
*i.e.: Foundation5+libsass instead of bootstrap+less
**get sass as developer dependency only!

7. Manage dev dependencies with npm
• Add grunt tasks with npm
**grunt-sass is a SASS compiler using libsass instead of compass (ruby gem)

8. Customize your task runner (Grunt)
• For example: to add sass compilation:
1. Load the grunt-sass tasks:
2. Configure the grunt tasks initConfig
ngBoilerplate splits
1. File Config
(meta data for task config)
2. Task Config
& merges using lodash
3. Register Alias Task, Multi Task for task running goodness - or create your own custom task

9. Customize your task runner (Grunt) - 2
• In File config
add sass info
• In Task config
configure grunt-sass task,
multiple Task targets possible
Templates are expanded recursively
http://gruntjs.com/configuring-tasks#templates

10. Customize your task runner (Grunt) - 3
• A task config can have multiple targets,
if no target specified on run, all targets run
• A task exposes default options for configuration.
Options can be configured at different target level
• Most grunt tasks are file operations (source > destination),
declaration formats:
1. Compact Format
2. Files Object Format
3. Files Array Format
4. Older formats (won’t go into this)

11. Grunt File operations: Compact Format
• ngBoilerplate example:
Example:
This concat task – build_css target
1 source property ‘scr’
1 destination property ‘dest’
This format can only have 1 source-destination pair.

12. Grunt File operations: Files Object Format
• ngBoilerplate example:
Example:
This sass task – dist target
The property name ‘css/app.css’ is the destination
The property value ‘scss/app.scss’ is the source
This format can have multiple source – destination pairs

13. Grunt File operations: Files Array Notation
• ngBoilerplate example:
Example:
This copy task – build_app_assets target
Array of (src – dest) pairs +properties
This format can have multiple source – destination pairs
This format can also have additional properties per mapping

14. Grunt file: globbing patterns / +properties
• http://gruntjs.com/configuring-tasks#globbing-patterns
• http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically

15. Registering Tasks
• Alias Task
• Multi Task
Runs a plugin task taking into account the target, looks for configuration in
config object.
• Basic/Custom Task
Example:

16. generator-ngbp – interesting bits:
karmaconfig MultiTask :
automatically updates the karma config file with all dependencies required to run tests:
this.fileSrc http://gruntjs.com/api/inside-tasks#this.filessrc will contain all src files specified in the config object
properties for the karmaconfig multi-task
Grunt.file.copy http://gruntjs.com/api/grunt.file#grunt.file.copy with a processFunction to render the
karma-unit.tpl.js template (expanding all vendor_files.js specified in the grunt config)

17. generator-ngbp – interesting bits:
• Bower installed dependencies thus need to be added manually to:

18. Foundation5 / libsass tricky bits
• Where to get Foundation5 SASS files?
Get sass as developer dependency only!
• Copy missing scss files from foundation libsass repo

19. Foundation5 / libsass tricky bits
• _settings.scss partial still missing?
• Get it from Foundation5 / Compass ruby gem generated directory..
• Update imports
• Update gruntfile for Foundation5 sass files and replace recess task by
sass task in:
• concat:build_css
• Index:build & index:compile
• delta:sass
• build & compile alias tasks

20. Grunt tricks
• Could automatically load grunt tasks:
https://github.com/sindresorhus/load-grunt-tasks
• Better to use
https://github.com/shootaroo/jit-grunt for Just In Time loading of grunt
tasks
• Use https://github.com/sindresorhus/time-grunt to see the benefits
• https://github.com/tschaub/grunt-newer to run grunt with newer files only
• https://github.com/sindresorhus/grunt-concurrent to run tasks
concurrently
• Split grunt configuration files http://creynders.github.io/load-grunt-configs
• Have fun with github pages, https://github.com/tschaub/grunt-gh-pages

21. What’s next?
• Learn Gulp!
http://gulpjs.com/
Grunt is old… Gulp is all the rage now.
• Write your own Generator…
http://yeoman.io/authoring/

22. Generator explosion!
• http://www.dancancro.com/comparison-of-angularjs-application-starters/

23. About me
Author: Vincent De Smet
this presentation source code:
https://github.com/so0k/ngbp-foundation-libsass
• Presentation prepared for Javascript Ho Chi Minh City Meetup Group
You can find us at:
• http://www.meetup.com/JavaScript-Ho-Chi-Minh-City/
• https://www.facebook.com/JavaScriptHCMC
• https://plus.google.com/u/0/communities/116105314977285194967
• http://www.slideshare.net/JavascriptMeetup