摘要：為了動態(tài)插入新加的和文件且添加的文件有一定順序，安裝系列包。具體參見至此已經(jīng)可以在本地愉快的開發(fā)了。配置編譯任務(wù)開發(fā)完成以后代碼需要上線，繼續(xù)創(chuàng)建一些。有時間會加入校驗添加，添加等等。。。

mkdir angular-gulp-seed

npm init

+src
    +app            // 業(yè)務(wù)模塊
        -app.js    // 應(yīng)用入口
        +demo   // 業(yè)務(wù)模塊目錄，所有子模塊均遵循此目錄
            - module.js      // 模塊聲明文件
            - controller.js  // vm層
            - index.html     // 主入口模板
            - router.js      // 模塊路由文件
            - style.css      // 模塊樣式
        +home
    +assets            // 靜態(tài)資源目錄
        -images
        -css
    +common            // 公共服務(wù)
    +components    // 公共組件
    +scripts         // gulp腳本
        - gulp.build.js   // build任務(wù)
        - gulp.common.js  // dev,build公共任務(wù)
        - gulp.config.js  // 基礎(chǔ)配置
        - gulp.dev.js     // dev任務(wù)
    index.html  // 主頁面

package.json

1. 安裝gulp

npm install  gulp -D

2. 新建gulpfile文件，安裝browser-sync包，配置第一個任務(wù)

var browserSync = require("browser-sync");
gulp.task("browserSync", function () {
    browserSync({
        server: {
            baseDir: "./",
            index: "src/index.html"
        }
    });
});
gulp.task("default", ["browserSync"]);
// 執(zhí)行g(shù)ulp命令，瀏覽器啟動，可以看到大致頁面結(jié)構(gòu)

更多browser-sync的信息：http://www.browsersync.cn/。

3. 為了動態(tài)插入新加的js和css文件,且添加的文件有一定順序，安裝gulp系列包。  

npm install gulp-watch gulp-inject gulp-order -D

4. 新建一個gulp.config.js文件,配置一些基本文件路徑和順序

module.exports = function () {

    var src = "./src/";
    var build = "./dist/";

    var config = {
        src: src,
        build: build,
        index: src + "index.html",
        css: [src + "**/*.css"],
        appJs: [src + "app/**/*.js"],
        commonJs: [src + "common/**/*.js"],
        componentJs: [src + "components/**/*.js"],
        jsOrder: [
            "**/app.js",    // 項目主入口
            "**/app.*.js",  // 主入口相應(yīng)配置
            "**/module.js", // 模塊聲明
            "**/router.js", // 模塊路由
            "**/index.js",  // 組件、resource入口
            "**/*.js"       // 其他
        ],
        cssOrder: [
            "**/app.css",       // 項目主模塊
            "**/*.module.css",  // 業(yè)務(wù)子模塊
            "**/*.css"          // 其他
        ]
    }
    return config;
}();

5. 使用gulp-inject動態(tài)插入css和js  

js任務(wù)編寫

var config = require("./gulp.conf.js");
gulp.task("inject", function() {

    var js = gulp.src(config.js, {read: false}).pipe(order(config.jsOrder));
    var css = gulp.src(config.css, {read: false}).pipe(order(config.cssOrder));

    return gulp
        .src(config.index)
        .pipe(inject(js, {addPrefix: "../src", relative: true}))
        .pipe(inject(css, {addPrefix: "../src", relative: true}))
        .pipe(gulp.dest(config.src))
        .pipe(browserSync.reload({stream: true}));
});

頁面添加inject標(biāo)識

添加到default任務(wù)中

gulp.task("default", ["inject", "browserSync"]);

執(zhí)行g(shù)ulp命令，可看到如圖頁面效果,同時index.html頁面內(nèi)容發(fā)生變化

6. 開發(fā)過程中會不斷添加新的css和js文件，為了優(yōu)化開發(fā)體驗，引入gulp-watch包添加watch任務(wù)，當(dāng)js和css文件發(fā)生變化的時候，去執(zhí)行inject任務(wù)

var watch = require("gulp-watch");
gulp.task("watch", function() {
    watch("src/**/*.js", function() {
        gulp.run("inject");
    });
    watch("src/**/*.css", function() {
        gulp.run("inject");
    });
});
gulp.task("default", ["inject", "browserSync", "watch"]);

1. 安裝angular相關(guān)包

npm install  angular angular-ui-router --save

2. 由于代碼量過大，不貼出具體參見src/spp下面代碼實現(xiàn)

src/index.html

src/app.js 項目主入口

src/app.router.js 項目路由配置

為了前端保持獨立，使用express搭建一個mock服務(wù)，然后我們就能愉快的開始開發(fā)了。

1. 首先安裝依賴包：

npm install express body-parser json-server http-proxy-middleware -D

2. 創(chuàng)建server.js，內(nèi)容如下：

