配置

要配置前端构建过程以满足您的需求，您必须修改安装程序将放入您项目根目录中的 .sgc-config.json。

注意 在 SGC 1.2.0 之前，配置文件名为 config.json，位于 sgc-core/gulp 文件夹中。如果此文件仍然存在，sgc 将使用它而不是 .sgc-config.json。强烈建议使用 .sgc-config.json！

目录

包含 css、sass、javascript、images、sourcemaps 和 inline-svgs 的路径，相对于扩展根目录。

• webPath: 从网页中看到您的扩展文件夹的路径
• basePath: 从文件系统中看到您的扩展文件夹的路径

abovethefold

关键路径 css 的配置。

• template: src 模板的路径
• dest: 目标路径

js

SGC 将通过将其转换为符合 ECMAScript 6 规范的代码，支持您编写下一代 JavaScript 并在今天的浏览器中执行它。目前支持 ECMAScript 2021 语法和 TypeScript。

• compiler: es2021|typescript
• libraryPaths: 解析 CommonJS require 语句时应搜索的附加位置
• excludeFromQa: 不需要进行代码检查的 JavaScript 的位置的全局模式
• watcherEntryPoint: 当在 watchExtensions 中设置扩展更改时的编译入口点。示例：vendor/sgalinski/project-theme/Resources/Public/JavaScript/main.js

css

• watcherEntryPoint: 当在 watchExtensions 中设置扩展更改时的编译入口点。示例：vendor/sgalinski/project-theme/Resources/Public/Sass/main.scss

images

• optimize: 应优化用户上传的图像的位置

扩展

应包含在监视和构建任务中的扩展列表。请注意，此列表中的第一个扩展预期为您的 project_theme。

watchExtensions

当监视器运行时，触发主监视入口点的编译而不是扩展代码本身的扩展。仅在设置 watcherEntryPoint 时激活，如上所述。不影响构建过程。

示例

watchExtensions: [
    'project-theme',
    'project-base',
    'sg-account',
    'sg-teaser',
    'sg-forms',
    'sg-jobs',
    'sg-youtube',
    'sg-vimeo',
    'project-theme-megamenu',
    'sg-news',
    'sg-comments',
    'df-tabs'
]

browsersync

BrowserSync 是一个很棒的工具，它将在开发和测试过程中帮助您。当您运行 sgc 时，它将启动一个小型 Web 服务器，该服务器代理您在 .sgc-config.json 中指定的 URL。如果您更改监视列表（如上选项所示）中的扩展中的 JavaScript 或 Sass 文件，BrowserSync 将自动重新加载页面或将更改直接注入浏览器。您还可以在不同的浏览器窗口中打开 BrowserSync URL 的多个实例，BS 将负责在它们之间同步所有输入和滚动事件。

如果您在使用CSP时遇到错误，您必须在CSP头中的script-src部分添加nonce"nonce-browser-sync"。当您的实例不使用nonce时，可以通过添加带有值为true的disableNonce选项来禁用sgc的nonce特定行为。

SizeGuard

SizeGuard是一个纯视觉工具，用于通知您文件大小的更改。您可以通过sgc-config.json更改css和js更改的阈值。阈值必须以字节为单位定义。

{
    "sizeGuard": {
        "css": {
            "maxIncrease": 100
        },
        "js": {
            "maxIncrease": 500
        }
    }
}

要在控制台中禁用通知，请将以下配置添加到sgc-config.json中。

{
    "sizeGuard": {
        "enabled": false
    }
}

用法

您可以在特定组件上运行特定任务，或启动一个监视器，该监视器将在源文件更改时启动BrowserSync并运行任务。要监视的扩展名在项目的.sgc-config.json文件中定义。

如果您运行特定任务，您需要使用--ext参数指定任务要运行的扩展名。

sgc css --ext project_base

有几个可用的任务需要记住

默认/监视任务

sgc

启动一个全局监视器，当您更改任何.scss或.js文件时，将触发css/javascript任务，并在浏览器中打开网站，作为一个browsersync会话（重新编译时，更改的js和css将自动注入）。)

