摘要：默認使用的是，因此從前端來說，和是可以整合的，而且并且試驗過，和整合也是前后端開發一個不錯的方案。前后端分離一直都是個梗，還是以團隊利益最大化考慮。當前端調整模板的時候，完全可以按照后端的變量分配方式進行處理。配合可謂是一個非常高效的方式。

FastD 默認使用的是 twig，因此從前端來說，twigjs 和 fastd是可以整合的，而且并且試驗過，twigjs和 fastd 整合也是前后端開發一個不錯的方案。

安裝 gulp: npm install gulp --save

安裝 gulp-twig: npm install gulp-twig --save

文檔地址: gulp-twig

可選安裝: npm install [options] --save

FastD: 2.0.x-dev

新建 gulpfile.js，編寫內容:

"use strict";
var gulp = require("gulp"),
    bundles = require("./bundles.json"),
    twig = require("gulp-twig"),
    tasks = (function (bundles) {
        var tasks = [];
        for (var i in bundles) {
            tasks.push(bundles[i].name);
        }
        return tasks;
    })(bundles)
    ;

var resources = "./resources";

// todo. waiting...

/**
 * Task list.
 * */
gulp.task("default", tasks, function () {
    console.log("Tasks: " + tasks.join(","));
    console.log("Register bundles length: " + bundles.length);
});

引入gulp，基礎的處理，如果沒有接觸過 npm(Node Package Manager) 和 gulp 的同學，可能要去學習下咯: npm gulp

這里的 require 當中有一個 bundles.json 配置文件，是因為 FastD 和 Symfony 一樣，模塊需要注冊，因此在開發環境中也需要配置相對應的配置文件，現在新建文件: bundles.json。文件中的所有模塊按照 app/application 的 registerBundles 里面注冊的模塊。

bundles.json:

[
    {
        "name": "welcome",
        "path": "./src/Index/Resources",
        "data": {
            "title": "test title"
        }
    }
]

每個 bundle 均已一個對象存在，json 你懂的。其中 name 表示模塊名，path 表示模塊資源所在地址，data 是根據 twig 模板中所需的 "變量"，也就是 {{ 變量名 }} 中所需要的變量。

再看看 gulpfile 文件，因為 FastD 中模板引擎實現兩個預定義函數，所以在配置環境的時候也需要統一處理，函數分別為: url(name, args, format), asset(name, version)，分別表示生成 url 地址，生成資源鏈接地址(link, script等資源地址)。

所以 gulpfile 也需要定義此函數，實現的內容根據自己喜好調整:

var functions = [
    {
        "name": "asset",
        func: function (args) {
            return args; // todo
        }
    },
    {
        "name": "url",
        func: function (args) {
            return args; // todo
        }
    }
];

回頭看看上面的配置，因為 bundles 是以一個數組的形式組成，所以我們的配置需要根據動態注冊的 bundle 進行處理，不應該手動一個一個去操作，因為開發效率問題以及一些靈活性的問題。

循環每個 bundle 進行動態讀取配置:

/**
 * Register bundles.
 * */
bundles.forEach(function (bundle) {
    module.exports = function (gulp, twig, bundle) {
        var view = bundle.path + "/views";
        var asset = bundle.path + "/assets";
        var watch = bundle.name  + ".watch";
        gulp.task(watch , function() {
            console.log(bundle.name.replace(/(w)/,function(v){return v.toUpperCase()}) + "Bundle: task running......");
            var tpl = gulp.src(view + "/**/*.twig")
                .pipe(twig({
                    base: view,
                    data: bundle.data,
                    functions: functions
                }))
                // output html
                .pipe(gulp.dest(resources + "/" + bundle.name + "/views"))
                ;
            var js = gulp.src(asset + "/**/*.js")
                .pipe(gulp.dest(resources + "/" + bundle.name + "/js"))
                ;
            var css = gulp.src(asset + "/**/*.css")
                .pipe(gulp.dest(resources + "/" + bundle.name + "/css"))
                ;
        });

        gulp.task(bundle.name, [watch], function () {
            gulp.watch(view + "/**/*.twig", [watch]);
            gulp.watch(asset + "/**/*.css", [watch]);
            gulp.watch(asset + "/**/*.js",  [watch]);
        });
    }(gulp, twig, bundle);
});

以上是完整配置，包括監聽文件，此處監聽文件變化動態生成文件。

生成規則，存放在 ./resources 下，按照模塊名分開， js, css, views 目錄分開，如果存在圖片，也是按照 images 區分，自行配制即可，如此類推。

配置已經完成，新增:

bundles.json
gulpfile.js

正是編碼之前哆嗦幾句，我們總說前后端分離，前后端分離，前后端分離，我也不知道前后端應該怎么分離，前后端為什么要分離。實際上很多人都想分離分離分離，但是想想，分離之后真的有你想象的那么好嗎？我看其不然，技術本身是相輔相成的東西，其實分離了之后，雖然說負責的東西和處理的東西單一了，但是在很多時候，這并不利于一個團隊以及一個項目的發展，因為這從一定基礎上隔閡了大家。

我更推薦是精通一種并且懂得與其他的技術交互，這并不是分離，而是更好地將自己熟悉的東西融合到其他技術當中，并且更好地與其他技術一起工作。

前后端分離一直都是個梗，還是以團隊利益最大化考慮。

通過以上配置，前端現在只需要關注自己的代碼，結構與后端一致即可，有變動需要同步到 git 并且與后端溝通

前端編寫的 twig 代碼存放在 {Bundle}/Resources/views & {Bundle}/Resources/assets，輸出通過 gulpfile 控制，環境，數據由自己控制，擺脫后端的依賴。

當前端調整模板的時候，完全可以按照后端的變量分配方式進行處理。并且后端可以很好地兼容和操作 twig 模板。后端也可以很好地處理 twig 模板。配合 git 可謂是一個非常高效的方式。

通過以上配置，后端現在只需要關注自己的代碼，結構與前端一致即可，有變動需要同步到 git 并且與前端溝通

后端現在就可以完全不用理會前端干啥了，完全可以做自己做的工作了，當前端有變動的時候，你可以第一時間看到變化的情況，而且發現有操作不當或者需要調整的地方，可以直接調整修改，前端進行代碼同步。

邏輯處理，動態變量分配都可以自由控制。

其實為啥這樣做？原理很簡單，雙方的工作應該自己都要清楚，但是雙方之間的工作對接也更應該統一并且易于處理，也就是說，中間的那一層應該是大家都能操作，并且雙方都作為監督者，一方面可以提高效率，另一方面可以提高項目、團隊之間的溝通，還可以提高默契。

所以我覺得這是一個值得嘗試的方案。

如果你的工作中有使用用 twig 作為模板引擎，可以根據自己的業務定制自己對應的開發環境，提高效率是咱們要去認真對待的事情。