Gulp 마스터하기

5 minute read

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";

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/"]);

const webserver = () => gulp.src("build").pipe(ws({ livereload: 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({
        browsers: ["last 2 versions"],
      })
    )
    .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 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]);
// paraller 은 순서대로가 아닌 병행해서 Task를 실행해준다.

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

참조 사이트

gulp에 대한것 Nomad Code

1. introduce

Gulp 는 node.js 기반의 task runner 입니다. 반복적인 귀찮은 작업들이나 프론트엔드 빌드에 필요한 작업들을 gulp 통해 쉽게 처리해줄 수 있습니다.

CSS 처리
- 모든 SCSS를 CSS로 컴파일. 캐쉬를 이용해 더 빠르게 처리하죠
- 브라우저 지원을 위해 자동 접두사(auto-prefies)를 추가
- 편리한 디버깅을 위한 목적으로 CSS 소스맵을 생성
- 사용하는 써드파티 모듈/패키지로부터 CSS를 가져옴
- CSS를 하나로 합치고 최소화
- SCSS 사용
자바스크립트 처리
- ES6로 작성한 모든 자바스크립트를 브라우저 지원을 위해 트랜스파일.
- 써드파티 모듈/패키지로부터 자바스크립트를 가져옴
- 자바스크립트 난독화
- HTML별로 인라인해야할 자바스크립트를 가져옴
라이브 리로딩 처리
- CSS/SCSS가 변경되면 곧장 브라우져는 페이지 로드 없이 화면을 다시 그림
- 자바스크립트가 변경되면 브라우져가 페이지를 다시 로딩
- Twig/HTML 템플릿이 변경되면 브라우져는 페이지를 다시 로딩
웹사이트를 위해 CriticalCSS를 생성
웹 접근성 검사
Fontello를 통해 사용하는 glyphs만을 통해 커스텀 아이콘 글꼴을 생성
하나의 소스 이미지로부터 웹사이트를 위한 다양한 파비콘(그리고 HTML 코드)을 생성
imagemin을 통해 웹사이트에서 사용하는 이미지를 무손실 압축

2. Scaffolding(구조짜기) Part One , Scaffolding Part Two

2.2 package.json 시작

yarn init 을 하여 package.json을 시작한다.
- npm(Node Packaged Manager)이라는 것은 node(Node.js)로 만들어진 package(module)을 관리해주는 툴이라는 것이 됩니다.
- package.json package.json의 key에 관해서
```
{
  "name": "gulp",
  "version": "1.0.0",
  "description": "Learn Gulp",
  "main": "index.js",
  "repository": "https://github.com/JungYOsup/gulp.git",
  "author": "yosup <yosup1004@gmail.com>",
  "license": "MIT",
  "scripts": {
    "dev": "gulp dev",
    "build": "gulp build"
  },
  "dependencies": {
    "gulp": "^4.0.2"
  }
}
```
에서
```
"scripts": {
    "dev": "gulp dev",
    "build": "gulp build"
  }
```
scripts 는 우리가 터미널에서 gulp dev로 실행하는대신 yarn dev로 대신하여 실행할수 잇게 해준다.
- npm은 Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램입니다. 개발자는 단 몇 줄의 명령어로 기존에 공개된 모듈들을 설치하고 활용할 수 있습니다.

2.3 Gulp 실행

Gulp를 사용하기 위해 필요한 두가지
- 첫번째, 전역 NPM Package에 Gulp를 설치해야한다.(콘솔에서 gulp를 사용하기 위함)
  - npm install gulp-cli - g
- 두번째, gulp를 설치한다.
  - yarn add gulp -D (yarn이 설치되어있을경우 , D는 개발자용)
- gulp가 모듈이기 때문에, npm이나 yarn을 사용하는것임

3. Gulp + Babel

3.1 Babel 이란?

최신 자바스크립트를 브라우저에서도 이해할수 있게 babel 추가시키기
- babel : 최신 javascript를 구식 javascript로 만들어 브라우저가 이해하게 해준다.
여기서는 js에 import를 해주기위해 babel을 사용한다.
사실 babel을 사용하지 않고, gulp 사용법을 보면 require()를 사용해서도 gulp를 사용할수 있지만, 우리는 import를 사용하고 싶으소 babel을 해줌

3.2 Babel 추가

.babelrc 파일 추가

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

@babel/preset-env 추가
@babel/register 추가
- yarn add @babel/register
- 여기서 @ 는 최신화된버전을 뜻함
@babel/core 추가
- yarn add @babel/core

5. Pug Task part One

Gulp 는 node.js 기반의 task runner 라고 했다, 여기서 task는 여러개가 있지만 그 중
- 1.모든 pug파일을 HTML로 변형한다음에 다른 폴더에 집어 넣는것
- 2.SCSS파일들을 가지고 CSS파일로 변환 하고 코드를 최소화 하여 CSS라는 폴더에 집어넣는 것 등이 있다.
- 3.라이브 리로딩 처리
- 4.imagemin을 통해 웹사이트에서 사용하는 이미지를 무손실 압축
그 중 첫번째인 pug파일을 HTML로 변한한다음에 다른폴더에 집어넣는 gulp의 기능을 실행해 보겠다.

5.1 모든 pug파일을 HTML로 변형한다음에 다른 폴더에 집어 넣는것

첫번째, 라이브러리인(모듈) gulp pug를 사용하기 위해, https://www.npmjs.com/package/gulp-pug 에서 npm 또는 yarn으로 추가시킨다.
gulp pug의 기능 : 이 Gulp 플러그인을 사용하면 템플릿 로컬, 사용자 정의 Pug 필터, AMD 래핑 등을 지원하여 Pug 템플릿을 HTML 또는 JS로 컴파일 할 수 있습니다.
추가시키는 법 : yarn add gulp-pug -D 으로 설치
gulp pug 사용법 : https://www.npmjs.com/package/gulp-pug 에 나와있다.

