Angular.js项目中使用gulp实现自动化构建以及压缩打包详解

npm init
//生成package.json
{
 "name": "leason",
 "version": "1.0.0",
 "description": "test for angular and gulp and unit testing",
 "main": "gulpfile.js",
 "dependencies": {
 },
 "devDependencies": {
 },
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "repository": {

 },
 "keywords": [
 "leason"
 ],
 "author": "leason",
 "license": "ISC",
 "bugs": {
 },
}

npm install xxx --save  //保存到dependencies（生产）
npm install xxx --save-dev //保存到devDependencies（开发）

npm install //安装package中所有模块

npm install gulp-jshint --save-dev

//代码语法检查命令--gulp jshint
var jshint = require('gulp-jshint'); //代码检查
gulp.task('jshint', function () {
 return gulp.src(paths.js)
 .pipe(jshint())
 .pipe(jshint.reporter('default'));
});

npm install gulp-angular-templatecache --save-dev

//合并html模板命令--gulp template
var templateCache = require('gulp-angular-templatecache');
gulp.task('template', function () {
 return gulp.src(['./templates/**/*.html','./templates/*.html'])
 .pipe(templateCache({module: 'templates'}))
 .pipe(gulp.dest('./js'))
});

npm install gulp-cssmin --save-dev

//合并压缩css命令--gulp deployCSS
var cssmin = require('gulp-cssmin');
gulp.task('deployCSS', function() {
 return gulp.src(paths.css)
 .pipe(cssmin())
 .pipe(concat('all.css'))
 .pipe(gulp.dest('./build'));
});

npm install gulp-uglify --save-dev  //压缩
npm install gulp-concat --save-dev  //合并
npm install gulp-sourcemapsy --save-dev //处理 JavaScript 时生成 SourceMap
npm install gulp-strip-debug --save-dev //去除打印

//测试生产两种js压缩命令--生产gulp js --prod测试gulp js --dev
gulp.task('js', function(type) {
 console.log(type);
 if (type == 'dev') { // dev
 return gulp.src(paths.js)
  .pipe(concat('all.js'))
  .pipe(gulp.dest('./build'));
 } else { // prod
 return gulp.src(paths.js)
  .pipe(sourcemaps.init())
  .pipe(stripDebug())
  .pipe(uglify())
  .pipe(concat('all.min.js'))
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('./build'));
 }
});

npm install gulp-inject --save-dev

//dev资源引用命令--gulp devIndex
gulp.task('devIndex', ['clean', 'jshint'], function () {
 // It's not necessary to read the files (will speed up things), we're only after their paths:
 return gulp.src('./index.html')
 .pipe(inject(gulp.src(paths.js, {read: false}), {relative: true}))
 .pipe(inject(gulp.src(paths.css, {read: false}), {relative: true}))
 // .pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower', relative: true}))
 .pipe(gulp.dest('./'));
});

//生产环境资源引用命令--gulp deployIndex
gulp.task('deployIndex', ['clean', 'jshint', 'template', 'js', 'deployCSS'], function () {
 // It's not necessary to read the files (will speed up things), we're only after their paths:
 return gulp.src('./index.html')
 .pipe(inject(gulp.src(paths.buildjs, {read: false}), {relative: true}))
 .pipe(inject(gulp.src(paths.buildcss, {read: false}), {relative: true}))
 // .pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower', relative: true}))
 .pipe(gulp.dest('./'));
});

angularApp.config(['$routeProvider','$stateProvider','$urlRouterProvider',function($routeProvider,$stateProvider,$urlRouterProvider) {
 $stateProvider
 .state('sidebar', {
  url: '/sidebar',
  // abstract: true,
  templateUrl: 'templates/sidebar.html',
  controller: 'sidebarCtrl'
 })
 $urlRouterProvider.otherwise('/sidebar/tab1');
}]);