README

这是我的大多数项目的起点。它主要是为我自己的个人使用而创建的，可能对其他人有用，也可能没有，但欢迎您使用它、分叉它或忽略它。

用法

设置环境

首先，您需要安装 Docker for Mac 或 Windows 版本。默认设置应该足够好，但您也可以随意探索并调整一些设置。

开发服务器和所有构建命令都在 Docker 中运行，因此您不需要在开发计算机上运行 Node、PHP 或 MySQL（反之，如果您安装了任何错误的版本，也不会造成任何损害）。

要开始，请在项目文件夹中运行以下命令来完成设置

./run init

安装与管理依赖项

我们使用 Yarn 进行前端依赖管理，您可以通过以下方式访问

./run yarn add flickity
./run yarn remove flickity

如果您手动修改了 package.json（或 composer.json），则需要运行 ./run update。

开始开发！

要启动本地服务器并开始监视文件更改，请运行

./run start
./run watch

在终端中将显示查看您网站的 Web 地址。由于它使用 Browsersync & xip.io，您可以在连接到您本地网络的任何设备上打开此链接，使移动测试变得容易。

您可以使用类似于 Sequel Pro 的应用程序连接到数据库。请使用以下设置

Host:     127.0.0.1
Username: app
Password: 123
Database: app

当天工作完成后，使用以下命令关闭服务器

./run stop

项目结构

dist/public # This will be your webroot
  - assets
    - css     # The compiled CSS files
    - images  # Optimized image files
    - fonts   # Locally-hosted webfont files
    - js      # Concatenated Javascript files
src
  - fonts     # Any webfont files here will be copied verbatim to the dist folder
  - images    # Unoptimized image files, as exported from Photoshop, etc.
  - scripts   # All custom scripts for the theme
    - components  # Individual components providing site-specific functionality
    - plugins     # Self-contained generic plugins (not site-specific)
  - static    # Favicons, touch icons, etc
  - styles    # CSS source files
  - templates # HTML/PHP/Twig templates

前端构建流程

具体说明

大多数特定项目的构建配置都可以在 package.json 文件中完成。

CSS

我们对编译的 CSS 文件运行 Autoprefixer，以便尽可能添加额外的浏览器支持。

脚本

任何 ES2015 功能都将转换为它们的 ES5 等价物。请使用 ES2015 风格的模块导入。