var jsonServer = require("json-server");
var server = jsonServer.create();
var middlewares = jsonServer.defaults();
var bodyParser = require("body-parser");
var mockRouter = require("./mock/index");

// 添加默認(rèn)的中間件 logger, static, cors and no-cache
server.use(middlewares);

// 解析 body
server.use(bodyParser.json());
server.use(bodyParser.urlencoded({
    extended: false
}));

server.use(mockRouter);

server.listen(4000, function() {
    console.log("God bless me no bug, http://localhost:4000");
});

3. mock文件夾下創(chuàng)建index.js,內(nèi)容如下：

var fs = require("fs");
var express = require ("express");
var router = express.Router();

fs.readdirSync("mock").forEach(function(route) {
    if (route.indexOf("index") === -1) {
        require("./" + route)(router);
    }
});

module.exports = router;

4. 引入angular-resource.js，使用$resource服務(wù)

npm install angular-resource --save

在common/resource/創(chuàng)建一個utils,具體文件為resourceUtils，為所有請求添加統(tǒng)一前綴

(function() {
    angular
        .module("app.resource")
        .factory("resourceUtils", resourceUtils)
        .factory("webResource", webResource);

    resourceUtils.$inject = ["$resource"];

    function resourceUtils($resource) {
        return function(apiPrefix) {
            return function(url, params, actions) {
                return $resource(apiPrefix + url, params, actions);
            };
        };
    }

    webResource.$inject = ["resourceUtils"];
    function webResource(resourceUtils) {
        // 其中***為后端服務(wù)的統(tǒng)一前綴
        return resourceUtils("/***/"); 
    }

})();

關(guān)于$resource服務(wù)的使用，請參考這篇文章。https://silence717.github.io/2016/09/28/creating-crud-app-minutes-angulars-resource/

5. 在gulpfile.js中統(tǒng)一配置代理，并且修改browserSync任務(wù)：

// 引入http-proxy-middleware
var proxyMiddleware = require("http-proxy-middleware");

// 配置代理路徑,是否為本地mock
var isLocal = true;
var target = "";

if (isLocal) {
    target = "http://localhost:4000";
} else {
    // API address
}
// browserSync任務(wù)添加代理
gulp.task("browserSync", function() {
    var middleware = proxyMiddleware(["/***/"], {target: target, changeOrigin: true});
    browserSync({
        server: {
            baseDir: "./",
            index: "src/index.html",
            middleware: middleware
        }
    });
});

6. 你可能需要添加一些公共的interceptor去處理后端返回的數(shù)據(jù)或者請求出錯的統(tǒng)一處理。具體參見[https://docs.angularjs.org/api/ng/service/$http](https://docs.angularjs.org/api/ng/service/$http).  

至此已經(jīng)可以在本地愉快的開發(fā)了。

開發(fā)完成以后代碼需要build上線，繼續(xù)創(chuàng)建一些task。

1. 安裝相關(guān)依賴包

npm install gulp-angular-templatecache gulp-minify-css gulp-if gulp-useref gulp-uglify gulp-replace -D

2. 配置build任務(wù)，具體在scripts/gulp.build.js文件中.

3. 頁面html遇到build的地方配置

 ...
 
 
 
 
 
 ...

var gulp = require("gulp");
var del = require("del");
var runSequence = require("run-sequence");
var config = require("./scripts/gulp.conf.js");
var buildTask = require("./scripts/gulp.build.js");
var devTask = require("./scripts/gulp.dev.js");
var commonTask = require("./scripts/gulp.common.js");

// 動態(tài)添加css和js到index.html
gulp.task("inject", function() {
    commonTask.inject();
});
// 添加監(jiān)聽任務(wù)
gulp.task("watch", function() {
    devTask.watch();
});
// 使用browerSync啟動瀏覽器
gulp.task("browserSync", function() {
    devTask.browserSync();
});
// 清除dist文件
gulp.task("clean", function() {
    del(config.build);
});
// 打包組件模板
gulp.task("build:components-templates", function() {
    buildTask.componentsTemplate();
});
// 打包業(yè)務(wù)模板
gulp.task("build:app-templates", function () {
    buildTask.appTemplate();
});
// build index文件
gulp.task("build", ["build:components-templates", "build:app-templates"], function() {
    buildTask.buildIndex();
});
// 本地開發(fā)
gulp.task("default", ["inject", "browserSync", "watch"]);
// 線上環(huán)境打包
gulp.task("dist", ["clean"], function() {
    runSequence("inject", "build");
});

"scripts": {
    "start": "concurrently "gulp" "node server.js""
  }

執(zhí)行npm start即可本地啟動項目

上線合并代碼的時候執(zhí)行gulp dist命令即可

拖延癥晚期，終于寫完了。有時間會加入eslint校驗,添加md5，添加sass等等。。。需要做的還有很多，看心情吧！