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