Angular boilerplate generator
Download as PPTX, PDF1 like1,038 views
This document discusses Yeoman generators for AngularJS applications, comparing ngBoilerplate and generator-angular. It provides instructions for setting up a project with ngBoilerplate, customizing Grunt tasks, installing dependencies with Bower, and tips for using Foundation with Sass. The presenter encourages learning Gulp and writing custom generators.
Angular boilerplate generator
- 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
Editor's Notes
- #2: I’m not affiliated with yeoman, bower, grunt, zurb/foundation5 and all images belong to these companies and were blatantly ripped from their website
- #4: https://github.com/yeoman/generator-angular/issues/109 The organization by module was a requirement for the project – other generators / templates to consider: https://github.com/CleverStack/frontend-example-module/blob/master/module.js https://github.com/willogden/angular-acorn https://github.com/henyojess/generator-gulp-ng https://github.com/CleverStack/angular-seed https://github.com/pbojinov/generator-gulp-angular-less
- #5: Yo sets up the skeleton, can conditionally generate Grunt & Bower configurations Grunt is a build system that can perform simple tasks similar to make/bundle/.. But extension modules provide a lot more powerful workflow. Grunt is heavily file based and goals are reached through task configuration. Since January 2014, Gulp has gained a lot of popularity due to it’s more intuitive stream oriented approach of tasks (without the need of intermediary files) However, Gulp & Grunt do not have to be exclusive: https://github.com/gratimax/gulp-grunt Bower is a package manager used for dependency management on the front end. (todo: better understand relationship between bower and browserify)
- #6: https://github.com/thardy/generator-ngbp/commit/3f20f66c76781b978734c7500790edbe47060642
- #10: See grunt tricks on automatically loading all tasks or loading JIT
- #23: http://www.100percentjs.com/just-like-grunt-gulp-browserify-now/ https://github.com/yeoman/yeoman/issues/1232 https://www.npmjs.org/package/grunt-browserify-bower https://www.youtube.com/channel/UCm9iiIfgmVODUJxINecHQkA http://mindthecode.com/lets-build-an-angularjs-app-with-browserify-and-gulp/ http://mindthecode.com/writing-browserify-modules-for-your-angular-app/ Learn Browserify! http://browserify.org/articles.html
- #24: There are simply too many generators to keep track off. Every few months a new technology appears and in my opinion it’s impossible to expect 1 generator that caters for all possible combinations. It’s a matter of finding the best tool for the job and mastering the tools you need.