Fast 框架與前端整合方案

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

gulp

安裝 gulp: npm install gulp --save

guip-twig

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

文檔地址: gulp-twig

其他: less, compass(由前端決定)

可選安裝: 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);
});</pre>
 引入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"
 }

}
]</pre>
 每個 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
 }

}
];</pre>
 回頭看看上面的配置，因為 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);
});</pre>
以上是完整配置，包括監聽文件，此處監聽文件變化動態生成文件。
 生成規則，存放在 ./resources 下，按照模塊名分開， js , css , views 目錄分開，如果存在圖片，也是按照 images 區分，自行配制即可，如此類推。 
配置已經完成，新增:
 bundles.json 

gulpfile.js 
正式編碼
正是編碼之前哆嗦幾句，我們總說前后端分離，前后端分離，前后端分離，我也不知道前后端應該怎么分離，前后端為什么要分離。實際上很多人都想分離分離分離，但是想想，分離之后真的有你想象的那么好嗎？我看其不然，技術本身是相輔相成的東西，其實分離了之后，雖然說負責的東西和處理的東西單一了，但是在很多時候，這并不利于一個團隊以及一個項目的發展，因為這從一定基礎上隔閡了大家。
我更推薦是精通一種并且懂得與其他的技術交互，這并不是分離，而是更好地將自己熟悉的東西融合到其他技術當中，并且更好地與其他技術一起工作。
前后端分離一直都是個梗，還是以團隊利益最大化考慮。
前端
通過以上配置，前端現在只需要關注自己的代碼，結構與后端一致即可，有變動需要同步到 git 并且與后端溝通
 前端編寫的 twig 代碼存放在 {Bundle}/Resources/views & {Bundle}/Resources/assets ，輸出通過 gulpfile 控制，環境，數據由自己控制，擺脫后端的依賴。 
當前端調整模板的時候，完全可以按照后端的變量分配方式進行處理。并且后端可以很好地兼容和操作 twig 模板。后端也可以很好地處理 twig 模板。配合 git 可謂是一個非常高效的方式。
后端
通過以上配置，后端現在只需要關注自己的代碼，結構與前端一致即可，有變動需要同步到 git 并且與前端溝通
后端現在就可以完全不用理會前端干啥了，完全可以做自己做的工作了，當前端有變動的時候，你可以第一時間看到變化的情況，而且發現有操作不當或者需要調整的地方，可以直接調整修改，前端進行代碼同步。
邏輯處理，動態變量分配都可以自由控制。
總結
其實為啥這樣做？原理很簡單，雙方的工作應該自己都要清楚，但是雙方之間的工作對接也更應該統一并且易于處理，也就是說，中間的那一層應該是大家都能操作，并且雙方都作為監督者，一方面可以提高效率，另一方面可以提高項目、團隊之間的溝通，還可以提高默契。
所以我覺得這是一個值得嘗試的方案。
如果你的工作中有使用用 twig 作為模板引擎，可以根據自己的業務定制自己對應的開發環境，提高效率是咱們要去認真對待的事情。
</div>