we'll do this together
- Pull down this project
- Install gulp globally:
npm install -g gulp#PATH - Install gulp locally:
npm install gulp - Create a gulpfile.js in the root of this project
- Require Gulp:
var gulp = require('gulp'); - Create a new task, call it "copy":
gulp.task('copy', function(){ ... }); - Use
gulp.srcandpipetogulp.destto copy files fromjs/*.jstodist/
gulp.src('js/app/*.js').pipe(gulp.dest('dist/'));
we'll do this together
- Install jshinter
- require the
gulp-jshintmodule - Create a new "jshint" task
- Use
gulp.srcto get the src files - pipe that to
jshint() - pipe that to
jshint.reporter() - Install jshint-stylish
- Change the reporter to
jshint.reporter('jshint-stylish') - Add the new task to the
defaulttask - Run
gulp - Fix the errors
do this on your own
- Install concatenator
- require the
gulp-concatmodule - Create a new "buildApp" task
- Use
gulp.srcto get the src files - pipe that to
concat(app.js) - pipe that to
gulp.dest./dist - Check out the app.js file
- Now that you have this new file, reference that instead of the app files in index.html
do this on your own
- Install minifier
- require the
gulp-uglifymodule - Add the
uglify()function to the buildApppipes - Check out the app.js file
on your own
- Create a "buildVendor" task
- concat and uglify the files found in there
on your own
- Create a new "build" task `gulp.task('build', ['buildApp', 'buildVendor']);
- Add the build task to the default task
do this one on your own
- Install via npm:
karma,karma-jasmine,karma-phantomjs-launcherlocally - Add the following task
gulp.task('karma', function (done) {
new Server({
configFile: __dirname + '/karma.conf.js',
singleRun: true
}, done).start();
});
- Remove the singleRun line if you want it to run with autowatch
- See this for more information
on your own
- Create a new task "test" that will call both the jshint task and the karma task
we'll do this together
- Create a new task called "watch"
- Use
gulp.watch()to watch for changes to thejs/appfiles and run "test" and "build" when changed - Use it again to watch for changes to
js/testsand run "test" when changed