[Gulp] 시작하기

 

gulp 빌드 도구를 사용해 작업하는 중에 스스로 세팅 작업을 시작해보는게 좋을 것 같아 시작하게 되었다.

생각보다 세팅하는데 시간이 좀 걸렸다😂 그래도 gulp에 대해서 깊게 알아보는 시간이 되었다.

 

Gulp 란

nodejs와 npm 기반의 웹 개발을 위한 프로세스 자동화 도구 중 하나이다.

주로 퍼블리싱 작업에 사용되며 HTML, CSS, JavaScript 파일을 자동으로 컴파일하거나 최적화하고, 파일 변경을 감지하여 브라우저를 새로고침하거나 라이브 리로드를 제공한다.

 

gulp는 *stream(스트림)기반의 build system 이다.

또한 node.js와 gulp의 특징인 이벤트 루프와 *비동기I/O를 기반으로 gulp가 작업(task)을 처리한다.

 

*stream이란?

- 데이터를 '조각단위' 로 처리하는 방식으로 메모리 사용을 줄이고 속도를 높인다.

- 파일을 읽고 처리하고, 저장하는 과정을 연속적인 데이터 흐름(Stream) 으로 처리한다.

 

*비동기I/O란?

- 작업이 끝날 때까지 기다리지 않고 다른 작업을 병렬로 실행

- Gulp는 비동기를 통해 여러 task를 동시에 실행하고 완료 여부를 이벤트로 관리 => non-blocking I/O

 

=> Gulp는 스트림(Stream)과 비동기를 결합하여 빠르고 효율적인 빌드 시스템을 제공한다.

=> 이를 통해 개발자는 반복적인 작업(CSS 컴파일, JS 압축 등)을 자동화 하고 생상선을 향상시킨다.

 

gulp(Gulp)란?

한단계식 따라하며 gulp.js 익히기

 

내가 구현하고자 하는 부분

1. gulp 설치
2. gulpfile.js
3. 파일구조 만들기
4. gulp 플러그인 설치

 

1. gulp 설치

⚠️주의해야 할 점

gulp를 설치하면 최신 버전 5.0이 설치되는데 gulp는 버전마다 문법이 다르다.

나는 제일 많이 쓴다고하는 4.0 기준으로 작업을 진행할 것이다.

1-1) node와 npm 설치

node와 npm은 많이 사용하므로 전역 설치하는게 좋다.

node와 npm은 다른 블로그에도 설명이 많으므로 패스.

$ node -v // 20.17.0
$ npm -v // 10.8.2

1-2) gulp 설치

gulp는 로컬에서만 관리하기 위해 전역(global)설치는 하지 않을 것이다.

버전이 제대로 나오면 gulp 설치 완료

$ npm install --save-dev gulp@4.0.2
$ gulp -v

 

만일 버전을 다운그레이드 해야 된다면 삭제 후 재설치

$ npm uninstall 플러그인이름
$ npm install --save-dev 플러그인이름@버전

 

 

2. gulpfile.js

먼저 gulp 3.0 문법을 알고 가면 4.0은 금방 이해된다.

// Gulp 모듈 호출
var gulp = require('gulp');

gulp.task('combine:js', ['first.js', 'second.js'], function() {
	retrun gulp.src([
    'src/js/**/*.js',
    'src/j/slider/*.js',
    '!src/js/slider/slider-beta.js'
    ])
    .pipe(gulp.dest('dist/js'))
});

gulp.task('default', ['combine:js;]);

2-1) gulp.task('name', ['deps'], func)

`gulp.task` 메서드는 Gulp가 수행한 일을 정의, 세 개의 전달인자를 받는다.

• `name` : task 이름 지정, 이름에는 공백 안됨
• `deps` : 생략 가능. 현재 선언하고 있는 task 수행하기 전 먼저 실행되어야 하는 task들의 배열 목록
• `func` : 실제 처리해야할 일

2-2) gulp.src(file)

• 해당 task의 대상이 되는 파일들을 지정해주는 역할
• `js/**/*.js` 는 폴더와 내부폴더의 .js 파일들을 모두 찾아서 파일을 가져오게 된다.
• 특정 폴더안의 파일만 미포함시키고 싶을 때 배열 앞 '!' 표시를 넣는다. 

2-3) gulp.pipe(...)

• `gulp.src`에서 대상으로 지정된 각 파일들을 stream 형태로 읽어들여 연결해주는 역할
• 체이닝으로 여러개의 pipe를 서로 연결할 수 있다.

2-4) gulp.dest()

• 해당 task의 결과물이 출력될 목적지(Destination)을 설정하는 역할

Gulp 사용법#2_Syntax Gulp

 

하단 블로그를 참고하여 gulp를 4.0으로 진행하였다.

Gulp 4.0에서 추가되고 변경된 4개의 기능 정리

Gulp 4.0 gulpfile.js 작성해 보기

 

3. 파일구조 만들기

• src(source) : 내가 작업할 곳
• dist(distribution) : 작업한 것을 gulp에 의해 빌드된 곳

🗂️ 파일 디렉토리 구조

status.html : 로드 시 제일 먼저 뜨는 화면으로 현황판 작업할 곳

