[Gulp] Gulp 설치 및 세팅하기

노마드코더의 gulp 강의를 기반으로 정리했다. 

Babel, Task, Pug, 이미지 최적화, SASS, Autoprefixer, Minify, Browserify, GH Pages 등 다양한 것들이 나와 강의가 짧지만 유용하다.

https://nomadcoders.co/gulp-for-beginners

Gulp 90분 마스터하기 – 노마드 코더 Nomad Coders

Gulp란?

반복적이고 귀찮은 작업들을 자동화 시켜놓은 툴이다.

gulp를 사용하여 sass들을 컴파일 하거나 css, js, 이미지를 압축화 하기가 쉬워진다.

 

 

설치 확인 및 설치 방법

gulp 설치 전에 node가 설치 되어있어야한다.

확인하는 방법은 아래와 같다.

node --v 
npm --v

위 입력 시 설치되어 있다면 몇 버전인지 나오니, 확인 후 설치를 진행한다.

 

콘솔에서 gulp를 호출할 수 있도록 도와주는 gulp-cli를 설치한다.

npm install gulp-cli -g

프로젝트를 진행할 폴더의 위치로 들어가  package.json 파일을 생성한다.

npm init

위를 입력하면 자동으로 프로젝트 이름 버전등이 적힌 package.json이 생성된다.

 

그 후, gulp를 개발용으로 설치한다.

npm install gulp -D

 

해당 폴더에 src 폴더를 만들고 컴파일되기를 원하는 모든 파일이 들어가도록 한다.

예시 )  scss, js, img 등의 폴더 생성

gulp 개발용 설치 후 gulpfile.js 생성 (package.json와 같은 위치)

npx -p touch nodetouch gulpfile.js
gulp --v // gulp 설치 버전 확인
gulp --help //gulp 설명

package.json에 추가 

"scripts": {
    "dev": "gulp dev",
    "build": "gulp build",
  },

기본 설치를 완료하였다.

 

 

Gulp + Babel 

이제 gulp를 설치했으니 gulpfile.js를 수정할 것이다.

gulpfile.js에 const gulp = require("gulp"); 이런 식으로 입력해도 작동은 하겠지만

Babel을 섞어 최신 자바스크립트를 사용하기 쉽도록 바꿔준다.

 

gulpfile.js를  gulpfile.babel.js로 이름 변경 후 아래처럼 입력.

import gulp from "gulp"; //const gulp = require("gulp"); <- 예전버전

. babelrc라는 파일을 동일한 위치에 생성 후 아래처럼 입력한다.

{
  "presets" : ["@babel/preset-env"]
}

babel 설치 

npm install --dev @babel/core
npm install --dev @babel/register
npm install --dev @babel/preset-env

 

설치를 완료한다면 package.json에서 아래처럼 확인할 수 있다.

만약 devDependencies 에 위치하지 않았다면 옮기면 된다. 

 

 

Task  추가

gulp dev를 입력하면 에러가 확인된다.

export const dev = () => console.log("i will dev!")

정확히 확인해 보기 위해 console을 추가 입력 후 다시  gulp dev  실행한다.

dev는 올바르게 실행되었지만 task 에러가 출력된다. 

task는 gulp에서 핵심 API로써, gulp가 처리할 작업을 정의한다.

여기서 task는 모든 파일을 가지고 이것들을 다른 폴더에 집어넣게 작동할 것이다.

 

 

pug파일 변환

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

gulp-pug

 

gulp-pug 설치 

npm install gulp-pug -D

 

gulpfile.babel.js

import gulp from "gulp";
import gpug from "gulp-pug";

const routes = {
  pug: {
    src: "src/*.pug",
    dest: "build"
  }
};

const pug = () =>
  gulp
    .src(routes.pug.src)
    .pipe(gpug())
    .pipe(gulp.dest(routes.pug.dest));

export const dev = gulp.series([pug]);

 

 

