最近在學習angular做后臺管理項目，所以把記錄一下開發流程。

gulp --用來自動化構建項目
angular --搭建項目

components
組件



css
樣式



img
圖片



lib
依賴的框架（angular、Jq等都放在里面）



scripts
app.js(主要是路由配置)



index.html
首頁

    
        
        
        
        
        
    

    
        
這里是頭部
        
現在是{{pageName}}
        

            
index
            
第二頁
            
第三頁
        
        

            
        
    
    
    

"use strict";
var app = angular.module("app", [
    "ui.router",
    "controller",
    "directive",
    "services",
    "templates"
]).config(["$stateProvider", "$urlRouterProvider", function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider
    .otherwise(function(inject, location) {
        var path = location.$$path || "";
        return "/index";
    })
    $stateProvider.state("index", {
            url: "/index",
            controller: "indexCtr",
            templateUrl: "components/index/index.html"
    }).state("module2", {
            url: "/module2",
            controller: "module2Ctr",
            templateUrl: "components/module2/module2.html"
    }).state("module3", {
            url: "/module3",
            controller: "module3Ctr",
            templateUrl: "components/module3/module3.html"
    })

}]).run(["$rootScope", "$state", function(rootScope, state) {
    //初始化
}]);

angular.module("controller", []);
angular.module("directive", []);
angular.module("services", []);
angular.module("templates", []);

index.html

我是index.html

index.js

angular.module("controller")
    .controller("indexCtr", ["$scope", "$rootScope", "$http",  function($scope, $rootScope, $http) {
        var vm = $scope.vm = {};
        $rootScope.pageName = "index";
    }]);

{
  "name": "angular",
  "version": "1.0.0",
  "description": "angualr with gulp",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "gulp",
    "build": "gulp build"
  },
  "repository": {
    "type": "git",
    "url": "https://git.coding.net/mumofa/angular_Gulp.git"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.12.8",
    "chokidar": "^1.5.1",
    "del": "^2.2.0",
    "event-stream": "^3.3.2",
    "gulp": "^3.9.1",
    "gulp-angular-templatecache": "^1.8.0",
    "gulp-concat": "^2.6.0",
    "gulp-minify-css":"^1.2.4",
    "gulp-sass": "^2.3.1",
    "gulp-uglify": "^1.5.3"
  }
}

var gulp = require("gulp");
var concat = require("gulp-concat"); //合并文件
var minifycss = require("gulp-minify-css"); //壓縮css
var templateCache = require("gulp-angular-templatecache"); //壓縮 ng模板
var uglify = require("gulp-uglify"); // 壓縮 代碼
var es = require("event-stream"); // 事件插件
var del = require("del"); //刪除
var browserSync = require("browser-sync"); // 自動刷新
var chokidar = require("chokidar"); //監聽

//壓縮依賴的js代碼 
gulp.task("libScripts", function() {
    var scriptsGlob = ["app/lib/jQuery/*.js",
        "app/lib/bootstrap/*.js",
        "app/lib/angular/angular.min.js",
        "app/lib/**/*.js"
    ];
    return gulp.src(scriptsGlob)
        .pipe(uglify()) //壓縮 js代碼
        .pipe(concat("lib.min.js")) // 拼接成 一個js
        .pipe(gulp.dest("dist/js")) //輸出到指定目錄
});
//壓縮ng代碼
gulp.task("ngScripts", function() {
    var scriptsGlob = [
        "!app/lib/**/*.js",
        "app/scripts/app.js",
        "app/**/*.js"
    ];
    var tpl = gulp.src("app/**/*.html")
        .pipe(templateCache());

    /*return gulp.src(scriptsGlob)
        .pipe(uglify()) //壓縮 js代碼
        .pipe(concat("business.min.js")) // 拼接成 一個js
        .pipe(gulp.dest("dist/js")) //輸出到指定目錄*/
    return es.merge(es.merge(
                gulp.src(scriptsGlob),
                tpl
            )
//            .pipe(uglify())
//            .pipe(concat("business.min.js"))
            .pipe(concat("business.js")))
        .pipe(gulp.dest("dist/js"));
});
//輸出HTML
gulp.task("distHtml",function(){
    return gulp.src("app/index.html")
        .pipe(gulp.dest("dist"))
});
//壓縮css
gulp.task("minifyCss", function() {
    var cssSrc = [
        "app/css/bootstrap/**/*.css",
        "app/css/Font-Awesome/**/*.css",
        "app/css/system.css",
        "app/css/**/*.css"
    ];
    return gulp.src(cssSrc) //壓縮的文件
        .pipe(minifycss()) //執行壓縮
        .pipe(concat("all.min.css")) // 拼接成 一個js
        .pipe(gulp.dest("dist/css")); //輸出到指定目錄
});
//清空 輸出
gulp.task("clean", function(cb) {
    del(["dist"], cb);
});
//gulp運行的時候
gulp.task("default", ["init"]);
gulp.task("watch",["watch:css","watch:ng","watch:html"]);
gulp.task("init", ["libScripts","distHtml", "ngScripts", "minifyCss"]);

gulp.task("browser-sync", ["init","watch"], function() {
    browserSync.init({
        server: {
            baseDir: ["app"]
        },
        middleware: [function(req, res, next) {
            next();
        }],
        port: 80
    });
});

//監聽css
gulp.task("watch:css", function() {
    var cssSrc = [
        "app/css/bootstrap/**/*.css",
        "app/css/Font-Awesome/**/*.css",
        "app/css/system.css",
        "app/css/**/*.css"
    ];
    gulp.watch(cssSrc,["minifyCss"], browserSync.reload);
});
//監聽js和html模板
gulp.task("watch:ng", function() {
    var jsSrc = [
        "!app/lib/**/*.js",
        "app/scripts/app.js",
        "app/**/*.js"
    ];
    var tplSrc = "app/**/*.html";
    gulp.watch(jsSrc,["ngScripts"], browserSync.reload);
    gulp.watch(tplSrc,["ngScripts"], browserSync.reload);
});
//監聽html
gulp.task("watch:html", function() {
    var htmlSrc = ["app/index.html"];
    gulp.watch(htmlSrc,["distHtml"], browserSync.reload);
});

process.on("uncaughtException", function(e){console.log(e.stack)})

基本上按照上述流程，都可以正常開發項目了。