Gulp.js

3. Gulpfile의 구조

`gulpfile`은 Gulp에서 모든 작업이 정의되는 곳으로, 프로젝트의 루트 디렉토리에 위치한다. `gulpfile`은 맨 위에 필요한 플러그인을 포함하고, 끝부분에는 태스크 정의와 기본 태스크가 위치한다.^[28]

Gulp 작업은 명령줄 인터페이스(CLI)^[11] 셸에서 실행된다. Gulp를 사용하기 위해서는 `package.json` 파일과 `gulpfile.js` (또는 `gulpfile`) 파일이 필요하다. `package.json` 파일은 Gulp에 필요한 다양한 플러그인들을 나열하는데 사용된다. 빌드 도구의 관례에 따라, 이 파일들은 패키지 소스 코드의 루트 디렉토리에 위치한다. `gulpfile`은 Gulp가 빌드 작업을 실행하는 데 필요한 대부분의 로직을 포함한다. `gulpfile`에서는 먼저 필요한 모든 모듈을 로드한 다음, 작업을 정의한다. `gulpfile`에 지정된 모든 필수 플러그인은 `package.json`의 devDependencies 섹션에 나열된다.^[13] 기본 작업은 `$gulp` 명령어로 실행되며, 개별 작업은 `gulp ` 명령어^[14], 복잡한 작업은 `.pipe()` 연산자를 사용하여 플러그인을 연결하여 정의할수 있다.^[18]

3. 1. 플러그인

3. 2. 태스크

3. 3. 기본 태스크

4. Gulp 작동 방식

Gulp는 node 스트림을 기반으로 작동하는 자바스크립트 빌드 도구이다.^[8] 스트림은 파이프라인을 통해 파일 작업을 연결한다.^[9] Gulp는 파일 시스템을 읽고, `.pipe()` 연산자를 통해 데이터를 단일 목적 플러그인에서 다른 플러그인으로 전달하여 한 번에 하나의 작업을 수행한다. 모든 플러그인이 처리될 때까지 원본 파일은 영향을 받지 않으며, 필요에 따라 원본 파일을 수정하거나 새 파일을 생성하도록 구성할 수 있다. 이를 통해 여러 플러그인을 연결하여 복잡한 작업을 수행할 수 있다.^[10]

Gulp 작업은 명령줄 인터페이스(CLI) 셸에서 실행된다.^[11] Gulp를 사용하려면 `package.json` 파일과 `gulpfile.js` (또는 `gulpfile`) 파일 두 개가 필요하다. 이 파일들은 보통 패키지 소스 코드의 루트 디렉토리에 있다. Gulpfile은 Gulp가 빌드 작업을 실행하는 데 필요한 대부분의 로직을 포함하며, 필요한 모든 모듈을 로드한 다음 gulpfile에서 작업을 정의한다. Gulpfile에 지정된 모든 필수 플러그인은 `package.json`의 devDependencies 섹션에 나열된다.^[13] 기본 작업은 `$gulp` 명령어로 실행된다. 개별 작업은 gulp.task로 정의되며 `gulp ` 명령어로 실행된다.^[14] 복잡한 작업은 `.pipe()` 연산자를 사용하여 플러그인을 연결하여 정의한다.^[18]

gulpfile은 gulp에서 모든 작업이 정의되는 곳이다. gulpfile의 기본 구조는 상단에 포함된 필수 플러그인, 작업 정의, 그리고 마지막에 있는 기본 작업으로 구성된다.^[15]

5. 예제 태스크

다음은 일반적인 Gulp 태스크의 예시이다.

```javascript

// 스크립트 작업

gulp.task('scripts', function () {

return gulp.src('scripts/*.js')

.pipe(uglify())

.pipe(gulp.dest('scripts/'));

});

```

위 코드는 '''scripts/''' 디렉터리의 모든 자바스크립트 파일을 `uglify()`로 최적화하고 `gulp.dest('scripts/')`를 통해 원본 파일을 덮어쓴다.

```javascript

// 파일이 변경될 때 태스크 다시 실행

gulp.task('watch', function (cb) {

gulp.watch('scripts/js/**', scripts);

gulp.watch('images/**', images);

cb();

});

```

`watch` 태스크는 파일 변경에 반응한다. 위 예시는 JavaScript 파일이나 이미지 파일이 지정된 디렉터리에서 변경될 때 'scripts'와 'images' 태스크를 호출한다.

5. 1. 이미지 최적화

5. 2. JavaScript 파일 압축