提示：如果您已经在浏览器中打开了browsersync实例，您可以通过传递参数-s来重新启动会话而无需打开浏览器。

要使扩展内的更改触发重新编译，请将它们添加到配置文件中的watchExtensions数组。

css:svg任务（将由css任务自动调用）

sgc css:svg --ext [extension name]

触发在给定目录内所有SVG的Sass-mixins的生成。每个mixin将启用使用相关SVG作为css背景图像。

@import 'svg'; // imports the file with the generated mixins (inside your Sass-root)

.icon-globe {
    @include inline-svg($icon-globe); // inserts the file icon-globe.svg as an inlined background-image
}

css:abovethefold（将由css任务自动调用）

svg css:abovethefold

此任务将读取您指定的abovethefold.template的html文件，读取其中的每个语句，并将其替换为引用文件包含的css样式，作为一个内联样式标签。要使用此功能，您应该在项目中创建一个单独的css文件（abovethefold.scss -> abovethefold.css），以及一个引用此样式表的html模板文件（注意，路径必须相对于模板文件）。然后，您可以将此模板文件设置为您的PageRenderTemplate。现在，您的abovethefold.css文件中的所有样式都将直接内联到您网站的HTML中。请注意，您应该只将此文件中的样式考虑在内，这些样式应在渲染过程之后在每个页面上直接可用。

css任务

sgc css --ext [extension name]

在给定目录内触发css编译。注意，在启动此任务之前，此任务还将运行sprite任务。

假设

• 所有scss文件都在相对于给定路径的sass目录中。
• 所有css文件都放入相对于给定路径的stylesheets目录中。

images任务

sgc images --ext [extension name]

优化给定路径的所有图像。

假设

• 所有图像都在相对于给定路径的image目录中。

优化fileadmin和uploads中的图像

sgc images:uploaded

此任务优化sgc-config.json文件中指定的文件夹内的所有图像（png、jpg、gif、svg）。您可能希望定期运行此任务以压缩用户上传的媒体。

通过您自己的模块扩展sgc

您可以通过编写自己的模块轻松扩展sgc功能。只需在sgc-core旁边创建一个sgc-scripts文件夹，并将您的自定义脚本放在那里。目前仅支持shell脚本，其他语言可能在将来支持。

通过调用sgc来执行您的自定义脚本

+ sgc-core
+ sgc-scripts
    - updateInstance.sh
    - updateDeployData.sh

sgc updateInstance

故障排除

自动完成不起作用

为了使自动完成功能正常工作，您的shell需要了解SGC自动完成文件的位置。根据您的操作系统，您可以在以下位置找到它：/etc/bash_completion.d/sgc（Linux），或者/usr/local/etc/bash_completion.d/sgc（macOS）。通常，您的shell会自动读取此文件。如果自动完成功能仍然无法正常工作，很可能是因为某种原因它没有读取。要修复它，您可以将它简单地包含到您的.bashrc文件中

source /usr/local/etc/bash_completion.d/sgc
[or]
source /etc/bash_completion.d/sgc

我已经将代码添加到我的.bashrc文件中，但自动完成功能仍然没有工作

在某些macOS安装中，bash在启动时不会读取.bashrc文件。要修复此问题，您可以在~/.bash_profile文件内部source该文件

source ~/.bashrc

如何配置您的.stylelint规则？

在您的根目录中添加一个名为.stylelintrc的文件，并包含以下内容。您可以根据需要交换规则文件。

{
	"extends": "./sgc-core/stylelint-rules"
}

在使用观察器URL时，TYPO3 Fluid模板文件始终被缓存

如果您在使用观察器时遇到此问题，例如在https://localhost:3000/，请在一个单独的选项卡中登录到TYPO3后端https://localhost:3000/typo3/（可以忽略Invalid referrer for /main错误信息）。

这样，sgc-config.json中设置的URL参数实际上应该可以正常工作

示例

    "browsersync": {
        "url": "<your-dev-domain>",
        "urlparams": "no_cache=1&disableScriptmerger=1"
    },

这意味着您可以通过运行https://localhost:3000/并查看<your-dev-domain>?no_cache=1&disableScriptmerger=1的结果。