src 폴더에 있는 pug 파일을 gpug로 변환 후  gulp.dest를 이용해 pug.dest에 적혀있는 폴더 위치에 생성한다는 것이다.

 

위처럼 적은 뒤 gulp dev를 입력하면 문제없이 작동하는 것을 확인할 수 있다.

 

하지만 이후에 pug 파일을 수정한다면?

수정한 부분이 자동으로 컴파일되지 않는다.

 

그래서 필요한 것이 del이다.

build 한 것을 지우고 다시 build 하도록 만드는 것이다.

 

여기서 노마드코더의 강의를 따라 하다 에러가 생겼는데 해당 부분은 del의 버전을 낮추니까 해결되었다.

npm install del@4.1.1 // 낮춘 버전
npm install del // 최신 버전

gulpfile.babel.js

import gulp from "gulp";
import gpug from "gulp-pug";
import del from "del"; //del 추가


const routes = {
  pug: {
    src: "src/*.pug",
    dest: "build"
  }
};

const pug = () =>
  gulp
    .src(routes.pug.src)
    .pipe(gpug())
    .pipe(gulp.dest(routes.pug.dest));

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

const prepare = gulp.series([clean]); //del 추가
    
const assets = gulp.series([pug]);

export const dev = gulp.series([clean, pug]); //del 추가

gulp dev 시 작동하는 것을 확인할 수 있다.

 

 

gulp webserver + watching 

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

gulp-webserver

localhost 서버를 만들어보자.

 npm install --save-dev gulp-webserver

gulpfile.babel.js

import gulp from "gulp";
import gpug from "gulp-pug";
import del from "del";
import ws from "gulp-webserver"; //webserver 추가


const routes = {
  pug: {
    src: "src/*.pug",
    dest: "build"
  }
};

const pug = () =>
  gulp
    .src(routes.pug.src)
    .pipe(gpug())
    .pipe(gulp.dest(routes.pug.dest));

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

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

const prepare = gulp.series([clean]);
    
const assets = gulp.series([pug]);

const postDev = gulp.series([webserver]);  //webserver 추가

export const dev = gulp.series([prepare, assets, postDev]);  //webserver 추가

여기서 livereload는 파일을 저장하면 자동으로 새로고침 해주는 서버를 말한다.

 

하지만 테스트해보면 파일이 바뀌어도 서버에서 새로고침이 되지 않는다.

이 때문에 gulp에 파일을 잘 지켜보라는 watch를 추가해야 한다.

 

gulpfile.babel.js

import gulp from "gulp";
import gpug from "gulp-pug";
import del from "del";
import ws from "gulp-webserver";


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

const pug = () =>
  gulp
    .src(routes.pug.src)
    .pipe(gpug())
    .pipe(gulp.dest(routes.pug.dest));

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

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

const watch = () => { //watch 추가
  gulp.watch(routes.pug.watch, pug)
}

const prepare = gulp.series([clean]);
    
const assets = gulp.series([pug]);

const postDev = gulp.series([webserver, watch]);  //watch 추가

export const dev = gulp.series([prepare, assets, postDev]);

 

 

만약 동시에 두 가지를 task 실행하기를 원한다면 이런 식으로 일렬로 쓰는 게 아니라 parallel로 수정한다.

...

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

...

 

 

 

이미지 최적화

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

gulp-image

 

gulp-image 설치  (단 그냥 따라서 설치하면 에러가 발생해서 6.2.1로 버전을 낮춘 후 설치했다.)

npm install --save-dev gulp-image@6.2.1

아래 환경에 속한다면 해당 환경에 맞는 걸 추가로 설치하자. 

•  brew install libjpeg libpng  macOS에서
•  apt-get install -y libjpeg libpng 우분투에서
•  npm install -g windows-build-tools 윈도우에서

gulpfile.babel.js

