Simple gulpfile to livereload angular project (dev mode) and build for production

gulpfile.js

/* jshint node:true */
'use strict';

var gulp = require('gulp');
var argv = require('yargs').argv;
var $ = require('gulp-load-plugins')();
var angularTemplatecache = require('gulp-angular-templatecache');
var del = require('del');
var jshint = require('gulp-jshint');
var jscs = require('gulp-jscs');
var useref = require('gulp-useref');
var ngAnnotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var notify = require('gulp-notify');
var rename = require('gulp-rename');
var wiredep = require('wiredep').stream;
var gulpif = require('gulp-if');
var minifyHtml = require('gulp-minify-html');
var plumber = require('gulp-plumber');

var config = {js: 'app/controllers/*.js',images: 'app/img/*.*',html: 'app/templates/*.html'
}

gulp.task('connect', [], function() {
  var serveStatic = require('serve-static');
  var serveIndex = require('serve-index');
  var app = require('connect')()
    .use(require('connect-livereload')({port: 35729}))
    .use(serveStatic('app'))
    .use(serveIndex('app'));

  require('http').createServer(app)
    .listen(8000)
    .on('listening', function() {
    });
});

gulp.task('serve', [ 'connect','watch'], function() {
  if (argv.open) {
    require('opn')('http://localhost:8000');
  }
});


gulp.task('watch', ['connect'], function() {
  $.livereload.listen();
  //watch and compile templatecache file
  gulp.watch(
    'app/**/*.html',["templatecache"]
  ).on('change', $.livereload.changed);
  gulp.watch([
    'app/*.css',
    'app/Controller/*.js',
    'app/img/*','bower.json'
  ]).on('change', $.livereload.changed);

 
});

gulp.task('templatecache', function() {
  return gulp.src(config.html)
    .pipe(minifyHtml({empty: true}))
    .pipe(angularTemplatecache(
      'templates.js', {
        module: 'myAppModule',
        standAlone: false,
        root: 'templates/'
      }
    ))
    .pipe(gulp.dest('app/'));
});

//======================================build==================================

var dev = {
  js: 'app/Controller/*.js',
  img: 'app/img/*.*',
  html: 'app/Templates/*.html',
  temp: 'temp/'
//fonts: 'fonts/*.*'
  }

var dist = {
	path: 'dist/',
	img: 'img/',
  css:'style/',
  js:'js/'
	//fonts: 'fonts/'
}

gulp.task('clean', require('del').bind(null, ['dist']));

//========lint===============================
gulp.task('vet', function(){
  return gulp.src([
    dev.js
  ])
  .pipe(jshint())
  .pipe(jscs())
  .pipe(jshint.reporter('jshint-stylish'), {verbose: true})
  .pipe(jshint.reporter('fail'));
});

gulp.task('copy_img', [], function(){
  return gulp.src([dev.img])
    .pipe(gulp.dest(dist.path + dist.img));
});

gulp.task('templatecache', function() {
  return gulp.src(config.html)
    .pipe(minifyHtml({empty: true}))
    .pipe(angularTemplatecache(
      'templates.js', {
        module: 'corsiCTT',
        standAlone: false,
        root: 'Templates/'
      }
    ))
    .pipe(gulp.dest('app/'));
});

gulp.task('css-files', function () {
    var stream = gulp.src('./app/index.html')
        .pipe(useref()) //take a streem from index.html comment
        .pipe(gulpif('*.css', minifycss())) // if .css file, minify
        .pipe(gulpif('*.css', gulp.dest('./dist'))); // copy to dist
    return stream;
});

gulp.task('bower-files', function () {
    var stream = gulp.src('./app/index.html')
        .pipe(wiredep({
            directory: './app/bower_components' //inject dependencies
        }))
        .pipe(useref())
        .pipe(gulpif('*.js', ngAnnotate())) 
        .pipe(gulpif('*.js', uglify())) 
        .pipe(gulpif('*.js', gulp.dest('./dist'))); 
    return stream;
});

gulp.task('useref', [], function(){
  return gulp.src('app/index.html')
  .pipe(useref()).pipe(gulpif('*.js', uglify())) 
  .pipe(gulp.dest('dist'));
});

gulp.task('minifyjs', ['useref', 'templatecache'], function(){
  return gulp.src(['dist/js/main.js', 'app/templates.js'])
    .pipe(concat('main.js'))
    .pipe(ngAnnotate())
    .pipe(uglify())
    .pipe(gulp.dest('dist/'));
});

gulp.task('build', ['clean','css-files','useref', 'bower-files','copy_img'
,'minifyjs'], function(){

    
});

Add in the index.html:

1)for libraries (bower):

    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <!-- endbower -->
    <!-- endbuild -->

2)for css"

    <!-- build:css styles/main.css -->
    <!-- endbuild -->

3)for app .js

    <!-- build:js main.js -->
    <!-- endbuild -->