README

TYPO3的实时重新加载

此扩展将实时重新加载功能添加到您的TYPO3实例中。

安装

通过composer安装扩展

composer req --dev pnodev/livereload

注意我们使用Composer NPM bridge来自动安装运行livereload服务器所需的Node依赖项。首次运行时，它可能会要求您授权执行此操作。此外，还将执行一个npm postinstall 脚本来构建服务器。

包含TypoScript配置

扩展提供了一个TS常量，该常量指向一个JavaScript文件，该文件必须插入到前端才能使livereload工作。强烈建议仅在开发模式下包含此文件，并使用它时禁用缓存。

Constants.typoscript

@import 'EXT:livereload/Configuration/TypoScript/constants.typoscript'

Setup.typoscript

[applicationContext == "Development"]
   page.includeJS.livereload = {$tx_livereload.fe_bundle}
   config.no_cache = 1
[end]

创建您的配置

将config部分添加到您的站点包的package.json文件中（如果您使用Node处理CSS和JavaScript，您可能已经有一个package.json文件）。默认情况下，livereload将在当前工作目录中查找package.json文件。但您可以通过传递一个--config标志来将其指向不同的位置

node ./vendor/pnodev/livereload/live-reload.mjs --config ./path/to/package.json

在此处配置重新加载的规则。一个有效的条目包括要监视的路径或glob（相对于您的站点包）和配置对象。对于每个路径，您至少必须指定一个类型。目前有以下类型可用

类型	描述
重新加载	立即重新加载整个页面
流	流事件不会重新加载页面。相反，它只会将差异注入到当前文档中（类似于HMR）。您可以定义一个`files`数组，只刷新特定的文件（如链接的JS或CSS文件）。如果您未指定`files`，则整个新文档将与当前文档进行比较，只有更改的部分将被替换。

package.json

{
    "name": "@pnodev/site-package",
    "config": {
        "livereload": {
            "host": "127.0.0.1",
            "port": "1337",
            "resources": {
                "js": {
                    "path": "./Resources/Public/Dist/main.min.js",
                    "type": "reload"
                },
                "templates": {
                    "path": "./Resources/Private/{Layouts,Partials,Templates,ContentElements}/**/*.html",
                    "type": "stream"
                },
                "css": {
                    "path": "./Resources/Public/Dist/main.min.css",
                    "type": "stream",
                    "files": [
                        "main.min.css"
                    ]
                }
            }
        }
    }
}

用法

Livereload可以通过两种方式集成

通过监视配置中指定的文件来触发重新加载/流。
通过向livereload服务器发送请求来触发重新加载

第二个选项在需要其他进程先完成再查找更改时特别有用。为此提供一个方便的抽象可以通过添加npm脚本轻松实现

"scripts": {
  "reload": "curl -s https://:1337/reload"
}

此外，您还需要将启动livereload服务器的监视过程包含在您的构建设置中。以下是如何做到这一点的示例

{
   "name": "site_package",
   "scripts": {
      "watch": "node ../../vendor/pnodev/livereload/live-reload.mjs ../../../packages/site_package/livereload.config.mjs",
      "build:js": "esbuild ./Resources/Public/JavaScript/Src/main.js --outfile=./Resources/Public/JavaScript/main.js --bundle --minify --sourcemap",
      "build:css": "postcss ./Resources/Public/Css/tailwind.src.css -o ./Resources/Public/Css/main.css",
      "build": "yarn build:js && yarn build:css",
      "dev:css": "chokidar \"./Resources/Private/{Layouts,Partials,Templates}/**/*.html\" \"./tailwind.config.js\" -c \"yarn build\"",
      "dev:js": "yarn build:js --watch",
      "dev": "conc \"yarn build\" \"yarn dev:css\" \"yarn dev:js\" \"yarn watch\"",
      "reload": "curl -s https://:1337/reload",
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
      "autoprefixer": "^10.4.13",
      "chokidar-cli": "^3.0.0",
      "concurrently": "^7.6.0",
      "cssnano": "^5.1.14",
      "esbuild": "^0.15.15",
      "postcss": "^8.4.19",
      "postcss-cli": "^10.0.0",
      "tailwindcss": "^3.2.4"
   }
}

watch任务启动服务器并为其提供您的站点包中的配置文件。
dev任务使用conc并行启动构建CSS和JavaScript的进程，以及watch任务。

pnodev / livereload

维护者

详细信息