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);
});
引入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 作为模板引擎,可以根据自己的业务定制自己对应的开发环境,提高效率是咱们要去认真对待的事情。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。