5. 3. 파일 변경 감지 (Watch)

6. Gulp와 Grunt 비교

작업 실행기인 gulp와 Grunt는 여러 작업을 실행할 때 기본적인 npm 스크립트가 비효율적이기 때문에 npm이 아닌 Node.js를 기반으로 구축되었다.^[11] 일부 개발자는 npm 스크립트가 간단하고 구현하기 쉽기 때문에 선호하지만, gulp와 Grunt는 서로 간에, 그리고 기본 제공 스크립트에 비해 유리한 점이 많다.^[11]

Grunt는 파일을 변환하여 작업을 실행하고 이를 임시 폴더에 새 파일로 저장하며, 한 작업의 출력을 다른 작업의 입력으로 사용하여 출력 결과가 대상 폴더에 도달할 때까지 계속한다. 이 과정에서 많은 I/O 호출과 많은 임시 파일이 생성된다. 반면 gulp는 파일 시스템을 통해 스트리밍하므로 이러한 임시 위치가 필요하지 않아 I/O 호출 횟수를 줄여 성능을 향상시킨다.^[12]

Grunt는 구성 파일을 사용하여 작업을 수행하는 반면, gulp는 빌드 파일을 코딩해야 한다. Grunt에서는 각 플러그인이 이전 플러그인의 출력에 해당하도록 입력 위치를 구성해야 한다. gulp에서는 플러그인이 자동으로 파이프라인화된다.^[9]

참조

_[1] 서적 Developing a Gulp Edge Bleeding Edge Press
_[2] 웹사이트 Release Date of Version 1.0.0 https://libraries.io[...] 2020-12-31
_[3] 웹사이트 Releases · gulpjs/gulp https://github.com/g[...] 2020-12-31
_[4] 웹사이트 LICENSE file on GitHub https://github.com/g[...] 2020-12-31
_[5] 웹사이트 License field from gulp - npm https://www.npmjs.co[...] 2020-12-31
_[6] 웹사이트 Building With Gulp – Smashing Magazine https://www.smashing[...] 2016-12-14
_[7] 웹사이트 gulp.js plugin registry https://gulpjs.com/p[...] 2016-12-14
_[8] 웹사이트 gulpjs/gulp https://github.com/g[...] 2016-09-22
_[9] 웹사이트 substack/stream-handbook: how to write node programs with streams https://github.com/s[...] GitHub 2016-12-14
_[10] 웹사이트 gulpjs/gulp https://github.com/g[...] 2016-09-22
_[11] 웹사이트 gulpjs/gulp https://github.com/g[...] 2016-09-23
_[12] 웹사이트 Gulp for Beginners https://css-tricks.c[...] CSS-Tricks 2016-12-14
_[13] 웹사이트 install {{!}} npm Documentation https://docs.npmjs.c[...] 2016-09-22
_[14] 웹사이트 gulpjs/gulp https://github.com/g[...] 2016-09-23
_[15] 웹사이트 An Introduction to Gulp.js - SitePoint https://www.sitepoin[...] 2016-09-23
_[16] 웹사이트 gulp/API.md at 4.0 · gulpjs/gulp · GitHub https://github.com/g[...] GitHub 2016-12-14
_[17] 웹사이트 Durchstarten mit Gulp.js – Websites optimieren, Arbeitsabläufe automatisieren http://magazin.phlow[...] 2016-12-14
_[18] 서적 Getting Started with Gulp Packt Publishing Ltd
_[19] 웹사이트 Front-end Workflow mit Gulp - Liechtenecker https://liechtenecke[...] 2016-12-14
_[20] 웹사이트 gulp-uglify https://www.npmjs.co[...] 2016-12-14
_[21] 웹사이트 gulp-watch https://www.npmjs.co[...] 2016-09-23
_[22] 웹사이트 Browsersync + Gulp.js https://www.browsers[...] 2016-12-14
_[23] 웹인용 Releases · gulpjs/gulp https://github.com/g[...] 2020-12-31
_[24] 웹인용 License to github.com https://github.com/g[...] 2016-05-30
_[25] 서적 Developing a Gulp Edge Bleeding Edge Press
_[26] 웹인용 Building With Gulp – Smashing Magazine https://www.smashing[...] 2016-12-14
_[27] 웹인용 gulp.js plugin registry https://gulpjs.com/p[...] 2016-12-14
_[28] 웹인용 An Introduction to Gulp.js - SitePoint https://www.sitepoin[...] 2016-09-23