Gulp :: Babel과 Mocha 사용 구현. - 1. Babel - Babel 설치. - Babel p

151aed81317-e2636335.md

Gulp :: Babel과 Mocha 사용 구현.

1. Babel

Babel 설치.

$ npm install -g babel-cli

Babel preset-es2015 설치.

javascript5 롸 변환해주는 Preset.

$ npm install babel-preset-es2015 --save-dev

.babelrc 파일 설정.

{
  "presets": ["es2015"]
}

2. Mocha

Mocha 설치.

$ npm install -g mocha

Chai 설치.

$ npm install chai --save-dev

chai-as-promised 설치.

chai에 promies 기능 추가

$ npm install chai-as-promised --save-dev

mocha test 파일에 require

const chai = require('chai');
const chaiAsPromised = require("chai-as-promised");
chai.use(chaiAsPromised);       // chai에 promise 기능 추가.
const should = chai.should();   // chai를 should로 사용할 수 있게.

3. Gulp

Gulp 설치.

$ npm install gulp --global
$ npm install gulp --save-dev

gulp-babel 설치.

$ npm install gulp-babel --save-dev

gulp-spawn-mocha 설치.

$ npm install gulp-spawn-mocha --save-dev

4. Source Map

gulp-sourcemaps 설치.

$ npm install gulp-sourcemaps --save-dev

source-map-support 설치.

$ npm install source-map-support --save-dev

5. gulpfile.js

const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const babel = require('gulp-babel');
const mocha = require('gulp-spawn-mocha');


// babel 처리.
gulp.task('babel', () => {
  return gulp.src('src/*.js')
    // source map 초기화
    .pipe(sourcemaps.init())
    // babel compile
    .pipe(babel({
      // preset 'es2015' :: javascript5로
      presets: ['es2015']
    }))
    // .js.map 생성.
    .pipe(sourcemaps.write('./', {sourceRoot: '../src'}))
    .pipe(gulp.dest('dist'));
});


// mocha 처리.
gulp.task('mocha', ['babel'], () => {
  return gulp.src('test/*-test.js', {read: false})
    .pipe(mocha({
      // report 종류
      R: 'nyan',
      // $ mocha --require source-map-support/register
      r: 'source-map-support/register'
    }));
});


gulp.task('watch', () => {
  gulp.watch('{src,test}/*.js', ['mocha']);
});


gulp.task('default', ['mocha', 'watch']);

6. 링크

• babel
• gulp
• mocha
• chai
• chai-as-promised
• gulp-babel
• gulp-spawn-mocha
• gulp-sourcemaps
• node-source-map-support

note-info.json

{"noteId":"151aed81317-e2636335","main":"151aed81317-e2636335.md","title":"Gulp :: Babel과 Mocha 사용 구현. - 1. Babel - Babel 설치. - Babel preset-es2015 설치. - .babelrc 파일 설정. - 2. Mocha - Mocha 설치. - Chai 설치. - chai-as-promised 설치. - mocha test 파일에 require - 3. Gulp - Gulp 설치. - gulp-babel 설치. - gulp-spawn-mocha 설치. - 4. Source Map - gulp-sourcemaps 설치. - source-map-support 설치. - 5. gulpfile.js - 6. 링크"}