[Node.js] Babel / Gulp / eslint / Sass 사용하기

Babel

최신 언어들을 es5로 변환해주는 트랜스컴파일러. 

 

Gulp

반복적인 작업 (ex. 프론트엔드 빌드)에 필요한 작업들을 수행하는Stream기반의 Build System.

코드작성 > JS Test > JS Minify > JS Merge > CSS Minify > CSS Merge > 결과물 폴더에 저장

 

1. 프로젝트 시작하여 package.json파일 생성

npm init

2. gulp, eslint 전역으로 설치

npm install -g gulp eslint

3. 배포시엔 필요 없으니 --save-dev 설정하여 설치

npm install --save-dev gulp babel-core babel-preset-es2015 gulp-babel@7 gulp-sass gulp-eslint

4. 루트에 .babelrc파일 생성 후 아래와 같이 입력. 현재 프로젝트가 es6로 작업되어져 있다는 것을 의미한다.

{ "presets" : ["es2015"] }

5. 루트에 gulpfile.js생성 후 걸프 설정 코드 입력.

const gulp = require('gulp');
const babel = require('gulp-babel');
const eslint = require('gulp-eslint');
const sass = require('gulp-sass');

gulp.task('default', async function(){
  //ESLint를 실행합니다.
  gulp.src(["style/**/*.scss"])
    .pipe(sass())
    .pipe(gulp.dest("dist"));
  // 노드 소스
  gulp.src("es6/**/*.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
  // 브라우저 소스
  gulp.src("public/es6/**/*.js")
    .pipe(babel())
    .pipe(gulp.dest("public/dist"));
    //Sass 
  gulp.src(["es6/**/*.js", "public/es6/**/*.js"])
    .pipe(eslint())
    .pipe(eslint.format());
});

파일 구조 참고

6. test.js가 es6로 작업된 파일. 해당 파일 변환을 실행할 예정

 

7. gulp 실행

gulp

8. dist폴더에 es5로 변환된 test.js파일이 저장된다.

 

 

++ 매번 소스 수정하고 gulp를 치는 것은 마니 번거롭다.

      watch를 셋팅해준다.

 

1. 와쳐와쳐를 설치해준다.

npm install --save-dev gulp-watch

2. default안에 한꺼번에 써놓았던 것을 경로 및 기능별로 분리한다.

각 경로는 객체로 정의해놓는 것이 관리에 편하다고 하여 바꿨다.

폴더 구조도 바뀌었으니 참고.

const gulp = require('gulp');
const babel = require('gulp-babel');
const eslint = require('gulp-eslint');
const sass = require('gulp-sass');

// 경로 별도 지정
const src = 'public';
const distNode = 'dist';
const distBrowser = 'public/dist';
const paths = {
  jsNode: 'es6/*.js',
  jsBrowser: src + '/es6/*.js',
  scss: src + '/scss/*.scss',
  html: src + '/**/*.html',
};

//ESLint
gulp.task('eslint', async function(){
  gulp.src([paths.jsNode, paths.jsBrowser])
    .pipe(eslint())
    .pipe(eslint.format());
});

// script
gulp.task('scripts', async function(){
  // node
  gulp.src(paths.jsNode)
    .pipe(babel())
    .pipe(gulp.dest(distNode));
  // browser
  gulp.src(paths.jsBrowser)
    .pipe(babel())
    .pipe(gulp.dest(distBrowser));
});

// style
gulp.task('styles', async function(){
  gulp.src(paths.scss)
    .pipe(sass())
    .pipe(gulp.dest(distBrowser));
})

// watch
gulp.task('watch', function () {
	gulp.watch(paths.jsNode, gulp.series('scripts'));
	gulp.watch(paths.scss, gulp.series('styles'));
});

// default Task
gulp.task('default', gulp.parallel('styles', 'scripts', 'eslint', 'watch'))

파일 구조 참고 2

3. watch를 실행해준다! 

gulp watch

실행하면 요로케 터미널에 뜸

소스 수정하면 요로케 뜨면서 자동 변환댐

 

 

 

 

 

 

참고

https://bravenamme.github.io/2020/02/12/what-is-babel/

https://poiemaweb.com/es6-babel-webpack-1

https://valuefactory.tistory.com/314

https://lucidmaj7.tistory.com/122

http://ui-lab.co.kr/start-gulp/

https://blog.thereis.xyz/83