README

Garp Scaffold 的 Readme

这是一个用于启动 Garp 3 项目的脚手架。

入门指南

使用 Composer 创建 Garp3 脚手架项目

composer create-project grrr-amsterdam/garp3-scaffold <your-target-directory>

然后运行以下命令来更新/安装所有依赖项

composer update
npm install

创建一个指向 public 文件的 Apache vhost。这应该是任何 Garp 项目的首选 webroot。

构建资产

您可以通过运行以下命令开始前端构建和监控

gulp watch

或者通过以下方式

npm start

现在您应该能够访问 localhost:3000 并到达您的网站。

为不同环境构建资产

您可以通过运行以下任一命令生成不同环境的构建

gulp --e=[development/staging/production]

或

npm run build
npm run build:staging
npm run build:production

CSS

我们使用 Sass 进行 css 编译。然而，我们更喜欢尽可能接近纯 css。肯定要使用变量，但尽量限制对混入和循环的使用。另外，永远不要使用扩展。

我们还有更多关于编写 CSS 的约定。请 注意这些约定，它们有助于代码的一致性和可维护性。有关更多信息，请参阅 css 编码标准。

JavaScript

JavaScript 使用 Babel 从 ES6 转换为 ES5。我们还使用 Browserify 允许您导入模块。

首选 ES6 编写风格，因此请充分利用常量、箭头函数、模块、模板字符串等所有优点。

尽管如此，有些功能无法正确转换。确保您为这些功能加载适当的 Babel polyfills。您可以通过 仅包含所需的 polyfills。

Modernizr

我们使用 Modernizr 测试浏览器对某些功能的支持。然后我们可以使用渐进增强来利用这些功能为受支持的浏览器。在 JS 中使用 Modernizr.feature 或在 CSS 中使用 .feature-class .selector 将自动检测，Gulp 将确保包括适当的测试。

注意：当您使用 gulp watch 时，此检测不会运行，有关详细信息，请参阅下面的 gulp watch 任务。

使用 Gulp 构建

Gulp 是我们首选的任务运行器。它负责构建 CSS、编译 JavaScript 以及更多。

Gulp 从 app.ini 获取大部分配置值，例如放置构建文件的位置或要使用的 cdn。当您启动构建时，Gulp 将告诉您它使用哪些值。

尽管您可以从命令行运行所有 Gulp 任务，但实际上只有一小部分适合单独使用。以下是您可以运行的任务

构建

gulp

构建一切。默认为开发构建，使用 --e=[staging/production] 生成预发布或生产构建。

监控

gulp watch

运行构建并监控 CSS 和 JavaScript 文件中的文件更改，以及 application/modules 目录中的 php/phtml 文件。

BrowserSync

gulp watch 还会启动一个 BrowserSync 实例，该实例代理在 app.ini 中设置的域名。这个实例可以通过 localhost:3000 以及 localhost.example.com:3000 访问。

Browsersync 还很方便用于检查连接到同一本地网络的其他设备上的工作，例如手机。打开浏览器，将其指向 [本地IP地址]:3000 以访问本地机器上的网站。

生成 Modernizr 文件

gulp modernizr

Modernizr 在构建过程中运行，检查您的 CSS 和 JS，并包含适当的特性测试。这个解决方案的唯一缺点是 Modernizr 不考虑内联 CSS/JS。您需要显式地包含这些测试在 Gulp Modernizr 任务中。

此外，我们在监视时不重新运行 Modernizr，因此如果您在运行 gulp watch 时添加了一个测试，那么您可能需要手动运行 gulp modernizr 或重新启动该监视任务。

使用图标

您可以将所有 SVG 图标放在 public/css/img/icons 文件夹中，它们将自动转换为精灵。

在您的视图中，您可以通过 SVG 辅助工具渲染一个图标，如下所示，其中 [icon-name] 是从 SVG 文件名中获取的

$this->svg('[icon-name]')

给图标上色就像在 CSS 中使用 fill: #f00 一样简单。

注意 如果您的图标没有变色，最可能的原因是在您的 SVG 中有内联 fill 属性。在文本编辑器中打开 SVG，删除所有 fill 属性，以便可以通过 CSS 着色。

预加载网络字体

您的浏览器只会加载一次字体，当它下载了您的 CSS 并找到使用该字体的元素时。通过使用 <link rel="preload"> 语法，您可以让浏览器立即开始加载字体，从而加快渲染时间。请参阅 layout.phtml 以获取示例。