ngBoilerplate &generator-angular
JS HCM Meetup – presented by Vincent De Smet
Why?
• Yeoman - Stamp out a skeleton for your app quickly
• Try: http://yeoman.io/codelab.html- very good intro!
Uses generator-angular
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
Yeoman
• Yo
• Grunt / Gulp
• Bower
Get started: Install the ngBoilerplate generator globally:
Using generator-ngbp.. Last updated on Aug, 28
Run generator of your choice
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!
Manage dev dependencies with npm
• Add grunt tasks with npm
**grunt-sass is a SASS compiler using libsass instead of compass (ruby gem)
Customize your task runner (Grunt)
• For example: to add sass compilation:1. Load the grunt-sass tasks:
2. Configure the grunt tasks initConfigngBoilerplate splits1. 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
Customize your task runner (Grunt) - 2
• In File configadd sass info
• In Task configconfigure grunt-sass task, multiple Task targets possible
Templates are expanded recursively
http://gruntjs.com/configuring-tasks#templates
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 Format2. Files Object Format3. Files Array Format
4. Older formats (won’t go into this)
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.
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
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
Grunt file: globbing patterns / +properties
• http://gruntjs.com/configuring-tasks#globbing-patterns
• http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically
Registering Tasks
• Alias Task
• Multi TaskRuns a plugin task taking into account the target, looks for configuration in config object.
• Basic/Custom TaskExample:
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)
generator-ngbp – interesting bits:
• Bower installed dependencies thus need to be added manually to:
Foundation5 / libsass tricky bits
• Where to get Foundation5 SASS files?
• Copy missing scss files from foundation libsass repoGet sass as developer dependency only!
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
Grunt tricks
• Could automatically load grunt tasks: https://github.com/sindresorhus/load-grunt-tasks
• Better to usehttps://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
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/
Generator explosion!
• http://www.dancancro.com/comparison-of-angularjs-application-starters/
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