이제 걸프가 유용한 일을 하게 할 수 있습니다.
우리가 작성할 ES6 코드를 ES5 코드로 바꾸는 일 말입니다.
es6와 public/es6에 있는 코드를 ES5 코드로 변환해서 dist와 public/dist에 저장할 겁니다.
npm install --save-dev gulp-babel 명령으로 gulp-babel 패키지를 설치하고 gulpfile.js를 다음과 같이 수정합니다.
const {src, dest, parallel} = require('gulp');
const babel = require('gulp-babel');
function node_babel () {
return src("es6/**/*.js")
.pipe(babel())
.pipe(dest("dist"));
}
function browser_babel () {
return src("public/es6/**/*.js")
.pipe(babel())
.pipe(dest("public/dist"))
}
exports.default = parallel(node_babel, browser_babel);
걸프는 파이프라인 개념으로 작업을 처리합니다.
먼저 변환할 파일을(src("es6/**/*.js")) 지정했습니다.
**는 “서브디렉터리를 포함해 모든 디렉터리”를 뜻하는 와일드카드입니다.
따라서 이 소스 필터는 서브디렉터리 깊이에 관계없이 es6에 있는 모든 .js 파일을 선택합니다.
다음에는 이 소스 파일을 바벨에 파이프로 연결합니다.
바벨은 ES6 코드를 ES5 코드로 변형합니다.
마지막 단계에서는 컴파일된 ES5 코드를 dist 디렉터리에 저장합니다.
걸프는 소스 파일 이름과 디렉터리 구조를 그대로 유지합니다.
예를 들어 es6/a.js 파일은 dist/a.js 로 컴파일되고, es6/a/b/c.js 파일은 dist/a/b/c.js 로 컴파일되는 식입니다.
같은 과정을 public/es6 디렉터리의 파일에 대해서도 반복합니다.
아직 ES6에 대해 배우지 않았지만, ES6 샘플 파일을 만들고 걸프 설정이 제대로 동작하는지 확인해 봅시다.
ES6의 새 기능을 사용하는 파일 es6/test.js을 만듭니다.
지금 이 파일을 이해할 수 없어도 상관없습니다.
이 책을 마칠 때쯤이면 이해할 수 있습니다.
'use strict';
// es6 기능 : 블록 스코프 변수 선언
const sentences = [
{subject: 'JavaScript', verb: 'is', object: 'great'},
{subject: 'Elephants', verb: 'are', object: 'large'},
];
// es6 기능 : 객체 분해
function say({subject, verb, object}) {
// es6 기능 : 템플릿 문자열
// 아래 사용한 것은 따옴표가 아니라 백틱(`), 즉
// 키보드의 탭 키 바로 위에 있는 문자입니다.
console.log(`${subject} ${verb} ${object}`);
}
// es6 기능 : for..of
for (let s of sentences) {
say(s);
}
그리고 이 파일을 public/es6에 복사합니다.
파일을 바꿔보고 싶다면 sentences 배열의 단어는 바꿔도 됩니다.
이제 gulp 명령을 내립니다.
작업이 끝나면 dist와 public/dist 디렉터리를 보십시오.
두 디렉터리에 모두 test.js 파일이 있을 겁니다.
파일을 열어서 ES6 파일과 다른 것을 확인하십시오.
아래는 위의 ES6가 ES5로 컴파일된 모습입니다.
'use strict'; // es6 기능 : 블록 스코프 변수 선언
var sentences = [{
subject: 'JavaScript',
verb: 'is',
object: 'great'
}, {
subject: 'Elephants',
verb: 'are',
object: 'large'
}]; // es6 기능 : 객체 분해
function say(_ref) {
var subject = _ref.subject,
verb = _ref.verb,
object = _ref.object;
// es6 기능 : 템플릿 문자열
// 아래 사용한 것은 따옴표가 아니라 백틱(`), 즉
// 키보드의 탭 키 바로 위에 있는 문자입니다.
console.log("".concat(subject, " ").concat(verb, " ").concat(object));
} // es6 기능 : for..of
for (var _i = 0, _sentences = sentences; _i < _sentences.length; _i++) {
var s = _sentences[_i];
say(s);
}
이제 ES6 코드를 바로 실행해 봅시다.
현재 책과 다른 모습을 볼 수 있습니다.
노드는 ES6 기능 지원을 점점 더 늘리고 있으니, 여러분이 이 책을 읽는 시점에 따라서는 완벽히 실행될 수도 있습니다.
이제 ES5 코드를 실행합시다.
ES6 코드를 어디서든 사용할 수 있는 ES5 코드로 바꾸는 데 성공했습니다.
마지막으로, dist와 public/dist 디렉터리를 .gitignore 파일에 추가하십시오.
우리는 ES6 소스만 추적하고, 자동으로 생성되는 ES5 파일은 추적하지 않습니다.
# npm 디버그 기록
npm-debug.log*
# 프로젝트 의존성
node_modules
# macOS 폴더 속성
.DS_Store
# 임시 파일
*.tmp
*~
# 결과물
dist
public/dist