GitHub에서 Gulp 프로젝트 파일 다운로드하여 실행

GitHub에서 Gulp 프로젝트 파일 다운로드하여 실행

힘들게 만든 Gulp 프로젝트를 다시 만들어야 한다면 짜증부터 나겠죠?
예를 들어, 내 컴퓨터가 아닌 다른 사람의 컴퓨터에서 프로젝트를 수행한다고 가정합시다.
Gulp 프로젝트를 사용하려면, 이 장에서 배운 내용을 참고하여 하나씩 다시 만들어야 할까요?

그럴때 GitHub에 이 장에서 만든 Gulp 프로젝트를 업로드해 두면 언제 어디서나 손쉽게 가져다 사용할 수 있습니다.
필요에 따라 모듈을 추가하거나 버그를 발견하고 수정하는 등 버전도 쉽게 관리할 수 있습니다.
나아가 팀원과 Gulp 프로젝트도 공유할 수 있습니다.
공유 방법은 아주 간단합니다.
Gulp 프로젝트를 업로드한 GitHub 저장소 주소를 알려주면됩니다.
지금부터 실습해 보겠습니다.
아래는 현재 gulpfile.js 상태입니다. gulp (default)명령어만 입력하면 watch 함수까지 같이 실행되도록 수정했습니다.

                    
                        {
                          "lint": true,
                          "concat": true,
                          "uglify": true,
                          "rename": true,
                          "path": {
                            "css": {
                              "src": [
                                "src/css/**/*.css",
                                "src/css/style.css"
                              ],
                              "dest": "dist/css/",
                              "filename": "style.css"
                            },
                            "js": {
                              "src": "src/js/libs/**/*.js",
                              "dest": "dist/",
                              "filename": "DOMlibrary.js"
                            }
                          }
                        }

                    
                        const {src, dest, watch, series, parallel} = require('gulp'),
                            csslint = require('gulp-csslint'),
                            concatcss = require('gulp-concat-css'),
                            uglifycss = require('gulp-uglifycss'),
                            stylish = require('jshint-stylish'),
                            jshint = require('gulp-jshint'),
                            uglify = require('gulp-uglify'),
                            concat = require('gulp-concat'),
                            rename = require('gulp-rename'),
                            gulpif = require('gulp-if'),
                            del = require('del'),
                            config = require('./config.json');

                        // 파일 삭제
                        function clean() {
                            return del([config.path.js.dest + '*']);
                        }

                        // NPM 설치 모듈 : gulp-csslint, gulp-concat-css, gulp-uglifycss
                        // CSS 문법 검사 > 병합 > 압축
                        function styles() {
                            return src(config.path.css.src)
                                .pipe(gulpif(config.lint, csslint({
                                    'import': false
                                })))
                                .pipe(gulpif(config.lint, csslint.formatter()))
                                .pipe(gulpif(config.concat, concatcss(config.path.css.filename)))
                                .pipe(gulpif(config.rename, dest(config.path.css.dest)))
                                .pipe(gulpif(config.uglify, uglifycss()))
                                .pipe(gulpif(config.rename, rename({
                                    suffix: '.min'
                                })))
                                .pipe(dest(config.path.css.dest))
                        }

                        // JS 문법 검사
                        function jsHint() {
                            return src(config.path.js.src)
                                .pipe(jshint())
                                .pipe(jshint.reporter(stylish));
                        }

                        // JS 병합
                        function jsConcat() {
                            return src(config.path.js.src)
                                .pipe(concat(config.path.js.filename))
                                .pipe(dest(config.path.js.dest));
                        }

                        // JS 압축
                        function jsUglify() {
                            return src(config.path.js.dest + config.path.js.filename)
                                .pipe(uglify())
                                .pipe(rename({suffix: '.min'}))
                                .pipe(dest(config.path.js.dest));
                        }

                        // 지속적 관찰(Watch) 업무 정의
                        function fileWatch() {
                            watch(config.path.css.src, series(clean, styles));
                            watch(config.path.js.src, series(clean, series(jsHint, jsConcat, jsUglify)));
                        }

                        // Gulp.task()를 사용해 기본(Default) 테스크 정의
                        exports.default = series(clean, parallel(styles, series(jsHint, jsConcat, jsUglify, fileWatch)));

GitHub 저장소를 clone합니다. git clone (저장소주소)
clone한 저장소엔 [node_modules] 디렉터리가 없습니다. (.gitignore파일에 용량이 크고 굳이 업로드할 필요가 없는 node_modules는 제외했기 때문입니다.)
Git Bash 창에 gulp를 실행시키면 오류가 납니다. 이는 gulp 모듈이 설치가 안되었기 때문입니다.
이 문제는 Gulp를 포함하여 개발 과정에 필요한 모듈을 프로젝트 디렉터리에 로컬 설치해야 해결할 수 있습니다.
devDependencies에 명시된 개발 모듈을 모두 다운로드합니다. 다운로드가 끝나면 [node_modules] 디렉터리가 생성됩니다.
이제 개발 과정에 필요한 모듈이 모두 준비 되었으니 오류 메시지 없이 gulp 명령어를 실행할 수 있습니다.
gulp 명령어를 실행하면 다음처럼 clean, styles, scripts, watch 순서로 업무가 실행됩니다.
작성한 gulp 프로젝트 업무 프로세스 순서대로 [src] 디렉터리에 있는 CSS, 자바스크립트 파일을 열어 수정한 후 저장됩니다.
자동으로 [dist] 디렉터리에 결과물이 생성됩니다.

깨알 Tip
필자가 만든 [src] 디렉터리의 예제 파일을 모두 삭제한 후 직접 생성한 파일을 넣으면 Gulp는 지속적으로 변경 내용을 관찰하기 때문에
자동으로 [dist] 디렉터리에 결과물을 만듭니다.