Gulp.js

1. Gulp의 주요 개념

1. Task
✔️ Gulp에서는 모든 작업이 'Task'로 정의된다. 이 Task는 예를 들어 파일을 압축하거나, 컴파일하는 등의 작업을 의미한다.
2. Stream
✔️ Gulp는 Node.js의 Stream 기능을 사용하여 파일을 처리한다. Gulp의 장점 중 하나는 메모리에 파일을 로드하지 않고 Stream으로 처리하여 성능이 좋다는 것이다.
3. Pipe
✔️ Stream을 사용하여 데이터를 한 작업에서 다음 작업으로 전달할 때 pipe() 메서드를 사용한다.

2. Gulp 세팅

❗가장 먼저 Node.js가 설치되어 있어야 한다.

1. npm install --global gulp-cli
   ✏️ Gulp Cli를 글로벌로 설정

2. npm init
   ✏️ package.json 생성

3. npm install --save-dev gulp
   ✏️ Gulp 설치

4. Gulp의 설정 파일인 gulpfile.js를 프로젝트 루트에 생성

3. Gulp ver

1. Gulp3 과 Gulp4

📌 Gulp4

const { src, dest, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));

function styles() {
  return src('src/scss/**/*.scss')
    .pipe(sass())
    .pipe(dest('dist/css'));
}

exports.styles = styles;

✔️ Gulp 4 에서는 gulp.task 대신 series, parallel, exports 를 사용하는 것을 권장한다. Gulp 작업 간의 의존성 관리와 작업 흐름 제어가 더 직관적이기 때문이다.

1. exports : 작업을 내보내서 Gulp CLI에서 사용할 수 있게 한다.
2. series, parallel : 여러 작업을 순차적(series) 또는 병렬적(parallel)으로 실행할 때 사용된다.

📌 Gulp3

gulp.task('styles', function() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});

• 해당 코드에서 'styles'라는 이름의 작업(Task)을 정의하고 있다. gulp.task는 첫 번째 인자로 작업의 이름을, 두 번째 인자로 실행할 함수를 받는다.

❗잠깐!
위의 두 가지 예제코드는 기본적으로 역할은 동일하나 차이점이 존재한다.

• 구조분해할당 방식

const { src, dest, series, parallel } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const uglify = require('gulp-uglify');
// SCSS 파일을 CSS로 컴파일하고 dist에 저장
function compileSass() {
  return src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('dist/css'));
}

✏️ return src('') 의 형태로 src 메서드를 직접 가져오는 방식. 이 방식은 Gulp 4에서 선호되는 방법으로, 모듈을 더 간결하게 불러올 수 있다.

• 모듈별 플러그인을 가져오는 방식

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const uglify = require('gulp-uglify');
// SCSS 파일을 CSS로 컴파일하고 dist에 저장하는 작업
function compileSass() {
  return gulp.src('src/scss/**/*.scss')  // src/scss 디렉토리의 모든 SCSS 파일을 가져옵니다.
    .pipe(sass().on('error', sass.logError)) // SCSS를 CSS로 변환하며, 오류 발생 시 로그 출력
    .pipe(gulp.dest('dist/css'));          // 변환된 CSS 파일을 dist/css 디렉토리에 저장합니다.
}

✏️ return gulp .src('') 의 형태로 Gulp의 기본 객체인 gulp를 직접 사용하여 src() 메서드를 호출하는 방식. Gulp API의 모든 기능에 접근할 수 있으므로, 코드가 명확하게 어떤 라이브러리를 사용하고 있는지 보여줄 수 있다.

4. Gulp 사용법

1. JavaScript 파일 병합 및 압축

const gulp = require('gulp');
const concat = require('gulp-concat');   // 파일 병합
const uglify = require('gulp-uglify');   // 파일 압축

