[gulp] 퍼블리셔를 위한 gulp 기본 셋팅

gulp를 셋팅할 일이 생겼다.

로컬 환경에서 레이아웃부터 잡아가는데,

live 코딩을 하면서 include 기능을 넣고 싶었던 나의 욕심.

그런데 이게 ajax로는 좀 한계가 있었다.

ajax로 불러오는 파일은 live-server가 인식하지 못해서,

live 코딩이 힘들었기 때문이다.

 

gulp-file-include & browser-sync를 목표로 셋팅에 들어갔다.

 

 

이전에 한번 셋팅한 적이 있어서 굉장히 쉽게 생각하고 접근했는데, 

다시 하려니 버벅버벅....

이전 회사에서 작업한 파일은 다 날려버려서 엄청 슬퍼지고....

 

하루 정도 고생하고, package.json, gulpfile.js 셋팅을 완료하였다.

 

3.x 버전으로 작업하니 계속 에러가 났고,

생각해보니 나... 전에도 4버전으로 셋팅했었잖아....

기억을 더듬어 4버전 셋팅하니 에러없이 잘 동작되었다.

 

셋팅한 파일 공유!

 

package.json

{
  "name": "projectname",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "dev": "gulp"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "browser-sync": "^2.27.10",
    "del": "^6.1.1",
    "gulp": "^4.0.2",
    "gulp-clean": "^0.4.0",
    "gulp-file-include": "^2.3.0",
    "gulp-imagemin": "^8.0.0",
    "gulp-sass": "^5.1.0",
    "sass": "^1.53.0"
  }
}

 

 

gulpfile.js

var gulp = require("gulp");
var del = require("del");
var fileinclude = require("gulp-file-include");
var scss = require("gulp-sass")(require("sass"));
var clean = require("gulp-clean");
var browserSync = require("browser-sync").create();

var paths = {
  dev: {
    src: "./src",
    css: "./src/scss/*.scss",
    js: "./src/js/*.js",
    html: "./src/**/*.html",
    imgs: "./src/images/*",
  },
  dist: {
    src: "./dist",
    css: "./dist/css",
    js: "./dist/js",
    html: "./dist",
    imgs: "./dist/images",
  },
};

var scssOptions = {
  outputStyle: "expanded",
  indentType: "tab",
  indentWidth: 2,
  precision: 6,
  sourceComments: false,
};
function setHtml() {
  return gulp
    .src(paths.dev.html)
    .pipe(
      fileinclude({
        prefix: "@@",
        basepath: "@file",
      })
    )
    .pipe(gulp.dest(paths.dist.html))
    .pipe(browserSync.reload({ stream: true }));
}

function setJs() {
  return gulp
    .src(paths.dev.js)
    .pipe(gulp.dest(paths.dist.js))
    .pipe(browserSync.reload({ stream: true }));
}
function setCss() {
  return gulp
    .src(paths.dev.css)
    .pipe(scss(scssOptions).on("error", scss.logError))
    .pipe(gulp.src("./src/css/*.css"), { passthrough: true })
    .pipe(gulp.dest(paths.dist.css))
    .pipe(browserSync.reload({ stream: true }));
}

function setImgs() {
  return gulp
    .src(paths.dev.imgs)
    .pipe(gulp.dest(paths.dist.imgs))
    .pipe(browserSync.reload({ stream: true }));
}

function watchFiles() {
  gulp.watch(paths.dev.css, setCss);
  gulp.watch(paths.dev.js, setJs);
  gulp.watch(paths.dev.html, setHtml);
  gulp.watch(paths.dev.imgs, setImgs);
}
function brwSync() {
  return browserSync.init({
    server: {
      baseDir: paths.dist.src,
    },
  });
}
function setClean() {
  return gulp.src(paths.dist.src, { read: false }).pipe(clean());
}

gulp.task(
  "default",
  gulp.parallel(
    brwSync,
    gulp.series(setClean, setHtml, setCss, setJs, setImgs),
    watchFiles
  )
);

예제 파일 : 

gulp-test.zip

0.03MB

 

 

작업하면서 에러가 났던 부분 : 

• root에 dist 폴더 만들기(없으면 동작 안함)
• sass가 없습니다.
  • 터미널에서 yarn add sass 또는  npm i sass로 sass를 설치했더니 없어졌다.
  • require로 불러올 경우에 require('sass')를 gulp-sass 옆에 붙여줘야 해서 추가 설치하는 건가?
• dist 안쪽에 파일 생성이 되지 않음
  
  • 처음에 생성이 되지 않아서 고민하다가, src(dev 폴더)폴더에서 수정했더니 생성이 되었다.
  • 이게 정상은 아닌거 같은데 혹시나 셋팅하다 문제 생기면 한번 해보는 것도 나쁘지 않겠다.
  • clear를 나중에 셋팅해서 이런 문제가 생겼을 수도....

 

해당 gulp 셋팅에서 manify나 uglify, js-concat을 사용하지 않은 이유는,

퍼블리셔가 파일을 납품할 때에는 코드 형태가 그대로 살아있어야 하기 때문이다.

제목에 '퍼블리셔를 위한'  gulp 셋팅이라고 한 이유도 한 맥락이다.

특별히 gulp를 사용한 이유도 이와 같다.

rollup, parcel, node.js기반의 ejs 셋팅시에는 파일이 압축되거나, 파일 명이 변경되거나, 폴더 형태가 일정해야 되는 단점이 있어서 사용하지 못했다.

 

여러가지를 직접 셋팅해보면서 가장 흥미로웠던 번들러는 parcel이었는데,

package.json을 통하지 않고도 간편하게 번들이 되어서 좋았다.

webpack 최신 버전은 parcel처럼 간편하게 번들이 된다고 하는데,

기능이 자잘하게 분산되어 있어서 가볍게 실습하는 입장에서는 고려하고 싶지 않은 번들러다.

 

create react-app, vue.cli가 그립다...