import gulp from "gulp";
import gpug from "gulp-pug";
import del from "del";
import ws from "gulp-webserver";
import image from "gulp-image";  //image 추가


const routes = {
  pug: {
    watch: "src/**/*.pug",
    src: "src/*.pug",
    dest: "build"
  },
  img: {   //image 추가
    src: "src/img/*",
    dest: "build/img"
  }
};

const pug = () =>
  gulp
    .src(routes.pug.src)
    .pipe(gpug())
    .pipe(gulp.dest(routes.pug.dest));

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

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

const img = () =>   //image 추가
  gulp
    .src(routes.img.src)
    .pipe(image())
    .pipe(gulp.dest(routes.img.dest));
 
const watch = () => {
      gulp.watch(routes.pug.watch, pug);
      gulp.watch(routes.img.src, img);
};   

const prepare = gulp.series([clean, img]);   //image 추가
    
const assets = gulp.series([pug]);

const live = gulp.parallel([webserver, watch]);

export const dev = gulp.series([prepare, assets, live])

sass 변환

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

gulp-sass

gulp-sass를 설치하기 이 전에 node-sass가 설치되어있어야 한다.

npm i node-sass
npm install sass gulp-sass --save-dev

gulpfile.babel.js

import gulp from "gulp";
import gpug from "gulp-pug";
import del from "del";
import ws from "gulp-webserver";
import image from "gulp-image";
//import sass from "gulp-sass"; <- 에러가 생기므로 아래처럼 적자
const sass = require("gulp-sass")(require("node-sass"));    //sass 추가

sass.compiler = require("node-sass");    //sass 추가

const routes = {
  pug: {
    watch: "src/**/*.pug",
    src: "src/*.pug",
    dest: "build"
  },
  img: {
    src: "src/img/*",
    dest: "build/img"
  },
  scss: {    //sass 추가
    watch: "src/scss/**/*.scss",
    src: "src/scss/style.scss",
    dest: "build/css"
  }
};

const pug = () =>
  gulp
    .src(routes.pug.src)
    .pipe(gpug())
    .pipe(gulp.dest(routes.pug.dest));

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

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

const img = () =>
  gulp
    .src(routes.img.src)
    .pipe(image())
    .pipe(gulp.dest(routes.img.dest));

const styles = () =>    //sass 추가
  gulp
    .src(routes.scss.src)
    .pipe(sass().on("error", sass.logError))  
    .pipe(gulp.dest(routes.scss.dest));

const watch = () => {
  gulp.watch(routes.pug.watch, pug);
  gulp.watch(routes.img.src, img);
  gulp.watch(routes.scss.watch, styles);
};

const prepare = gulp.series([clean, img]);
    
const assets = gulp.series([pug, styles]);    //sass 추가

const live = gulp.parallel([webserver, watch]);

export const dev = gulp.series([prepare, assets, live])

 

 

 Autoprefixer

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

gulp-autoprefixer

css를 여러 브라우저에 맞춰 자동으로 변환시켜 준다. 

npm install --save-dev gulp-autoprefixer

영상을 따라 했더니 자꾸 에러가 생겼다.

 

그래서 이 부분을 수정하고 package.json도 같이 수정을 했다.

.pipe( autop({ browsers: ["last 2 versions"] }) )

 

 

gulpfile.babel.js

import gulp from "gulp";
import gpug from "gulp-pug";
import del from "del";
import ws from "gulp-webserver";
import image from "gulp-image";
//import sass from "gulp-sass";
import autop from "gulp-autoprefixer";    //autoprefixer 추가
const sass = require("gulp-sass")(require("node-sass"));

sass.compiler = require("node-sass");

const routes = {
  pug: {
    watch: "src/**/*.pug",
    src: "src/*.pug",
    dest: "build"
  },
  img: {
    src: "src/img/*",
    dest: "build/img"
  },
  scss: {
    watch: "src/scss/**/*.scss",
    src: "src/scss/style.scss",
    dest: "build/css"
  }
};

