這裡說一下angular程式碼配合gulp的打包流程，首先要下載gulp，使用npm全域性安裝。當然要配合node.js使用。

這裡說下打包的問題。

剛開始是打算將所有程式碼打包到一起，經過一番努力之後終於打包完成，但是我發現了一個嚴重的問題，那就是打包到一起的程式碼並不能很好的執行(頁面直接炸掉了)，後來找到了原因，是因為我把所有的html程式碼打包到一起之後破壞了原有Controller和congig中的引用路勁，所有導致了頁面的無法載入，這是必然結果。好吧，既然找到了原因，那就只有採用第二種方案了，那就只有分開打包了。

• 第一步：
  先將所有的js打包到一起，因為之前的寫法並沒有按照打包的要求來寫，所以在打包js的過程中其實也有一些困難(本來是打算改寫所有的js檔案)後來在廣大網友的幫助下找到了一款“神器”，（gulp-ng-annotate）主要就是用來解決程式碼壓縮中angular中依賴注入的問題，（通俗的將就是在打包過程中會將函式名或引數替換掉，而在angular中一旦引數被替換掉會報錯，所以才有了這個工具），寫到這裡我不禁要感嘆人類的偉大。呃…廢話有點多了，貌似，終於將js程式碼打包到了一起，經過初步執行，沒有問題。

• 第二步：
  接下來再打包css，一樣的結果，當所有的css程式碼打包到一起之後頁面混亂了，(可能是有變數名重複的情況出現吧)，同樣採用分開打包的方式將所有的css程式碼打包完成，初步執行，可以使用。

• 第三步：
  打包html程式碼，依然是分開打包，(中間也出了些小問題，最後檢查的結果是頁面中有的地方增加或減少了一個”號所致，所以說程式碼還是要寫規範的好啊)。

好接下來正式步入正題。

第一步：安裝node.js(自帶npm)，安裝完成後。

第二步：使用npm -v和node -v檢查是否有版本號出現，有的話證明安裝成功。

第三步：全域性安裝gulp，使用命令npm install gulp -g

全域性安裝。

第四步：在專案資料夾使用npm init建立package.json檔案用來記錄安裝檔案，方便團隊使用。

第五步:區域性安裝gulp，使用命令npm install gulp --save-dev。

第六步:安裝其它架包。

第七步:所有包都安裝完成後，新建gulpfile.js檔案。就可以寫打包程式碼了。

• 這裡是package.json檔案

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  }
 
,
  "repository": {
    "type": "git"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-clean-css": "^2.0.10",
    "gulp-concat": "^2.6.0",
    "gulp-css-spriter": "^0.3.3",
    "gulp-htmlmin": "^2.0.0",
    "gulp-imagemin": "^3.0.1",
    "gulp-jshint": "^2.0.1",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-ngmin": "^0.3.0",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-rev-append": "^0.1.6",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^1.5.4",
    "imagemin-pngcrush": "^5.0.0",
    "jshint": "^2.9.2"
  }
}

• 這裡是gulp.file檔案

var gulp = require("gulp"),//gulp基礎包
    rename = require("gulp-rename"),//重新命名
    uglify = require("gulp-uglify"),//壓縮js
    ngmin = require('gulp-ngmin'),//angular依賴
    ngAnnotate = require('gulp-ng-annotate'),//angular依賴
    minifycss = require("gulp-minify-css"),//壓縮css
    htmlmin = require('gulp-htmlmin'),//html壓縮
    imagemin = require('gulp-imagemin'),//圖片壓縮
    pngcrush = require('imagemin-pngcrush'),
    concat = require("gulp-concat"),//合併
    jshint = require('gulp-jshint'),//js檢測
    autoprefixer = require('gulp-autoprefixer'),//補充字首
    rev = require('gulp-rev-append'),//版本號自動更新
    notify = require('gulp-notify');//提示資訊


// 檢查js
gulp.task('jslint', function () {
return gulp.src('js/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(notify({message: 'jslint task ok'}));
});

//合併壓縮js程式碼
gulp.task('minifyjs', function () {
var jsOption = {
    compress: true//型別：Boolean 預設：true 是否完全壓縮
    // preserveComments: 'all' //保留所有註釋}//排除混淆關鍵字
};
return gulp.src(['js/**/*.js', 'js/*.js'])//這裡先壓其它js，最後再壓縮app.js避免注入時順序出錯
    .pipe(concat('all.js'))
    .pipe(ngAnnotate())
    .pipe(ngmin({dynamic: false}))
    .pipe(gulp.dest('dist/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
    .pipe(notify({message: 'js task ok'}));
});

//html壓縮
gulp.task('html', function () {
    var htmlOptions = {
        removeComments: true,//清除HTML註釋
        collapseWhitespace: true,//壓縮HTML
        collapseBooleanAttributes: true,//省略布林屬性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
        minifyJS: true,//壓縮頁面JS
        minifyCSS: true//壓縮頁面CSS
    };
    return gulp.src('templates/**/*.html')
        .pipe(rev())
        .pipe(htmlmin(htmlOptions))
        .pipe(gulp.dest('./dist/templates'))
        .pipe(notify({message: 'html task ok'}));
});


// 合併、壓縮、重新命名css
gulp.task('minifycss', function () {
    var cssOption = {
        advanced: false,//型別：Boolean 預設：true [是否開啟高階優化（合併選擇器等）]
        compatibility: '*',//保留ie7及以下相容寫法 型別：String 預設：''or'*' [啟用相容模式； 'ie7'：IE7相容模式，'ie8'：IE8相容模式，'*'：IE9+相容模式]
        keepBreaks: false,//型別：Boolean 預設：false [是否保留換行]
        keepSpecialComments: '*'
        //保留所有特殊字首 當你用autoprefixer生成的瀏覽器字首，如果不加這個引數，有可能將會刪除你的部分字首
    };
    return gulp.src(['css/**/*.css', 'css/*.css'])
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.0'],
            cascade: true, //是否美化屬性值 預設：true 像這樣：
            remove: true //是否去掉不必要的字首 預設：true
        }))
        //.pipe(concat('main.css'))
        //.pipe(gulp.dest('dist/css'))
        //.pipe(rename({suffix: '.min'}))
        .pipe(minifycss(cssOption))
        .pipe(gulp.dest('dist/css'))
        .pipe(notify({message: 'css task ok'}));
});

// 壓縮圖片
gulp.task('img', function () {
    var imgOption = {
        optimizationLevel: 5, //型別：Number  預設：3  取值範圍：0-7（優化等級）
        progressive: true, //型別：Boolean 預設：false 無失真壓縮jpg圖片
        interlaced: true, //型別：Boolean 預設：false 隔行掃描gif進行渲染
        multipass: true, //型別：Boolean 預設：false 多次優化svg直到完全優化
        svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox屬性
        use: [pngcrush()] //使用pngquant深度壓縮png圖片的imagemin外掛
    };
    return gulp.src('img/*')
        .pipe(imagemin(imgOption))
        .pipe(gulp.dest('dist/img'))
        .pipe(notify({message: 'img task ok'}));
});


// 預設任務
gulp.task('default', function () {
    gulp.run('minifyjs', 'minifycss', 'html', 'img');

    // 監聽html檔案變化
    gulp.watch('templates/**/*.html', function () {
        gulp.run('html');
    });

    // 監聽css檔案變化
    gulp.watch(['css/**/*.css']);

    // 監聽js檔案變化
    gulp.watch(['js/**/*.js', 'js/*.js']);

    // 監聽img檔案變化
    gulp.watch('img/*');

});