intelliJでbuild Project時にwebpackのビルドも実行させてみた

intelliJのbuild / runアクションをgradleに委任

intelliJでgradleプロジェクトのビルド時にwebpackのビルドも実行したかったのでbuild.gradleにnpm installとnpm run build(webpack)を実行する処理をbuild.gradleに実装し、毎ビルド時にbuilde.gradleが読み込まれるように設定してみた。

環境・言語

• IDE
  • intelliJ idea 2018.3.4
• backend-framework
  • Spring boot 2
• backend-language
  • kotlin
• frontend-framework
  • vue.js
• frontend-language
  • html
  • css
  • javascript

gradleプロジェクト追加したファイル

• /package json

{
  "name": "hogehoge",
  "version": "1.0.0",
  "description": "hoge",
  "repository": {
    "type": "git",
    "url": "hogehoge.git"
  },
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "copy-webpack-plugin": "^5.0.0",
    "css-loader": "^2.1.1",
    "lite-server": "^2.4.0",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.7.0",
    "vue-style-loader": "^4.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "vue": "^2.6.8",
    "vue-router": "^3.0.2"
  },
  "scripts": {
    "build": "webpack",
  }
}

• /webpack.config.js

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
    mode: "development",
    entry: {
        console: path.join(__dirname, 'src', 'main', 'node', 'pages', 'console', 'main.js'),
    },
    output: {
        path: path.join(__dirname, 'src', 'main', 'resources', 'static', 'js'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {loader: 'css-loader', options: {url: false}},
                ]
            },
            {
                test: /\.vue$/,
                use: [{loader: 'vue-loader'}]
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.vue'],
        modules: [
            "node_modules"
        ],
        alias: {
            vue: 'vue/dist/vue.common.js'
        }
    },
    devtool: 'source-map',
    plugins: [
        new VueLoaderPlugin()
    ]
};

• /build.gradle

plugins {
    id 'org.springframework.boot' version '2.1.2.RELEASE'
    id 'org.jetbrains.kotlin.jvm' version '1.2.71'
    id 'org.jetbrains.kotlin.plugin.spring' version '1.2.71'
}

apply plugin: 'io.spring.dependency-management'

bootJar{
    archiveName "hogehoge.jar"
    launchScript()
}

group = 'test.hogehoge'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
    implementation 'org.springframework.boot:spring-boot-starter-security'
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'org.springframework.boot:spring-boot-starter-data-redis'
    implementation 'org.springframework.session:spring-session-data-redis'
    implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'com.fasterxml.jackson.module:jackson-module-kotlin'
    implementation 'org.jetbrains.kotlin:kotlin-reflect'
    implementation 'org.jetbrains.kotlin:kotlin-stdlib-jdk8'
    implementation 'org.mariadb.jdbc:mariadb-java-client:2.4.0'
    runtimeOnly 'org.springframework.boot:spring-boot-devtools'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
    testImplementation 'org.springframework.security:spring-security-test'
}

compileKotlin {
    kotlinOptions {
        freeCompilerArgs = ['-Xjsr305=strict']
        jvmTarget = '1.8'
    }
}

compileTestKotlin {
    kotlinOptions {
        freeCompilerArgs = ['-Xjsr305=strict']
        jvmTarget = '1.8'
    }
}

task npmRunBuild {
    doLast {
        def npm = System.getProperty('os.name').contains('Windows') ? 'cmd /c npm' : 'npm'
        if (file('./node_modules').exists() ==  false) {
            "${npm} install".execute().waitForProcessOutput(System.out, System.err)
        }
        "${npm} run build".execute().waitForProcessOutput(System.out, System.err)
    }
}
processResources.dependsOn npmRunBuild

動作確認

この状態でintelliJのBuild Project、もしくはRun Applicationを実行！
実行前には存在しなかった/node_modulesやpackage-lock.jsonが生成されました。

まとめ

vue.js側を更新した際にいちいち npm run build を実行しなければならないところをrunのみで、 全てbuildされて動作確認できるようになりました。