const pug = () =>
  gulp
    .src(routes.pug.src)
    .pipe(gpug())
    .pipe(gulp.dest(routes.pug.dest));

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

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

const img = () =>
  gulp
    .src(routes.img.src)
    .pipe(image())
    .pipe(gulp.dest(routes.img.dest));

const styles = () =>
  gulp
    .src(routes.scss.src)
    .pipe(sass().on("error", sass.logError))
    .pipe(autop())    //autoprefixer 추가
    .pipe(gulp.dest(routes.scss.dest));

const watch = () => {
  gulp.watch(routes.pug.watch, pug);
  gulp.watch(routes.img.src, img);
  gulp.watch(routes.scss.watch, styles);
};

const prepare = gulp.series([clean, img]);
    
const assets = gulp.series([pug, styles]);

const live = gulp.parallel([webserver, watch]);

export const dev = gulp.series([prepare, assets, live])

package.json

...

  "browserslist": [
    "last 2 versions"
  ]

 

 

Minify  

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

gulp-csso

css 파일을 압축해서 줄여준다.

npm install gulp-csso --save-dev

gulpfile.babel.js

import gulp from "gulp";
import gpug from "gulp-pug";
import del from "del";
import ws from "gulp-webserver";
import image from "gulp-image";
//import sass from "gulp-sass";
import autop from "gulp-autoprefixer";
const sass = require("gulp-sass")(require("node-sass"));
import miniCSS from "gulp-csso";    //csso 추가

sass.compiler = require("node-sass");

const routes = {
  pug: {
    watch: "src/**/*.pug",
    src: "src/*.pug",
    dest: "build"
  },
  img: {
    src: "src/img/*",
    dest: "build/img"
  },
  scss: {
    watch: "src/scss/**/*.scss",
    src: "src/scss/style.scss",
    dest: "build/css"
  }
};

const pug = () =>
  gulp
    .src(routes.pug.src)
    .pipe(gpug())
    .pipe(gulp.dest(routes.pug.dest));

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

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

const img = () =>
  gulp
    .src(routes.img.src)
    .pipe(image())
    .pipe(gulp.dest(routes.img.dest));

const styles = () =>
  gulp
    .src(routes.scss.src)
    .pipe(sass().on("error", sass.logError))
    .pipe( autoprefixer())
    .pipe(miniCSS())     //csso 추가
    .pipe(gulp.dest(routes.scss.dest));

const watch = () => {
  gulp.watch(routes.pug.watch, pug);
  gulp.watch(routes.img.src, img);
  gulp.watch(routes.scss.watch, styles);
};

const prepare = gulp.series([clean, img]);

const assets = gulp.series([pug, styles]);

const live = gulp.parallel([webserver, watch]);

export const dev = gulp.series([prepare, assets, live])

 

 

 

Browserify

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

gulp-bro

개발자들이 브라우저에서 Node.js 스타일의 모듈을 사용하기 위한 오픈 소스 JS 툴이다.

브라우저가 import 나 export 같은 걸 이해하지 못하기에 그걸 위해 사용한다.

npm install --save-dev gulp-bro

react에서 쓸 경우 react preset 같은 거 추가 설치 필요하다.

 

 

여기서는 아래 두 개를 추가 설치한다.

npm install babelify
 npm install uglifyify

gulpfile.babel.js

import gulp from "gulp";
import gpug from "gulp-pug";
import del from "del";
import ws from "gulp-webserver";
import image from "gulp-image";
//import sass from "gulp-sass";
import autoprefixer from "gulp-autoprefixer";
import miniCSS from "gulp-csso";
import bro from "gulp-bro"     //bro 추가
import babelify from "babelify"      //babelify 추가

const sass = require("gulp-sass")(require("node-sass"));

sass.compiler = require("node-sass");

