grunt vs gulp
위의 글에서는 앞으로 gulp 가 좀 더 낫지 않겠는가라고 이야기한다.
grunt 가 사용하기 편리하고, 지금까지 많은 프로젝트에서 사용해 왔고, 커뮤니티도 gulp 보다 크다. 그래서 계속 사용되기는 할 것이라고 한다. 초보자의 입장에서 바로 쓰기에는 grunt 가 낫다는 의견이다.
개인적으로 grunt 만 써봐서 아직 뭐라 이야기는 못하겠지만, grunt 가 그리 어렵지 않은 것은 맞다. gulp 는 써보고 이야기 하겠다.
gulp 사용
ref. 1 을 보면서 gulp 를 한 번 사용해 보도록 하겠다.- npm rm --global gulp 실행 : gulp-cli 이전 버전인 gulp 를 지워야 한다. 깔린 경우 지워준다. 안깔려있다면 warning message 하나 뿌려준다.
- npm install --global gulp-cli
- <project_root> folder 에서 npm install --save-dev gulp
- <project_root> folder 에 gulpfile.js 를 만든다.
- gulp 를 실행 : 이러면 기본적으로 gulpfile.js 에서 task 이름 'default' 를 찾아서 실행한다.
// gulpfile.js
var gulp = require('gulp');
gulp.task('default', function() {
// place code for your default task here
// Do something that "builds stuff"
var stream = gulp.src(/*some source path*/)
.pipe(somePlugin())
.pipe(someOtherPlugin())
.pipe(gulp.dest(/*some destination*/));
return stream;
});
});
위의 코드를 보면 대략적으로 어떻게 사용하는지 감은 올것이다.
참고 : 쿠...sal: [컴][javascript] grunt 로 project 만들기
Async Task
추가적으로 async task 도 사용할 수 있다. 그것은 여기를 참고하자.run-sequence
gulp 에서 어떤 task 를 실행하기 전에 어떤 task 를 실행하도록 하는 것은 dependency 설정으로 가능하다. 하지만 어떤 task 가 끝나서 특정 task 를 실행하도록 하는 것은 아직 쉽게 설정할 수 있게 되어 있지 않다.그래서 gulp 4.0 에서는 sequence 가 추가되어서 task 를 순차적으로 실행할 수 있다고 한다. 이녀석이 나오기 전까지는 run-sequence 를 사용하면 된다고 한다. 아래 링크를 참고하자.
Babel 사용하기
babel 을 gulp 를 이용해서 사용하려고 한다. 아래 경로에 가면 사용법이 나와있다.npm install --save-dev gulp-babel babel-preset-es2015
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', () =>
gulp.src('./app.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('dist'))
);
./app.js 를 읽어서 compile 하고 그 결과를 dist 폴더에 app.js 라는 이름으로 만들어 넣어준다.
babel
babel 을 대략적으로 설명하면 compiler 이다. coffee script 나 typescript 같은 언어를 보면 compiler(transpiler 라고도 하지만, 뭐..) 가 존재한다. 그런데 이 compiler 의 결과물이 js file 이 나온다. 이것과 같은 맥락으로 babel 은 새로운 언어가 아니라 새로운 javascript 버전의 syntax 를 사용해서 .js 를 작성하면, 이 .js 를 old version(현재 우리가 사용하는?) 의 js 로 변경해 준다.아래 그림을 보면 조금 이해가 될 듯 하다. 왼쪽이 "ES2015 문법"이고 오른쪽이 현재 browser 에서 지원하는 "일반적인 javascript 문법"이다.
coffescript vs ES2015
개인적으로 coffee 를 많이 사용했다. 그런데 ES2015 의 기본 syntax 가 coffeescript 를 많이 닮아 있어서 이제 plain 한 javascript 만으로도 간결하게 coding 을 할 수 있을 듯 해서 보고 있다. 그런데 보고 있으니 coffeescript 가 더 간결한듯 싶어서 안쓸것 같기도 하다 ^^;;;현재 javascript version 이 완전히 새로운 버전으로 대체되기 까지는 꽤 오랜 시간이 걸릴듯 하지만 그동안은 이 babel 에 의지하면 되지 않을까 생각하고 있다.
Learn ES2015 · Babel
댓글 없음:
댓글 쓰기