function minifyJavaScript() {
  return gulp.src('src/js/**/*.js')  // src/js 디렉토리의 모든 JS 파일 선택
    .pipe(concat('all.min.js')) //파일을 병합하여 'all.min.js'로 생성
    .pipe(uglify()) //병합된 파일을 압축
    .pipe(gulp.dest('dist/js')); // dist/js 폴더에 저장
}

exports.minifyJavaScript = minifyJavaScript;

2. CSS 파일 병합 및 압축

const gulp = require('gulp');
const concat = require('gulp-concat');   // 파일 병합
const cleanCSS = require('gulp-clean-css'); // CSS 압축

function minifyCSS() {
  return gulp.src('src/css/**/*.css') // src/css 디렉토리의 모든 CSS 파일 선택
    .pipe(concat('styles.min.css')) // 파일을 병합하여 'styles.min.css'로 생성
    .pipe(cleanCSS()) // 병합된 CSS 파일 압축
    .pipe(gulp.dest('dist/css')); // dist/css 폴더에 저장
}

exports.minifyCSS = minifyCSS;

3. 이미지 최적화

const gulp = require('gulp');
const imagemin = require('gulp-imagemin'); // 이미지 최적화

function optimizeImages() {
  return gulp.src('src/images/**/*') // src/images 디렉토리의 모든 이미지 파일 선택
    .pipe(imagemin()) // 이미지 파일 최적화
    .pipe(gulp.dest('dist/images')); // dist/images 폴더에 저장
}

exports.optimizeImages = optimizeImages;

4. 파일 변경 감지 및 자동 처리

const gulp = require('gulp');

function watchFiles() {
  gulp.watch('src/js/**/*.js', gulp.series('minifyJavaScript')); // JS 파일 변경 감지 시 병합 및 압축
  gulp.watch('src/css/**/*.css', gulp.series('minifyCSS'));      // CSS 파일 변경 감지 시 병합 및 압축
  gulp.watch('src/images/**/*', gulp.series('optimizeImages'));  // 이미지 파일 변경 감지 시 최적화
}

exports.watchFiles = watchFiles;

5. Sass 파일 컴파일 및 자동 재로딩

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));  // Sass 컴파일
const browserSync = require('browser-sync').create(); // 브라우저 자동 리로드

function compileSass() {
  return gulp.src('src/scss/**/*.scss') // src/scss 디렉토리의 모든 SCSS 파일 선택
    .pipe(sass().on('error', sass.logError)) // SCSS를 CSS로 컴파일
    .pipe(gulp.dest('dist/css')) // dist/css 폴더에 저장
    .pipe(browserSync.stream()); // 변경 사항 자동 리로드
}

function serve() {
  browserSync.init({
    server: './'  // 현재 디렉토리에서 서버 실행
  });

  gulp.watch('src/scss/**/*.scss', compileSass); // SCSS 파일 변경 시 컴파일
  gulp.watch('*.html').on('change', browserSync.reload); // HTML 파일 변경 시 리로드
}

exports.compileSass = compileSass;
exports.serve = serve;

6. 기타

// 배포 전에 dist 폴더를 청소하는 Task
function clean() {
  return del(['dist']);
}

// 로컬 서버 실행 및 파일 변경 감지 Task
function serve() {
  browserSync.init({
    server: {
      baseDir: './dist'
    }
  });
  watchFiles(); // 파일 변경 감지 시작
}

// 빌드 Task: 모든 작업을 순차적으로 실행
const build = gulp.series(clean, gulp.parallel(minifyJS, minifyCSS, optimizeImages, includeHTML));

// 기본 Task: 빌드 후 로컬 서버 실행
exports.default = gulp.series(build, serve);

// 개별 Task 노출 (필요 시 사용)
exports.build = build;
exports.clean = clean;
exports.minifyJS = minifyJS;
exports.minifyCSS = minifyCSS;
exports.optimizeImages = optimizeImages;
exports.includeHTML = includeHTML;
exports.serve = serve;