如何将HTML、CSS、JS内联到单文件？Liferay下models.ftl合并自动化

当然可以自动化完成这个合并过程，以下是几种实用的实现方式：

方案一：用Gradle构建脚本整合（适配Liferay官方构建流程） #

如果你的Liferay项目用Gradle管理，可以直接在build.gradle中添加自定义任务，实现构建时自动合并文件：

1. 首先在你的Index.ftl中预留占位符，方便后续替换：

<head>
    <!-- INLINE_CSS -->
    <!-- 其他头部内容 -->
</head>
<body>
    <!-- 原有HTML/Freemarker标签内容 -->
    
    <!-- INLINE_JS -->
</body>

2. 在build.gradle中添加合并任务：

task mergeFtlFiles {
    doLast {
        // 读取各文件内容
        def cssContent = file('src/main/resources/css/style.css').text
        def jsContent = file('src/main/resources/js/script.js').text
        def ftlTemplate = file('src/main/resources/Index.ftl').text
        
        // 替换占位符为内联代码
        def mergedContent = ftlTemplate
            .replace('<!-- INLINE_CSS -->', "<style>\n${cssContent}\n</style>")
            .replace('<!-- INLINE_JS -->', "<script>\n${jsContent}\n</script>")
        
        // 将合并后的文件输出到指定目录（比如Liferay的资源目录）
        def outputFile = file('build/resources/main/merged_Index.ftl')
        outputFile.parentFile.mkdirs()
        outputFile.write(mergedContent)
    }
}

// 让合并任务在项目构建前自动执行
build.dependsOn mergeFtlFiles

执行gradle build后，就会在指定路径生成包含内联CSS/JS的FTL文件。

方案二：用Node.js脚本快速实现 #

如果你更熟悉前端工具链，可以写一个简单的Node.js脚本完成合并：

1. 创建merge-ftl.js脚本：

const fs = require('fs');
const path = require('path');

// 配置文件路径
const paths = {
    css: path.join(__dirname, 'css/style.css'),
    js: path.join(__dirname, 'js/script.js'),
    ftl: path.join(__dirname, 'Index.ftl'),
    output: path.join(__dirname, 'merged_Index.ftl')
};

// 读取文件内容
const cssContent = fs.readFileSync(paths.css, 'utf8');
const jsContent = fs.readFileSync(paths.js, 'utf8');
let ftlContent = fs.readFileSync(paths.ftl, 'utf8');

// 替换占位符
ftlContent = ftlContent.replace('<!-- INLINE_CSS -->', `<style>\n${cssContent}\n</style>`);
ftlContent = ftlContent.replace('<!-- INLINE_JS -->', `<script>\n${jsContent}\n</script>`);

// 写入合并后的文件
fs.writeFileSync(paths.output, ftlContent);
console.log('FTL文件合并完成！');

2. 在package.json中添加执行脚本：

{
    "scripts": {
        "merge-ftl": "node merge-ftl.js"
    }
}

执行npm run merge-ftl即可快速生成合并后的FTL文件。

方案三：Freemarker运行时内联（备选方案） #

如果不需要预生成静态合并文件，也可以在FTL中直接用<#include>标签动态加载CSS/JS内容并内联：

<head>
    <style>
        <#include "/css/style.css">
    </style>
</head>
<body>
    <!-- 原有内容 -->
    <script>
        <#include "/js/script.js">
    </script>
</body>

注意：这个方式是运行时动态加载，不会生成单个合并文件，适合开发阶段快速调试，生产环境推荐用前两种预合并方案。

内容的提问来源于stack exchange，提问作者Evandro Motta