README

此仓库包含一个使用Vite、SASS、Twig构建的前端模板。它包含一些预制的混入、配置好的SVG-Sprite设置和一些图像优化功能。它还包括一些出色的性能增强工具：Purge & Critical CSS。

需求

node : >=16
yarn（或等效）

安装

可以使用composer安装

$ composer create-project justdev/starter_frontend_twig "name"

或者从项目文件夹中安装标准版

$ yarn install

配置

根据您的需求编辑config.js。

环境

rootDir：指定项目的根目录（您的index.html文件所在的位置）。指定的路径可以是绝对路径，也可以是相对于config.js文件位置的相对路径。
buildDir：指定输出目录（相对于项目的根目录）。

Purge CSS

purgecss:
- enable：布尔值，切换以激活或停用Purge CSS。
- safeList：可选，一个要添加到safelist中的类数组。安全列表指定了在最终CSS中可以保留的选择器。

Critical CSS

critical:
- enable：布尔值，切换以激活或停用Critical CSS。

图像

imagemin：一个包含所有图像优化配置的对象。有关更多信息，请参阅vite-plugin-imagemin

HTML压缩

htmlMinify:
- enable：布尔值，切换以激活或停用HTML压缩（使用Terser）。
- options：有关整体配置选项的详细信息，请参阅html-minifier-terser。

HTML美化

htmlBeautify:
- enable：布尔值，切换以激活或停用HTML压缩（使用Terser）。
- options：有关整体配置选项的详细信息，请参阅

开发

图像

图像文件位于src/assets/images/目录下。您可以使用以下命令将所有.png和.jpg图像转换为WebP格式

$ yarn webp

简单图像示例

# image.src: path to your image (required)
# image.ext: image source extension (required)
# pictureClass: Class attribute for the picture element
# image.src_2x: path to the retina version of your image
# image.webp: set webp to true if you want to use your webp image converted

{% set img = {
	pictureClass: 'picture',
	image: {
		src: 'logo',
		src_2x: 'logo@2x',
		ext: 'png',
		webp: true,
		alt: 'Hero logo'
	},
} %}

{{ image(img) }}

字体

字体文件位于src/assets/fonts/目录下

图标

图标文件位于src/assets/icons目录下，它们用于创建svg sprite。请随意使用图标twig模板作为参考，它位于

# iconID is the name of your svg file (required)

{{ sprite('iconID') }}

懒加载

vanilla-lazyload用于懒加载图像和背景图像。只需在图像元素上添加lazy属性，并对背景图像添加data-bg="path/to/your/background"。

Twig

Twig文件位于src/assets/templates目录下。对于twig模块或组件，请使用_前缀来避免HTML转换。

构建资源

开发

使用先前定义的设置启动本地开发服务器，默认为https://:8000/

$ yarn dev

生产

构建所有生产资源

$ yarn build

预览您的生产构建

$ yarn preview

justdev / starter_frontend_twig

维护者

详细信息