Skip to content

Instantly share code, notes, and snippets.

@bynaki
Last active January 27, 2022 08:29
Show Gist options
  • Save bynaki/8f7778981b9aef27ee78 to your computer and use it in GitHub Desktop.
Save bynaki/8f7778981b9aef27ee78 to your computer and use it in GitHub Desktop.
Gulp :: Babel과 Mocha 사용 구현. - 1. Babel - Babel 설치. - Babel p

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. 링크

{"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. 링크"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment