gulp js 예제

22 Sep 2023

javascript

Gulp.js는 자바스크립트 빌드 시스템으로, 자동화된 작업 흐름을 만들어주는 툴입니다. Gulp.js를 사용하면 자바스크립트 파일의 변환, 압축, 병합 등의 작업을 손쉽게 수행할 수 있습니다.

Gulp.js 설치

Gulp.js를 사용하기 위해 먼저 Node.js가 설치되어 있어야 합니다. npm (Node Package Manager)을 사용하여 Gulp.js를 설치합니다. 아래 명령어를 터미널에서 실행합니다:

npm install --global gulp-cli

Gulp.js를 사용한 자바스크립트 빌드 예제

Gulp.js를 사용하여 자바스크립트 파일을 변환하는 간단한 예제를 제공합니다. 이 예제는 src 폴더에 있는 모든 JavaScript 파일을 ES6 문법으로 변환하고, dist 폴더에 저장합니다.

먼저 프로젝트 폴더를 생성하고 해당 폴더로 이동합니다.
```
mkdir gulp-example
cd gulp-example
```

아래와 같이 package.json 파일을 생성합니다.

{
  "name": "gulp-example",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-babel": "^7.0.1",
    "gulp-plumber": "^1.2.1"
  }
}

다음 명령어를 실행하여 gulp와 필요한 플러그인들을 설치합니다.
```
npm install
```
자바스크립트 파일을 저장할 src 폴더를 생성하고, 테스트용 JavaScript 파일을 생성합니다.
```
// src/app.js
const message = "Hello, world!";
console.log(message);
```

프로젝트 폴더에 gulpfile.js 파일을 생성하고, 아래 내용을 작성합니다.

// gulpfile.js
const gulp = require('gulp');
const plumber = require('gulp-plumber');
const babel = require('gulp-babel');

const srcPath = './src/**/*.js';
const distPath = './dist';

function javascript() {
  return gulp
    .src(srcPath)
    .pipe(plumber())
    .pipe(babel())
    .pipe(gulp.dest(distPath));
}

exports.default = gulp.series(javascript);

터미널에서 gulp 명령어를 실행하여 자바스크립트 파일 변환을 시작합니다.
```
gulp
```
dist 폴더에 변환된 JavaScript 파일이 생성됨을 확인할 수 있습니다.

위의 예제는 Gulp.js를 사용하여 자바스크립트 파일을 변환하는 기본적인 흐름을 보여줍니다. Gulp.js는 다양한 플러그인을 제공하므로 더 복잡한 작업도 처리할 수 있습니다. 자세한 내용은 Gulp.js 공식 문서를 참고하시기 바랍니다.

#Gulp #JavaScript