src/common : status 와 공통 파일 저장

src/pc : pc 파일만 적용되는 곳

dist/pc : src/pc 빌드된 곳

src/
  |- common/
    |- css/
    |- fonts/
    |- js/
  |- pc/
    |- css/
    |- html/
      |- include/
    |- js/
  |- status.html
dist/
node-modules
gulpfile.js
package.json
package-lock.json

 

플러그인 설치

$ npm install 플러그인 --save-dev

// package.json
{
  "devDependencies": {
    "browser-sync": "^3.0.3",
    "gulp": "^5.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-file-include": "^2.3.0",
    "gulp-sass": "^6.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-uglify": "^3.0.2",
    "gulp-watch": "^4.3.11",
    "sass": "^1.84.0"
  },
  "dependencies": {
    "del": "^5.0.0"
  }
}

 

/* gulpfile.js */
// series : task 순차적으로 실행
// parallel : task 병렬로 실행
// watch : 파일 수정 시 바로 확인
const { src, dest, series, parallel, watch } = require('gulp');
// dist 폴더 정리
const del = require('del');
// HTML 템플릿 시스템 구현
const fileInclude = require('gulp-file-include');
// 여러 파일 병합
const concat = require('gulp-concat');
// JavaScript 압축
const uglify = require('gulp-uglify');
// 로컬 서버 생성 및 브라우저 동기화
const browserSync = require('browser-sync').create();
// SCSS파일을 CSS로 컴파일
const sass = require('gulp-sass')(require('sass'));
// 컴파일된 코드에서 원본 소스코드 위치 추적
const soruceMaps = require('gulp-sourcemaps');


// PC 작업용 폴더 파일 path
const pathPc = {
  scss: 'src/pc/css/*.scss',
  js: 'src/pc/js/*.js',
  html: 'src/pc/html/*.html'
}

// dist 폴더 정리
function clean() {
  return del(['dist']);
}

function buildStatus() {
  return src([
    'src/status.html',
  ])
  .pipe(dest('dist'))
  .pipe(browserSync.stream())
}

function commonCss() {
  return src([
    'src/common/css/**/*.css',
  ])
  .pipe(dest('dist/common/css'))
  .pipe(browserSync.stream())
}

function commonJs() {
  return src([
    'src/common/js/**/*.js'
  ])
  .pipe(uglify({
    mangle: false,
    compress: { drop_console: false },
    output: {
      comments: 'some',
      beautify: false
    },
  }))
  .pipe(dest('dist/common/js'))
  .pipe(browserSync.stream())
}

function buildStyle() {
  return src([
    pathPc.scss,
    // 'src/pc/css/**/*.css'
  ])
  .pipe(soruceMaps.init())
  .pipe(sass().on('error', sass.logError))
  .pipe(concat('pc-common.css'))
  .pipe(soruceMaps.write())
  .pipe(dest('dist/pc/css'))
  .pipe(browserSync.stream())
}

function buildHtml() {
  return src([
    pathPc.html,
    // 'src/pc/html/include/*.html'
  ])
  .pipe(fileInclude({
      prefix: '@@',
    }))
  .pipe(dest('dist/pc/html'))
  .pipe(browserSync.stream())
}

function buildScript() {
  return src(pathPc.js)
  .pipe(uglify({
    mangle: false,
    compress: { drop_console: false },
    output: {
      comments: 'some',
      beautify: false
    },
  }))
  .pipe(concat('pc-common.js'))
  .pipe(dest('dist/pc/js'))
  .pipe(browserSync.stream())
}

function setBrowserSync() {
  browserSync.init({
    server: {
      baseDir: './dist', // 서버 루트 디렉토리
      index: 'status.html'
    },
    port: 3000,
    open: true,
  })
}

function fileWatch() {
  watch('src/status.html', buildStatus);
  watch('src/common/css/*.css', commonCss);
  watch('src/common/js/**/*.js', commonJs);
  watch(pathPc.scss, buildStyle);
  watch(pathPc.html, buildHtml);
  watch(pathPc.js, buildScript);
}

exports.default = series(
  clean,
  parallel(buildStatus, commonCss, commonJs, buildStyle, buildHtml, buildScript),
  parallel(setBrowserSync, fileWatch)
)

 

 

⚠️Error

"The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0"

 

`gulp-sass`가 Dart Sass의 레거시 JS API를 사용하고 있어 발생한 문제라고 한다.

 

1. 문제원인
    - Dart Sass 1.45.0 부터 Morden JS API가 도입되어 기존 레거시 JS API는 더 이상 권장되지 않는다.
   - `gulp-sass` 가 Dart Sass의 Mordern API를 지원하지 않거나 설정이 올바르지 않을 경우 경고 발생
2. 해결방법
   - `gulp-sass` 를 최신 버전으로 업데이트하고, Dart Sass를 명시적으로 사용하도록 설정.

$ npm install gulp-sass@latest sass@latest --save-dev

• `gulp-sass` : Gulp 에서 Sass를 처리하기 위한 플러그인.
• `sass` : Dart Sass 컴파일러(Mordern API 지원)

Dart Sass 전처리기 알아보기