빌드 자동화 툴 gulp를 사용하자

gulp란 프론트엔드 자동화 빌드 툴이다 흔히 webpack이 하나의 파일로 모아주는 번들링 툴이라면 gulp는 테스크 실행형이다
프론트 엔드 개발이 목적이 아니라면 gulp를 이용하는 것이 효율적이라 생각한다

gulp 설치는 https://webpi.tistory.com/544 여기를 참조하고
gulp를 사용함에 있어 추천하는 모듈들을 알아보자

gulp-notify - 오류 처리 할 때 메세지로 보여줄 수 있음
gulp-plumber - 스트림에 문제가 있을 경우 파이프를 해제하고 상세 에러 처리를 가능
gulp-debug - 파이프라인을 통해 실행되는 파일을 확인하기 위해 파일 스트림을 디버그
gulp-dart-sass - Sass의 공식 구현체 중 하나로서, 이전 gulp sass보다 더욱 빠르고 안정적이며 기능이 향상
gulp-version-number - HTML에서 js/css/image에 버전 번호 추가
gulp-autoprefixer - CSS 속성의 벤더 프리픽스(vendor prefix)를 사용자의 브라우저에 따라 자동으로 붙여줌
gulp-file-include - 파일을 include 할 수 있게 해줌
gulp-uglify - 자바스크립트 압축
browser-sync - 여러 브라우저에서 테스트하는것을 도와주는 동기화 기능

이정도만 써도 정말 많은 시간과 비용을 효율적으로 사용할 수 있다
npm을 통해 설치할 수 있으면 필요에 따라 더 많은 모듈을 이용하여 업무에 도움을 줄 수 있다

gulpfile.js에 선언 후 사용 가능하다

const { src, dest, lastRun, watch, series, parallel } = require('gulp');
const notify = require('gulp-notify');
const plumber = require('gulp-plumber');
const debug = require('gulp-debug');
const dartSass = require('gulp-dart-sass');
const version = require('gulp-version-number');
const autoprefixer = require('gulp-autoprefixer');
const fileinclude = require('gulp-file-include');
const uglify = require('gulp-uglify');
const browserSync = require('browser-sync').create();

const paths = {
  scss: {
    src: 'src/scss/**/*.scss',
    temp: 'temp/css',
    dest: 'public/css'
  }
}

function scss() {
  return src(paths.scss.src, { sourcemaps: true }, { since: lastRun(scss) })
    .pipe(plumber({
      errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(dartSass({
      outputStyle: 'compressed'
    }))
    .pipe(autoprefixer({
      cascade: true
    }))
    .pipe(dest(paths.scss.temp, { sourcemaps: './maps' }))
    .pipe(debug({title: 'scss dest:'}));
}

function browserSyncServer(cb){
  browserSync.init({
      ui: {
          port: 1010,
      },
      port: 1009,
      server: {
          baseDir: './temp'
      }
  });

  cb();
}

function watchTask(){
  watch(paths.scss.src, series(scss, browserSyncReload));
}

function browserSyncReload(cb){
  browserSync.reload();

  cb();
}

exports.default = series(
  scss,
  browserSyncServer,
  watchTask,
);