🥤 gulp 사용하기 (4) babelify와 Browserify의 개념과 gulp-bro를 통한 활용

babelify는 ES6 이상의 JS 문법을 트랜스파일해주는 바벨을 브라우저가 알아들을 수 있는 방식으로 바꿔주는 것이다.

간단~

 

browserify

반면 browserify는 CommonJS 형태로 정의된 의존성 파일(dependencies) 들을 브라우저 내에서 사용할 수 있도록 번들링을 할 수 있게 해주는 도구이다. CommonJS 형태는 Node에서 채택한 방식이므로 위키피디아에서는 다음과 같이 설명하고 있다. 

 

Browserify is an open-source JavaScript tool that allows developers to write Node.js-style modules that compile for use in the browser.

 

CommonJS건 AMD건 결국 모듈을 불러오고 내보내는 코드가 중요하다. CommonJS식은 require/module.exports 이다.

그런데 우리는 이걸 babel을 이용해서 import/export로 바꿔주었다.

 

따라서 일반 브라우저가 이해할 수 있도록 트랜스파일하기 위해서는 우선 babelify를 사용한 후 다음으로 browserify를 사용해야 한다. 마침 이러한 방식을 한번에 처리해주는 gulp-bro 패키지가 있으므로 활용해보자.

 

주의) 기존의 gulp-browserify는 유지 보수를 하지 않습니다.

 

https://www.npmjs.com/package/gulp-bro

https://www.npmjs.com/package/babelify

 

---

 

 

babelify와 gulp-bro를 설치합시다.

 

코드 작성은 다음과 같이 하면 됩니다. uglifyify도 사용되었는데 npm으로 설치해주시면 됩니다.

또, 종종 babel 관련 오류를 내는데 시키는 대로 고분고분 설치해주고 세팅해주면됩니다.

const js = () =>
  gulp
    .src(routes.js.src)
    .pipe(
      bro({
        transform: [
          babelify.configure({ presets: ["@babel/preset-env"] }),
          ["uglifyify", { global: true }],
        ],
      })
    )
    .pipe(gulp.dest(routes.js.dest));

 

 

실제 사용 예는 다음과 같습니다.

import gulp from "gulp";
import del from "del";
import ws from "gulp-webserver";
import bro from "gulp-bro";
import babelify from "babelify";

const routes = {
  js: {
    watch: "src/js/**/*.js",
    src: "src/js/main.js",
    dest: "build/js",
  },
};

//task
const clean = () => del(["build"]);

const js = () =>
  gulp
    .src(routes.js.src)
    .pipe(
      bro({
        transform: [
          babelify.configure({ presets: ["@babel/preset-env"] }),
          ["uglifyify", { global: true }],
        ],
      })
    )
    .pipe(gulp.dest(routes.js.dest));

const webserver = () =>
  gulp.src("build").pipe(
    ws({
      port: 5000,
      livereload: true,
      open: true,
    })
  );

const watch = () => {
  gulp.watch(routes.js.watch, js);
};

// build delete for preventing conflict
const prepare = gulp.series([clean]);

// transpile
const assets = gulp.series([js]);

// execute webserver deamon
const postDev = gulp.parallel([webserver, watch]);

// package.json에서 script로 사용하기 위해 export
export const dev = gulp.series([prepare, assets, postDev]);