[node.js] gulp을 사용한 node.js 환경구성

들어가기

node.js로 프로젝트 관리할 수 있는 도구가 무엇이 있을까하다가 glup가 눈에 들어왔다. 한번 glup로 환경 구성을 해보자. eslint와 babel도 같이 설정했다.

작성자: ospace114@empal.com, http://ospace.tistory.com/

초기화

node.js으로 개발하기 위한 기본 소스 환경을 구성해보자.

먼저 가장 기본적인 초기화부터 시작하자.

아래 명령을 이용해 package.json 기본 파일을 생성한다.

npm init

설치

glup 설치

다음으로 사용할 빌드 도구를 설치하자. 이는 전체 패키지로 한번만 설치하면 다른 곳에서도 사용 가능하다.

npm i --save-dev glup

babel 설치

다음으로 트랜스 컴파일러를 설치한다.

npm i --save-dev babel-preset-es2015

그리고 기본 바벨 설정 .babelrc 파일을 생성하고 아래 내용을 입력한다.

{ "presets": ["es2015"]}

다음으로 걸프로 ES5 코드 변환 작업을 해보자. 버전 8.0으로 하면 에러가 발생해서 7.0으로 강제로 설치했다.

npm i --save-dev babel-core
npm i --save-dev gulp-babel@^7.0.0

gulp 설정

현재 작업 루트 폴더에 기본파일 gulpfile.js 을 생성하고 아래 내용을 입력한다.

const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', function() {
    // 변환할 노드 소스 (**은 서브 폴더 포함)
    gulp.src('es6/**/*.js')
        .pipe(babel())
        .pipe(gulp.dest('dist'));
    // 생성되는 브라우저 소스
    gulp.src('public/es6/**/*.js')
        .pipe(babel())
        .pipe(gulp.dest('public/dist'));
});

eslint 구성

eslint는 코드를 자동으로 포멧팅하고 정적 분석을 해주는 작업이다. 먼저 eslint 설치하고 eslint 기본 환경을 초기화한다. 초기화 과정에서 json을 선택하면 되고, 초기화후 .eslintrc.js 파일이 생성된다.

npm i --save-dev eslint
eslint --init

eslint 단계별로 필요한 설정을 선택하면 .eslintrc.js 파일이 생성된다.

생성된 .eslintrc.js 파일을 수정한다

• “es2021: true”을 삭제
• “ecmaVersion:12”에서 12를 6으로 수정(es6지원)

eslink을 사용하는 방법은 직접 eslint src/test.js처럼 바로 실행 가능하다.

그럼 gulpfile에 등록해서 eslint 사용하도록 설정해보자. gulpfile.js에 gulp.task() 밑에 아래 내용을 추가해보자.

const eslint = require("eslint");

gulp.task("default", function () {
  //...
  // eslint 실행
  gulp.src(['es6/**/*.js', 'public/es6/**/*.js'])
    .pipe(eslint())
    .pipe(eslint.format());
});

아래는 eslint 룰에 대한 예제이다.

{
    "rules": {
        "comma-dangle": [
            2,
            "always-multiline"
        ],
        "indent": [
            2,
            4
        ],
        /* … */
    }
}

실행

gulp 실행하면 결과를 확인할 수 있다.

gulp