꿀팁

pug는 파이프로 연결하며 , 그 파이프들은 각기 다른 기능을 할수 있게 해준다.

6. Pug Task part Two

6.1 Pug를 잘못사용해서 지워야하는경우

src의 경로를 잘못입력해서 특정 pug가 아닌 모든 pug를 html로 번형했을경우
다음과 같은 방법으로 지울수 있다.
- 첫번째, del 플러그인은 받는다.
  - yarn add del
- 두번째로, del 플러그인은 import 하여 사용한다.

7. Dev Server(서버 만들기)

gulp webserver 사용법 : https://www.npmjs.com/package/gulp-webserver

7.1 gulp webserver의 문제점

index.pug를 수정하기 위해 값을 바꾸면 live wevserver에 의해서 바뀐 index.html이 바뀔까????
결론은 그렇지 않다.

8. Watching Files

8.1 (7.1의 문제 해결방법)

gulp watch 를 사용한다
gulp watch란 파일 감시자로서 계속해서 반영하는(?) 것 같음
https://www.npmjs.com/package/gulp-watch
굳이 패키지 매니저로 추가할 필요는 없이도, 작동을 하더라..

9. Image Optimization(이미지 최적화, 이미지의 크기를 최적으로 줄여줌)

9.1 img의 크기를 줄일수 있는 방법

yarn add gulp-image or https://www.npmjs.com/package/gulp-image에 나와있는 npm을 활용하여 gulp-image를 추가
결과 : grid02.PNG -> before=30.01 KB after=7.29 KB reduced=22.72 KB(75.7%) 라고 나옴, 크기가 약 75.7%가 감소한걸 볼수있음

9.2 img를 watch를 한다?

img에 watch를 해주면, img폴더에 img가 계속 추가될때마다, 이미지의 크기를 최적으로 줄여주게 된다. 그러면 좋은거 아닌가??? NO!!
만약에 img가 엄청 크다면, 그것을 최적의 상태로 만드는데 시간이 걸리기때문에, 따라서 상황에 맡게 watch를 해주던, 안해주던 해야한다.

10. Gulp SASS(실질적으로 내가 사용하는 부분)

1. gulp로 SASS를 설치해준다.
- npm으로 설치하는 방법
  - https://www.npmjs.com/package/gulp-sass
- yarn으로 설치하는 방법
  - yarn add node-sass gulp-sass –save-dev (gulp-sass를 설치하기 전에 node-sass도 설치해야하므로)
1. gulp sass 활용하는법
- https://www.npmjs.com/package/gulp-sass

10.1 알아둬야할 사항

scss에서 내가 css로 컴파일 하기를 원하지 않는것은 언더바를 해준다. 따라서 scss의 폴더에 reset과 variables의 이름앞에 언더바가 들어간다.

11. Minify + Autoprefixer

11.1 gulf Autoprefixer

https://www.npmjs.com/package/gulp-autoprefixer
autoprefixer은 다양한 기능이 있는데, 그 중 낮은 버전의 브라우저에서도 사용할수 있게 CSS에 추가시켜준다. (즉 여러 브라우저에서 호환이 가능하게 해줌)

11.2 Minify(gulp-csso)

CSS 코드의 띄어쓰기나 앤터는 메모리를 포함하고 잇다. 따라서 CSS가 속도가 빨리 나오기 위해서는 띄어쓰기와 앤터가 없는것이 좋다.
bad example

h1 {
  margin-top: 10px;
  font-size: 40px;
  color: red;
}

이 메모리 사용을 줄여주기위해 사용하는것이 gulp csso 이며, CSS의 띄어쓰기와 앤터를 없애준다.

12. Babelify + Browserify

Javascript를 다루기 위해서는 babel에서 실행시켜야 하며, Browserify 에서 실행시켜준다 왜냐하면 기본적으로 js에서 import, export 문법은 브라우저가 이해를 못하기 때문이다.
첫번째, Browserify를 추가시킨다.
두번째, 추가시킨 Browserify를 import 해준다
세번째, browserify 안에다 babel을 실행시켜야 한다.

정요섭

Gulp 마스터하기

1. introduce

2. Scaffolding(구조짜기) Part One , Scaffolding Part Two

2.2 package.json 시작

2.3 Gulp 실행

3. Gulp + Babel

3.1 Babel 이란?

3.2 Babel 추가

5. Pug Task part One

5.1 모든 pug파일을 HTML로 변형한다음에 다른 폴더에 집어 넣는것

꿀팁

6. Pug Task part Two

6.1 Pug를 잘못사용해서 지워야하는경우

7. Dev Server(서버 만들기)

7.1 gulp webserver의 문제점

8. Watching Files

8.1 (7.1의 문제 해결방법)

9. Image Optimization(이미지 최적화, 이미지의 크기를 최적으로 줄여줌)

9.1 img의 크기를 줄일수 있는 방법

9.2 img를 watch를 한다?

10. Gulp SASS(실질적으로 내가 사용하는 부분)

10.1 알아둬야할 사항

11. Minify + Autoprefixer

11.1 gulf Autoprefixer

11.2 Minify(gulp-csso)

12. Babelify + Browserify

12.1 Browserify

13. Deploying to GH Pages(깃허브 페이지에 배포하기)

14. Epilogue

Share on

Leave a comment

You may also enjoy

외부IP, 내부IP 그리고 포트넘버

클래스형 컴포넌트 vs 함수형 컴포넌트

React Hook의 최적화

일반 웹의 동작방식 vs React의 동작방식 vs Next의 동작방식(중요)