DIMORIN BLOG

gulp

gulp logo

A toolkit to automate & enhance your workflow
gulp 는 node.js 기반의 task runner 입니다. 반복적인 귀찮은 작업들이나 프론트엔드 빌드에 필요한 작업들을 gulp 통해 쉽게 처리해줄 수 있습니다.
https://gulpjs.com/

설치

1. 전역 설치

npm install --global gulp-cli

2. Create a package.json file in your project directory

npm init

3. 프로젝트 디렉토리에 로컬 설치

npm install --save-dev gulp

4. javascript and gulpfiles

gulpfile.js src() dest() series() parallel()

transpilation

For Babel, rename to gulpfile.babel.js and install the @babel/register module.

5. creating tasks

compose tasks

series() : To have your tasks execute in order, use the series() method.
parallel() : For tasks to run at maximum concurrency, combine them with the parallel() method.

6. Working with Files

src() dest() pipe()

const { src, dest } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

exports.default = function() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(src('vendor/*.js'))
    .pipe(dest('output/'))
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
}

7. watching files

const { watch, series } = require('gulp');

function clean(cb) {
  // body omitted
  cb();
}

function javascript(cb) {
  // body omitted
  cb();
}

function css(cb) {
  // body omitted
  cb();
}

exports.default = function() {
  // You can use a single task
  watch('src/*.css', css);
  // Or a composed task
  watch('src/*.js', series(clean, javascript));
};

← event loop →