求指导编写Liferay6.2主题构建的Gradle/Gulp自动化脚本

我明白你现在的困境——Maven能顺利生成Liferay 6.2主题WAR，但Gradle+Gulp的组合一直掉链子。下面我会一步步帮你搭建起能完成theme-merge、build-css、build-thumbnail这几个核心目标的自动化脚本，适配_styled父主题和VM模板类型，基于你指定的portal-web-6.2.10.13.war。

1. 核心Gradle配置（build.gradle） #

首先，你的Gradle脚本需要引入Liferay主题插件，配置主题元数据，并且关联Gulp任务。这里是完整的配置示例：

plugins {
    id 'com.liferay.theme' version '2.0.0' // 适配Liferay 6.x的插件版本
    id 'com.moowork.node' version '1.3.1' // 用于调用Node.js和Gulp
}

// 配置Liferay主题插件
liferayTheme {
    parentThemeName = '_styled'
    themeType = 'vm'
    portalWar = file('path/to/portal-web-6.2.10.13.war') // 替换成你的实际文件路径
    outputDir = file('build')
}

// 配置Node插件，确保Gulp能正常调用
node {
    version = '14.18.1' // Liferay 6.2兼容的Node版本，避免使用过高版本
    npmVersion = '6.14.15'
    download = true // 本地无对应版本时自动下载
}

// 定义任务依赖链：按顺序执行构建步骤
tasks.war.dependsOn 'buildThumbnail'
tasks.buildThumbnail.dependsOn 'buildCss'
tasks.buildCss.dependsOn 'themeMerge'
tasks.themeMerge.dependsOn 'npmInstall' // 确保Gulp依赖已安装

// 将Gulp任务注册到Gradle
task buildCss(type: NodeTask) {
    script = file('node_modules/gulp/bin/gulp.js')
    args = ['build-css']
}

task buildThumbnail(type: NodeTask) {
    script = file('node_modules/gulp/bin/gulp.js')
    args = ['build-thumbnail']
}

关键配置说明： #

• 插件版本选择：com.liferay.theme用2.0.0是因为它适配Liferay 6.x系列；com.moowork.node选1.3.1是为了避免和新版本Node的兼容性问题。
• portalWar路径：必须填写正确的本地文件路径，Gradle需要读取这个WAR里的父主题资源来完成theme-merge操作。
• 任务依赖顺序：严格遵循theme-merge → build-css → build-thumbnail → war的流程，确保每个步骤的输出能被下一个步骤正确使用。

2. 配套的Gulp脚本（gulpfile.js） #

接下来，你的Gulp脚本需要实现build-css和build-thumbnail两个核心任务。这里是适配Liferay 6.2主题的示例：

var gulp = require('gulp');
var less = require('gulp-less'); // Liferay主题默认使用Less编写样式
var path = require('path');
var fs = require('fs');
var gm = require('gm'); // 用于生成缩略图，需先安装GraphicsMagick/ImageMagick

// 编译Less到CSS，对应build-css任务
gulp.task('build-css', function() {
    return gulp.src('src/main/webapp/css/custom.css') // 你的自定义Less/CSS入口文件
        .pipe(less({
            paths: [path.join(__dirname, 'src/main/webapp/css')]
        }))
        .pipe(gulp.dest('build/css')); // 输出到Gradle指定的outputDir目录下
});

// 生成主题缩略图，对应build-thumbnail任务
gulp.task('build-thumbnail', function(done) {
    // 原始缩略图路径（通常放在主题的images目录下）
    var thumbnailSrc = 'src/main/webapp/images/thumbnail.png';
    var thumbnailDest = 'build/images/thumbnail.png';

    if (fs.existsSync(thumbnailSrc)) {
        gm(thumbnailSrc)
            .resize(120, 90) // Liferay主题要求的缩略图尺寸
            .write(thumbnailDest, function(err) {
                if (err) console.error('生成缩略图失败:', err);
                done();
            });
    } else {
        console.warn('未找到原始缩略图文件，跳过缩略图生成步骤');
        done();
    }
});

依赖安装说明： #

在项目根目录执行以下命令，安装Gulp所需的依赖包：

npm install gulp gulp-less gm --save-dev

注意：gm依赖系统级的GraphicsMagick或ImageMagick工具，你需要先在本地安装这两个工具中的一个。

3. 常见失败原因排查 #

如果配置完成后构建仍然失败，可以从以下几个方向排查问题：

• Portal WAR路径错误：运行gradle themeMerge --info查看日志，确认是否提示找不到portal-web.war，或者无法解压父主题资源。
• Node版本不兼容：Liferay 6.2不支持Node 16及以上版本，使用配置中的14.x版本最为稳妥。
• Gulp任务报错：直接运行gulp build-css或gulp build-thumbnail，查看是否有样式编译错误或缩略图生成失败的具体提示。
• 权限问题：检查Gradle的build目录是否有写入权限，或者portal-web.war文件是否有读取权限。

最后，执行gradle war命令，就能自动完成所有构建步骤并生成最终的主题WAR包了。

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