we'll do this part together
- Clone this project
- Use NPM to install Gulp, and Bower
- bower needs to be installed globally:
npm install -g bower
we'll do this part together
- Initialize Bower:
bower init - Use Bower to install Bootstrap and jQuery
- Change the references to use the bower version in
index.html
<script src="../bower_components/...
our favorite part
karma init- Reference the
bower_componentsversions of the vendor files
- make sure the vendor files are the first files listed for karma and that jquery comes before bootstrap
karma start- Fix the inevitable errors
together
- Use Gulp to concat vendor js into one file
- use a list to handle the jquery/bootstrap dependency
- Use Gulp to run Karma
- Concat and Uglify JS
gulp-concat,gulp-uglify - Concat and minify CSS
gulp-concat,gulp-minify-css - Make sure the pipe'd operations are run asynchronously, using "streams",
return - Copy your index (and all other html files) into the dist folder
- Fix references in
index.htmlto point to the dist files
- in reference to where the
index.htmlwill be in thedistfolder
together
- Install
gulp-connect
var connect = require('gulp-connect');
- Add the following task, where "build" is the directory you put your distribution build into
gulp.task('connect', function(){
connect.server({
root: 'build',
livereload: true
});
});
You can now view your app at localhost:8080
do this on your own
- Watch all of your app's JS files and rebuild the app files when there's a change
- Watch all of your app's CSS files and rebuild the css files when there's a change
- Watch all of your app's HTML files and copy them to dist when there's a change
do this on your own
- Install angular with Bower
bower install angular - Add the following line to your app.js:
- `angular.module('myApp', []);
- Add the following attribute to the
<body>tag
<body ng-app="myApp">