const routes = {
  pug: {
    watch: "src/**/*.pug",
    src: "src/*.pug",
    dest: "build"
  },
  img: {
    src: "src/img/*",
    dest: "build/img"
  },
  scss: {
    watch: "src/scss/**/*.scss",
    src: "src/scss/style.scss",
    dest: "build/css"
  },
  js: {       //js 추가
    watch: "src/js/**/*.js",
    src: "src/js/main.js",
    dest: "build/js"
  }
};

const pug = () =>
  gulp
    .src(routes.pug.src)
    .pipe(gpug())
    .pipe(gulp.dest(routes.pug.dest));

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

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

const img = () =>
  gulp
    .src(routes.img.src)
    .pipe(image())
    .pipe(gulp.dest(routes.img.dest));

const styles = () =>
  gulp
    .src(routes.scss.src)
    .pipe(sass().on("error", sass.logError))
    .pipe(autoprefixer())
    .pipe(miniCSS())
    .pipe(gulp.dest(routes.scss.dest));

const js = () =>       //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 watch = () => {
  gulp.watch(routes.pug.watch, pug);
  gulp.watch(routes.img.src, img);
  gulp.watch(routes.scss.watch, styles);
  gulp.watch(routes.js.watch, js);
};

const prepare = gulp.series([clean, img]);
    
const assets = gulp.series([pug, styles, js]);

const live = gulp.parallel([webserver, watch]);

export const dev = gulp.series([prepare, assets, live])

 

 

GH Pages 

gulp를 이용해 깃헙 페이지에 게시.

npm install --save-dev gulp-gh-pages

gulpfile.babel.js

import gulp from "gulp";
import gpug from "gulp-pug";
import del from "del";
import ws from "gulp-webserver";
import image from "gulp-image";
//import sass from "gulp-sass";
import autoprefixer from "gulp-autoprefixer";
import miniCSS from "gulp-csso";
import bro from "gulp-bro"
import babelify from "babelify"
import ghPages from "gulp-gh-pages";      //gh-pages 추가

const sass = require("gulp-sass")(require("node-sass"));

sass.compiler = require("node-sass");

const routes = {
  pug: {
    watch: "src/**/*.pug",
    src: "src/*.pug",
    dest: "build"
  },
  img: {
    src: "src/img/*",
    dest: "build/img"
  },
  scss: {
    watch: "src/scss/**/*.scss",
    src: "src/scss/style.scss",
    dest: "build/css"
  },
  js: {
    watch: "src/js/**/*.js",
    src: "src/js/main.js",
    dest: "build/js"
  }
};

const pug = () =>
  gulp
    .src(routes.pug.src)
    .pipe(gpug())
    .pipe(gulp.dest(routes.pug.dest));

const clean = () => del(["build/",".publish"]);

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

const img = () =>
  gulp
    .src(routes.img.src)
    .pipe(image())
    .pipe(gulp.dest(routes.img.dest));

const styles = () =>
  gulp
    .src(routes.scss.src)
    .pipe(sass().on("error", sass.logError))
    .pipe(autoprefixer())
    .pipe(miniCSS())
    .pipe(gulp.dest(routes.scss.dest));

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 gh = () => gulp.src("build/**/*").pipe(ghPages())      //gh-pages 추가

const watch = () => {
  gulp.watch(routes.pug.watch, pug);
  gulp.watch(routes.img.src, img);
  gulp.watch(routes.scss.watch, styles);
  gulp.watch(routes.js.watch, js);
};

const prepare = gulp.series([clean, img]);
    
const assets = gulp.series([pug, styles, js]);

const live = gulp.parallel([webserver, watch]);

export const build = gulp.series([prepare, assets])
export const dev = gulp.series([prepare, assets, live])
export const deploy = gulp.series([build, gh, clean])      //gh-pages 추가

 

 

참고 url : https://gulpjs.com/docs/en/getting-started/quick-start/

Quick Start | gulp.js