gulp 명령어 바꾸기 및 실행할 때 환경변수 전달하기

참고링크

기존

import {series, parallel} from 'gulp';
import {clean_dist} from './clean';
import {script, libs, eslint} from './js';
import {sass, css_libraries} from './css';
import {fontMove, fontStyle} from './fonts';
import {process_html, make_indexfile} from './html';
import {optimize_imgs, spriteSvg, sprites} from './images';
import {server} from './server';
import {gulpWatch} from './watch';
import {zipFile} from './zip';

exports.default = series(clean_dist, parallel(css_libraries, optimize_imgs, spriteSvg, sprites, fontMove), fontStyle,
    sass, eslint, parallel(script, libs, make_indexfile, process_html), parallel(server, gulpWatch));

exports.build = series(clean_dist, parallel(css_libraries, optimize_imgs, spriteSvg, sprites, fontMove), fontStyle,
    sass, eslint, parallel(script, libs, make_indexfile, process_html), zipFile);

보통 gulpfile.js 를 보면 보통 위와 같이 코드가 정의되어있습니다.
터미널 창에 gulp 또는 gulp default 명령어를 입력하면 위에 정의되어있는 exports.default 구문이 실행되고, gulp build 명령어를 입력하면 exports.build 구문이 실행됩니다.
하지만 위와는 다른 방법으로 명령어를 설정하는 방법이 있습니다.

win-node-env 모듈 설치 및 package.json 활용

win-node-env

노드 환경변수를 인식하게 해주는 모듈입니다.
글로벌 설치해도되지만 같이 작업하는 개발자들을 위해 npm i -D win-node-env 로 package.json에 기록되도록 로컬로 설치하는게 좋을 것 같습니다.

package.json 활용

{
    "scripts": {
        "start": "gulp",
        "build": "NODE_ENV=production gulp build"
    }
}

package.json 파일엔 scripts 라고 정의된 부분이 있습니다.
이 부분에 사용자(custom) 명령어를 등록할 수 있습니다.
위와 같이 작성하고 npm start 를 입력하면 gulp 명령어가 실행됩니다.
그리고 npm run build 명령어를 입력하면 NODE_ENV=production gulp build 명령어가 실행됩니다.

start는 npm start인데 build는 왜 npm run build 일까요?

그건 start는 npm에 기본으로 내장되어있는 명령어이기 때문입니다.
저희가 주로쓰는 npm install 의 install도 내장명령어이기 때문에 이렇게 작성하는 것입니다.

build 는 사용자가 정의한 명령어이기 때문에 run 을 붙여줘야됩니다.

위와 같은 명령어를 사용할 때 이점

변수를 전달해 개발용과 배포용을 구분할 수 있습니다.
위에 보시면 NODE_ENV=production 노드의 환경변수로 production 값을 전달하고 있습니다.
gulp build 명령어를 실행할 때 production 변수를 전달한 것인데요, 이 변수는 다음과 같이 사용할 수 있습니다.

예시

import {src, dest} from 'gulp';
import concat from 'gulp-concat';
import sassGlob from 'gulp-sass-glob';
import sassCompile from 'gulp-sass';
import autoprefixer from 'gulp-autoprefixer';
import cleanCss from 'gulp-clean-css';
import config from '../../config.json';
const sourcemaps = process.env.NODE_ENV === "production" ? false : true;

export const css_libraries = () => {
    return src([
        './node_modules/normalize.css/normalize.css',
    ])
        .pipe(concat(config.libs.scss))
        .pipe(dest(`${config.src}/scss/libs`))
}

export const sass = () => {
    return src(`${config.src}/scss/**/*.{scss, sass}`, {sourcemaps: sourcemaps})
        .pipe(sassGlob())
        .pipe(sassCompile({
            errLogToConsole: true,
            outputStyle: 'compact'
        }).on('error', sassCompile.logError))
        .pipe(autoprefixer({
            overrideBrowserslist: config.autoprefixer,
            remove: false,
            cascade: false
        }))
        .pipe(cleanCss({format: 'keep-breaks'}))
        .pipe(dest(`${config.dist}/css`, {sourcemaps: '.'}))
}

위와같이 작성하면 작업자가 개발할 때(gulp 명령어 또는 npm start 로 실행했을 때)엔 sourcemaps 기능을 키고, 반대로 npm run build 명령어를 실행하면 sourcemaps 기능을 끌 수 있습니다.
배포해야될 파일에 소스맵 기능이 들어가다보면 리얼서버에서 개발자창으로 봤을 때 scss 파일이 보이게 됩니다.
이를 방지할 수 있는 방법입니다.

html 파일과 js 파일도 위 SASS 파일처럼 개발용/배포용을 따로 처리할 수 있습니다.

개발용일 때는 min파일화를 안하다가 배포용일 때 min파일처럼 압축 할수도 있습니다.

LHJ

gulp 명령어 바꾸기 및 실행할 때 환경변수 전달하기