README

这是一个使用 Gulp 任务和监视器将 PSD 转换为 HTML 的 gulp 任务集和监视器（基于 Silex 框架）。

目标

此构建的主要目标是创建与 Symfony 最快的 HTML 集成。通过使用 Symfony 方法、Twig 模板引擎和漂亮的 Gulp 打包器来减少替换和编辑模板的时间。

安装

1. 创建 Silex 应用程序

您可以使用 Composer 来简化新项目的创建

$ composer create-project glavweb/silex-standard path/to/install "~0.1"

Composer 将在 path/to/install 目录下创建一个新的 Silex 项目。

1. 配置项目

您需要创建 parameter.php 文件。为此，您可以将 parameter.php.dist 文件克隆到 parameter.php，并将参数 host_url 更改为您的站点主机

$parameters['host_url'] = 'http://YOUR_SITE_HOST.com';

1. 安装 node 模块

npm install

1. 安装 bower

如果之前未安装 bower，请运行以下命令

npm install -g bower

安装依赖库

bower install

1. 安装 Gulp

如果之前未安装 Gulp，请运行以下命令

npm install -g gulp

1. 运行 Gulp

运行命令

gulp 

项目结构

有三个主要目录： web、app 和 src。下面是对每个目录的描述

Web

Web 目录包含所有项目静态文件和项目的入口点

• web\app.php - 项目的生产入口点；
• web\app_dev.php - 项目的开发者入口点；
• web\components - bower 组件；
• web\css - CSS 文件；
• web\js - JS 文件；
• web\images|web\videos - 所有视频和图像资产；
• web\fonts - 所有字体；
• web\plugins - 所有自定义供应商；
• web\static\*.html - 编译后的 HTML 文件。

App

标记文件夹包含配置和模板

• app\Application.php - 项目的入口控制器；
• app\config\config.php – 项目的默认配置；
• app\config\config_dev.php – 项目的开发者配置；
• app\config\config_prod.php – 项目的生产配置；
• app\config\parameter.php.dist – 占位符参数（仅用于复制）；
• app\config\parameter.php – 项目的参数；
• app\Resources\fixtures – 保持 fixture 文件；
• app\Resources\less - 保持 less 资源；
• app\Resources\views - 保持模板文件；

Src

src 目录包含扩展项目逻辑的脚本。

• src\Controller - 保持控制器文件（视图的配置）；
• src\Twig - 保持用于扩展模板逻辑的 Twig 扩展文件。

它使用流行的编程模式 - 模型-视图-控制器。

Fixtures - 包含项目实例的占位符。

例如：菜单实例如下

$fixture['menu'] = [
    'class' => [
        'fields' => [
            ['name' => 'name', 'type' => 'string'],
            ['name' => 'link', 'type' => 'string'],
        ]
    ],
    'instances' => [
        [
            'name' => 'Main',
            'link' =>  '#home'
        ],
        ...
    ]
];

视图 - 包含 HTML 模板。

HTML 模板的基 Twig 模板引擎是 Symfony 默认使用的。完整文档在此 Twig/doc

我们为每个页面创建一个基础模板，其中包含通常的页眉和页脚。我们称之为 base.html.twig (.html 后缀不是必需的，但对于将集成到 Symfony 的项目是必需的)。基础模板位于每个模板的根目录，是后续页面的骨架。

对于在多个页面使用的公共块，我们在 app/Resources/views/common 文件夹中创建。通过 include 标签插入这些块。例如

{% include 'common/navbar.html.twig' %}

重要：文件夹路径是相对于根模板文件夹 app/Resources/views 确定的。

{% include 'common/test.html.twig' %}

所有外部文件都通过 asset 函数包含，该函数生成正确的资源路径。

<link rel="stylesheet" href="{{ asset('components/bootstrap/dist/css/bootstrap.min.css') }}">
<script src="{{ asset('components/jquery/dist/jquery.min.js') }}"></script>
<script src="{{ asset('components/bootstrap/dist/js/bootstrap.min.js') }}"></script>

控制器 - 包含模板的配置。

例如 Default 控制器中的 Person 动作

/**
 * Person show page
 */
$controllers->get('/person', function (Application $app) {
    return $app['twig']->render('pages/person.html.twig', [
        'name' => 'John Doe',
        'phone' => '+7 123 123 1234'
    ]);
})->bind('person_show');

'/person' - 定义页面的 URL。 'person_show' - "bind" 方法允许通过动作名称获取页面 URL。例如

<a href="{{ path('person_show') }}">Person show page</a>

'pages/person.html.twig' - 这里定义 twig 模板的路径。

您还可以为您的 twig 模板传递一些变量

'name' => 'John Doe',
'phone' => '+7 123 123 1234'

Gulp

Gulp 包含所有打包任务和监视器。所有任务都易于理解

• css - 所有编译 CSS 的任务；
• html - 所有编译 HTML 模板的任务；
• generator - 所有生成代码的任务；
• images - 所有编译图像的任务；
• js - 所有编译 JavaScript 的任务；
• serve - 所有编译开发模式的任务。

生成静态 HTML 页面

您可以通过运行命令生成静态 HTML 页面：

php bin/console generate:static-pages

将生成的页面放在 web/static 文件夹中。