使用 gradle 整合 vuejs 項目與 java 項目

使用 gradle 整合 vuejs 項目與 java 項目

先後端分離是個大趨勢了，用 vuejs 去作前端比起 jsp 方式或其它模板方式作起來方便多了，這種隔離更加完全。把後臺作成一個純 API 方式，只管理業務邏輯和數據，前端管 UI ，使用數據驅動的 mvvm vuejs 。

前端的測試也很是方便，在後臺尚未完成的狀況下，使用 vue-test-suit 作測試，後臺和前端、測試職責更加清楚，減小代碼互相打架的狀況。

編譯時整合 vuejs 和 java 的後端也很簡單，這裏介紹一下經過 gradle 進行整合的過程。

建立 vuejs 項目

安裝 vue-cli

npm install vue-cli -g

創建代碼框架

vue init webpack proj

引入 gradle node 插件

要給 vuejs 項目加個 gradle 的配置，用 gradle 調用 node 編譯項目

// build.gradle
plugins {
    id "com.github.node-gradle.node" version "1.3.0"
}

//調用npm run build命令的Gradle任務
task npmBuild(type: NpmTask, dependsOn: npmInstall) {
    inputs.files(fileTree('config'))
    inputs.files(fileTree('src'))
    inputs.files(fileTree('static'))
    inputs.files(fileTree('build'))
    inputs.file('package.json')
    inputs.file('package-lock.json')
    inputs.file('index.html')

    outputs.files(fileTree('dist'))

    group = 'node'
    args = ['run', 'build']
}

//調用npm run dev
task npmDev(type: NpmTask, dependsOn: npmInstall) {
    group = 'node'
    args = ['run', 'dev']
}

加了 gradle 配置後，就能夠在父項目上引入這個 vuejs 項目

// settings.gradle
inclue(':proj')
project(':proj').projectDir = new File(settingsDir, '../proj')

注意要修改項目名和路徑

後臺項目引入 vuejs 的編譯結果

在 java 後臺項目，引入 vuejs 的編譯任務和結果

// build.gradle
assemble.dependsOn project(':proj').getTasksByName('npmBuild', false)
processResources {
    from(project(':proj').file('dist').path) {
        into 'static'
    }
}

這裏把 vuejs 項目的項目的編譯結果（dist 目錄）直接在 processRessource 下降加入到 static 目錄，在 spring boot 裏面能直接識別出來，若是是本身須要修改目標目錄位置則要作相應的修改（如放到 resource 或 asset 目錄）

OK，如今在 java 後臺項目上運行 assemble 任務時，就能調用到 vuejs 項目的 npmBuild 任務，並把生成的 dist 目錄加到 java 後臺項目的編譯結果中，作 war 或 bootJar 生成的結果包含了前端生成的結果，能夠直接部署了。