Demo: http://tsaikd.github.io/angular-starter-kit
- Optimize HTML, Javascript, CSS, and AngularJS Template
- Develop in livereload
- Pure front-end web app
- Source web page can run without compile
.
├── /lib/ # 3rd-party libraries and utilities for web page
├── /node_modules/ # 3rd-party libraries and utilities for development
├── /public/ # The folder for compiled output
├── /src/ # The source code of the application
│ ├── /config/ # App config scripts
│ ├── /directive/ # AngularJS directives
│ ├── /route/ # angular-ui-router templates
│ ├── /service/ # AngularJS services
│ └── /angular-template.tmp.js # AngularJS template compiled temporary output
├── .bowerrc # Configuration file for bower
├── .gitignore # Configuration file for git
├── bower.json # Configuration file for bower
├── gulpfile.js # Configuration file for automated builds
├── index.html # First compiled web page
├── index.src.html # First web page source
└── package.json # The list of 3rd party libraries and utilities
Just fork the repo and start hacking:
git clone -o upstream https://github.com/tsaikd/angular-starter-kit.git MyApp
cd MyApp
npm install -g gulp # Install Gulp task runner globally
npm install -g bower # Install Bower binary globally
npm run init # Run init task, it will execute: npm install && bower install && gulp build
gulp build
- Just remove files you do not want to keep, e.g.
- src/
- index.src.html
gulp dev
- Open browser to http://localhost:9000/index.src.html if in development
- Open browser to http://localhost:9000/index.html if in deploy preview
- Use bower command to install new packages
bower install angular-material --save
- Add packages in all pages (e.g. index.src.html)
<!-- build:css public/index.min.css -->
+ <link rel="stylesheet" href="lib/angular-material/angular-material.css">
<link rel="stylesheet" href="src/route/index.css">
<!-- endbuild -->
<!-- build:js public/index.min.js -->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
+ <script src="lib/angular-material/angular-material.js"></script>
...
<!-- endbuild -->
- Remove associated code
- bower.json
- index.src.html
- and check all other web pages
- Remove files
- lib/angular-ui-router/
- src/route/
- src/config/route.js
- Rebuild with gulp
- Create web page source file
touch page2.src.html
- Add web page to gulpfile.js
// list all pages
pages = [
+ "page2",
"index"
];
- Rebuild with gulp
- WARNING git commit before updating
gulp up