<div id="readability-page-1" class="page"><div>            <p data-ke-size="size16">어드민 프로젝트를 만들 때 spring project 내부에 static 위치에 front 관련 코드를 위치시켜서 화면과 api를 하나의 프로젝트에서 진행하는 경우가 있다. 이 경우 gradle를 통해서 npm build를 진행하게되는데 같이 개발을 진행하는 개발자들 로컬 node.js 버전과 서버 node.js 버전에 따라서 프론트에서 사용하는 일부 라이브러리등이 build시 지원되지 않는 경우가 있다.</p>

<p data-ke-size="size16">나같은 경우에는 서버는 node js버전이 12이었고 node-sass 버전을 4.x를 쓰고 있었다. 그러나 회사에서 제공하는 서버의 node 버전이 16으로 업그레이드 되면서 nodes-sass 6.x 이상으로 올려야했다. 근데 node-sass를 올릴 경우 사용되고 있는 script-ext-html-webpack-plugin이나 vue 2.x버전등이 지원을 하지 않아서 프로젝트 전반의 lib를 모두 업데이트 해야했다.&nbsp;</p>

<p data-ke-size="size16">해결책을 찾던 중 Gradle node.js plugin이 있어 적용해봤고 해결하게되어 나중에 다시 보기 위해 정리해봤다.</p>


<h4 data-ke-size="size20"><b>적용방법</b></h4>
<p data-ke-size="size16">해당 플러그인을 사용하게 되면 system에 grobal하게 설치되어있는 node.js버전을 사용하지 않고 기재한 node 버전을 .gradle 디렉토리에 다운로드 받고 그것을 사용하게 된다.</p>

<p data-ke-size="size16">build.gradle</p>
<pre id="code_1650680160815" data-ke-language="shell" data-ke-type="codeblock"><code>// 1
plugins {
	id "com.github.node-gradle.node" version "3.2.1"
	id "java"
}

apply plugin: 'com.github.node-gradle.node'



node {
	// 2
	version = '12.22.12'
	npmVersion = '6.14.16'
    
	// 3
	download = true

	// 4
	nodeProjectDir = file("${project.projectDir}/src/frontend")
}


// 5
task buildAdmin(type: NpmTask) {
    args = ['run', 'build']
}

processResources.dependsOn 'buildAdmin'</code></pre>
<p data-ke-size="size16">1) Gradle node js plugin을 사용하기 위해 PluginsDsl에 선언하고 가져온다.</p>
<p data-ke-size="size16">2) 사용하고자 하는 node와 npm버전을 명시한다.</p>
<p data-ke-size="size16">3) download가 true이면 위에 명시한 node js를 다운로드 받아서 사용하고 false인 경우 다운받지 않는다. (필히 true설정)</p>
<p data-ke-size="size16">4) npm run build를 실행할 프로젝트의 위치가 build.gradle위치와 다를 경우 projectDir기준 상대 경로를 작성해준다.</p>
<p data-ke-size="size16">5) gradle build실행 시 수행될 task를 명시해주는데 이때 NpmTask를 사용해야 node js plugin이 사용된다. commandLine등으로 npm run build를 수행할 경우 동작하지 않으니 주의해야한다.</p>


<p data-ke-size="size16"><a href="https://plugins.gradle.org/plugin/com.github.node-gradle.node" target="_blank" rel="noopener">https://plugins.gradle.org/plugin/com.github.node-gradle.node</a></p>
<p data-ke-size="size16"><a href="https://github.com/node-gradle/gradle-node-plugin" target="_blank" rel="noopener">https://github.com/node-gradle/gradle-node-plugin</a></p>            
</div></div>

wedul

어드민 프로젝트를 만들 때 spring project 내부에 static 위치에 front 관련 코드를 위치시켜서 화면과 api를 하나의 프로젝트에서 진행하는 경우가 있다. 이 경우 gradle를 통해서 npm build를 진행하게되는데 같이 개발을 진행하는 개발자들 로컬 node.js 버전과 서버 node.js 버전에 따라서 프론트에서 사용하는 일부 라이브러리등이 build시 지원되지 않는 경우가 있다.
 
나같은 경우에는 서버는 node js버전이 12이었고 node-sass 버전을 4.x를 쓰고 있었다. 그러나 회사에서 제공하는 서버의 node 버전이 16으로 업그레이드 되면서 nodes-sass 6.x 이상으로 올려야했다. 근데 node-sass를 올릴 경우 사용되고 있는 script-ext-html-webpack-plugin이나 vue 2.x버전등이 지원을 하지 않아서 프로젝트 전반의 lib를 모두 업데이트 해야했다. 
 
해결책을 찾던 중 Gradle node.js plugin이 있어 적용해봤고 해결하게되어 나중에 다시 보기 위해 정리해봤다.
 
 
적용방법
해당 플러그인을 사용하게 되면 system에 grobal하게 설치되어있는 node.js버전을 사용하지 않고 기재한 node 버전을 .gradle 디렉토리에 다운로드 받고 그것을 사용하게 된다.
 
build.gradle
// 1
plugins {
	id "com.github.node-gradle.node" version "3.2.1"
	id "java"
}
apply plugin: 'com.github.node-gradle.node'
node {
	// 2
	version = '12.22.12'
	npmVersion = '6.14.16'
    
	// 3
	download = true
	// 4
	nodeProjectDir = file("${project.projectDir}/src/frontend")
}
// 5
task buildAdmin(type: NpmTask) {
    args = ['run', 'build']
}
processResources.dependsOn 'buildAdmin'
1) Gradle node js plugin을 사용하기 위해 PluginsDsl에 선언하고 가져온다.
2) 사용하고자 하는 node와 npm버전을 명시한다.
3) download가 true이면 위에 명시한 node js를 다운로드 받아서 사용하고 false인 경우 다운받지 않는다. (필히 true설정)
4) npm run build를 실행할 프로젝트의 위치가 build.gradle위치와 다를 경우 projectDir기준 상대 경로를 작성해준다.
5) gradle build실행 시 수행될 task를 명시해주는데 이때 NpmTask를 사용해야 node js plugin이 사용된다. commandLine등으로 npm run build를 수행할 경우 동작하지 않으니 주의해야한다.
 
 
https://plugins.gradle.org/plugin/com.github.node-gradle.node
https://github.com/node-gradle/gradle-node-plugin

Gradle build 시 node js 버전을 지정하여 빌드하기

댓글