Veeva_CLM Boilerplate 소스코드 주소 ↓↓
yohanpro CLM boilerplate
Gulp 3.9버전 설치
npm install gulp@3.9.1 --save를 해준다.
gulp4버전을 쓰지 않는 이유는 4버전과 3버전은 달라지는 부분이 많기 때문이다.
4버전도 써봤지만 내가 느끼기엔 task로 명확히 쪼개는 3버전이 더 직관적이고 이해가 잘간다.
취향차이다.
프로젝트 최종결과물 예상하기
아래와 같이 설정하고 gulp build 명령어를 치면 dist 폴더에 프레젠테이션을 포함한 디렉토리가 생성된다.
{
"presentation": "NesinaAct_SC_01-2019-first",
"numberOfSlide": 7,
"ProductName": "NesinaAct",
"DirectoryOfPresentation": "NesinaAct-sc01-2019"
}이 dist폴더에는 shared 슬라이드, 7개의 메인 슬라이드와 PI, REF를 포함한 슬라이드가 생성된다.
즉 7개로 설정하면 총 10개의 서브디렉토리가 생성된다.
이는 제약회사의 특성으로 보통 Product Information과 Reference가 따로 들어가는 경우가 많기 때문에, 아예 필수로 만들어지도록 설정했다.
또한 .gitignore과 README, 디렉토리가 설정된 sh파일(슬라이드를 각각 압축, 각각의 슬라이드에 thumb.png생성하는 역할)
그리고 마지막으로 csv를 추출하기 위한 vault.numbers가 생성된다.(Vault클라우드에 올릴때 필요하다.)
Gulp 모듈화 시키기
gulpfile.js에 모든 task들을 작성할 수 도 있지만,
유지보수의 측면과 가독성 측면에서 쪼갰다. gulpfile.js의 코드이다.
gulpfile.js에는 공통으로 들어가는 Directory의 경로를 module.exports로 설정해주었다.
const { presentation, ProductName, numberOfSlide, DirectoryOfPresentation
} = require("./config.json"); //setting에서 값 받아옴.
const baseDir = \_\_dirname; //기본 디렉토리 path는 node에서 제공하는 기능
const distDir = baseDir + `/dist`;
const presentationDir = `${distDir}/${presentation}`;
const copyDir = baseDir + "/copy";
module.exports = { baseDir, distDir, presentationDir, copyDir }; //다른 task에서 사용할 수 있게끔 exports
const gulp = require("gulp");
require("./gulp/task/makeDir"); //디렉토리를 만드는 task
require("./gulp/task/putAssets"); //html,css, js들을 넣어주는 task
require("./gulp/task/makeShFile"); //sh파일을 만들어주는 task
require("./gulp//task/makeEtc"); //.gitignore, README.md등 기타 파일들 넣어주는 task
gulp.task("build", ["makeDir","makeSubDir","putHtml","cpShared","makeShfile","makeEtc" ]);
//build task, 디펜던시 설정Gulp Task 나누기
이 프로젝트에서 필요한 Task는 크게 4개 정도로 생각했다.
- presentation과 slide를 생성, 즉 디렉토리를 생성하는 Task
- html, css, js를 각각의 slide에 넣어주는 Task
- sh file을 생성하는 Task
- **README,
.gitignore등 기타 파일과 폴더를 생성하는 Task
이렇게 나누어서 gulp 디렉토리를 만들어서 여기에 task들을 넣어주었다.
최종 gulp task 모듈화
디렉토리 만들기
프레젠테이션 디렉토리를 만드는 일은 어렵지 않았다.
gulp build전 이미 dist폴더가 있다면 삭제를 해주어야 한다.
gulp.task("deleteDist", () => {
shell.rm("-Rf", `${distDir}/*`);
});
gulp.task("makeDir", ["deleteDist"], () => {
if (!`${distDir}`) {
//만약 Dist폴더가 없으면 오류 발생하기 때문에 만들어준다.
shell.mkdir(`${distDir}`);
}
shell.cd(distDir);
shell.exec(`mkdir ${presentation}`);
});-Rf옵션은 디렉토리와 파일 모두 경고 없이 삭제하는 명령어이다. 매우 조심스럽게 사용해야 한다.
프레젠테이션 디렉토리를 만들었으면 하위 슬라이드 디렉토리를 만들어야 한다.
현재 실무에서는 000, 001 등으로 이름을 짓게 되므로 10이하일 때는 ‘00’을 붙여주고 10 이상이면 0하나만 붙여준다.
100개 이상 넘어가는 경우는 고려하지 않았다.
gulp.task("makeSubDir", () => {
shell.cd(presentationDir);
for (let i = 0; i < numberOfSlide; i++) {
let name = "";
if (i < 10) {
name = "00" + i;
} else if (i >= 10) {
name = "0" + i;
}
shell.mkdir(`${presentation}_${name}`);
}
shell.mkdir(`${presentation}_REFS`); //REFS와 PI는 따로 생성해준다.
shell.mkdir(`${presentation}_PI`);
shell.mkdir("shared"); //여기서 shared폴더도 만들어준다.
});길어져서 Assets들을 집어넣는 코드는 다음 포스팅에서 설명하려고 한다.