Web project starter kit including tooling, best practices and project seed.
It is based on experience in large web projects, with architecture choices aiming for a clean, no-brainer development experience even for beginner teams.
- Install required tools
gulpandbower:
npm install -g gulp bower
- Install project tools, go to project folder:
npm install
- Launch development server:
gulp serve
gulp/ individual gulp tasks
sources/ project source code
|- data/ other project data, will be copied as-is
|- fonts/ project fonts
|- images/ project images
|- libraries/ Bower dependencies
|- main/ main module, for entry points and global style
| |- main.config.js app configuration code
| |- main.constants.js app configuration constants
| |- main.module.js app module definition
| |- main.routes.js app routes
| |- main.run.js app entry point
| |- main.wrappers.js AngularJS module wrappers for external libraries
| +- main.scss style entry point
|- modules/ project components and modules
| |- helpers/ helper services
| |- screens/ application screens
| |- shell/ application shell
| |- ui-components/ shared UI components
| |- web-services/ web services
| +- ... additional project modules
|- translations/ translations files
+- index.html html entry point
e2e/ end-to-end tests
dist/ compiled version
typings/ TypeScript definitions
reports/ test and coverage reports + generated documentation
gulpfile.config.js gulp tasks configuration
| Tasks | Description |
|---|---|
| default | run clean, then build |
| serve | Launch a web server with live reload and API proxy, then open app in browser. |
| serve:dist | Launch a web server using dist files. |
| build | Build and optimize the current project, ready for deployment. This includes linting as well as image, script, stylesheet and HTML optimization and minification. |
| clean | Delete temporary files and dist files. |
| test | Launch unit tests using karma and jasmine. |
| test:auto | Launch karma server and launch unit tests after each change in project files. |
| protractor | Launch e2e tests using protractor. |
| tsd | Download all TypeScript definitions for Bower dependencies. |
| docs | Generate jsdoc documentation from sources. |
- TypeScript, JavaScript
- Sass, CSS
- Jade, HTML
- Gettext (for translations)
- TSLint
- JSHint
- JSCS
- Unit tests (Jasmine)
- End-to-end tests (Protractor)
- Automation with gulp
- Development server with API proxy and live reload (BrowserSync)
- JSDoc generation with angular support
- JS+CSS+HTML bundling and minification (useref, uglify, minify-html, clean-css)
- CSS browser support (autoprefixer)
- Images optimization (imagemin)
- Automatic angular module annotation (ngAnnotate)
- Asset revisionning (rev)
See the wiki.
This starter kit is based on tooling from the gulp-angular Yeoman generator. Portions of project generator-gulp-angular are Copyright (c) 2014 Matthieu Lux & Mehdy Dara
The MIT License (MIT)
Copyright (c) 2015 Yohan Lasorsa
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.