npm, bower, gulp 를 이용한 웹 클라이언트 개발 환경 구축

서론

포스트를 작성해놓고 다른 소스들을 보다 보니 뭔가 문제가 많은 포스트네요.
포스트를 내릴까 하다가 어차피 제가 나중에 보려고 정리하는 포스트들인 것을 생각해서 일단 놔두려고 합니다.
개발 환경 관련 좀 더 나은 소스를 원하시는 분들은 https://github.com/angular/angular-seed 의 소스를 확인하시는 것이 더 현명한 선택이지 싶습니다. (2016/07/07)

그동안 Spring-cloud를 기반으로 마이크로서비스 아키텍처 구성과 관련된 포스트를 작성하다가 왜 갑자기 웹 클라이언트 개발 환경 구축인가 뜬금없다고 생각하시는 분들이 많을 것 같습니다.
아직 마이크로서비스 아키텍처도 정리할 것들이 많이 남았는데, 갑자기 개인적으로 진행하던 프로젝트에서 목업을 만들어야 할 일이 발생했습니다. 그래서 목업이지만 그냥 생각 없이 만들지 말고 새로운 환경구성을 해보자 하는 생각으로 이 포스트의 내용이 시작되었습니다. 오래 생각할 시간이 없어서 급히 이리저리 알아보니 npm, bower, gulp를 이용해서 만들면 뭔가 괜찮은 구조가 나올 것 같다는 생각을 하게 되었습니다.
뭐 제가 정리하는 포스트 대부분이 그렇지만 이번 경우에는 특히나 짧은 시간에 공부하고 구성하고 정리하다 보니 약간은 이상한 구조가 나와버렸네요. 그래도 참고가 되면 좋겠습니다.

전체 소스는 언제나 처럼 Github 에 올려놓았습니다.
Github Repository : https://github.com/roadkh/blog-npm

사전준비사항

포스트가 npm, bower, gulp를 이용해야 하니 우선 설치를 해야 합니다. 간단하게 설명을 했습니다만, 자세한 사항은 각 항목의 링크를 클릭하세요. 각 모듈의 링크에서 보시고 환경에 맞게 설치를 먼저 진행해 주세요.

node.js : npm, bower, gulp 모두 node.js를 기반으로 합니다. 우선 node.js가 먼저 설치가 되어있어야만 합니다. 아래 제 환경을 보시면 node.js 6.x 대를 설치했습니다만, 이 포스트를 보시고 설치하실 분들은 4.x 대를 설치하시기 바랍니다. 이 포스트를 작성하는 시점(2016-06-28)에서는 아직 node.js 6.x는 안정화 버전은 아닌 것 같네요. 전 몇 가지 해 볼 일이 있어서 이전에 6.x 대를 설치했던 것을 그대로 사용했습니다.

Binary 다운로드를 통한 설치 : https://nodejs.org/en/download/
운영체제별 Package Manger를 통한 설치 : https://nodejs.org/en/download/package-manager/

npm : node.js 설치하시고 나면 npm 은 설치가 되어있습니다. 하지만, 혹시 npm 버전이 업데이트가 있을지도 모르니 npm install npm -g 한번 해 주세요. 저도 이 포스트 정리하면서 한번 해 보니 버전이 3.9.3 에서 3.9.5 로 올라가네요. npm install 할 때 -g 옵션을 주는 경우에는 시스템에 따라 sudo 를 이용해야 할 수도 있습니다. (자세한 사항은 https://docs.npmjs.com/getting-started/installing-node 참고)
bower : npm install bower -g 를 이용하여 설치합니다. (https://bower.io/ 참고)
gulp : npm install gulp -g 를 이용하여 설치합니다. (https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md 의 설명과 조금 다릅니다만 저는 위 방법을 이용해서 설치했습니다.)

bower와 gulp는 나중에 npm을 통해서 로컬에 의존성 설치를 진행하게 됩니다. Global 옵션으로 설치를 꼭 해야 하는지는 모르겠습니다. 제 로컬 환경에는 역시나 먼저 설치를 했었어서... 지우고 확인을 해야 하겠지만 귀차니즘 때문에.. 컥!! 죄송합니다. 궁금하신 분들은 위 npm 만 설치하고 아래 내용을 진행해 보시기 바랍니다. 정말 죄송합니다.

블로그 작성에 사용한 환경

역시나 제 개발 환경은 변화가 없습니다. 다만, 이번엔 자바 관련 환경은 필요가 없으니 node.js 관련 환경만 정리했습니다.

Ubuntu 14.04 LTS
Node : 6.2.1
Npm : 3.9.5
Bower : 1.7.9
Gulp : CLI 3.9.1, Local 3.9.1

각 모듈의 역할

우선은 제가 구성하는 환경에서 각 모듈이 갖는 역할을 먼저 정리해 볼까 합니다.

Npm

Npm의 역할은 주로 개발을 위한 인프라 아키텍처에 대해 관리를 하는 역할을 합니다. 설명하기 좀 힘들어서 간단히 예를 들면, 개발 중 간단히 npm start 를 통해서 웹서버 하나를 구동해서 테스트를 진행하려 합니다. 이럴 때 npm 의 의존성 관리를 이용해서 http-server 를 설치해서 사용하게 됩니다. 이 외에도 gulp 라던가 bower와 각종 플러그인 패키지들을 의존성 관리해주는 역할을 합니다. angular-seed project의 경우에는 unit test 라던가 integration test 등도 npm을 통해서 할 수 있게 되어있습니다. (구조가 아주 좋습니다. angularjs 로 프로젝트 하시려는 분들에게 좋은 참고자료입니다.)

Bower

제가 볼 때 이 구성의 핵심입니다. 실제 프로젝트에서 사용할 자바스크립트 모듈들의 의존성을 관리하는 역할을 합니다. 이 포스트에서는 angular와 angular-material을 중심으로 의존성을 추가하게 됩니다.

Gulp

뭐라고 설명을 해야 할까요? 빌드툴의 역할을 합니다. 자바스크립트 파일과 CSS 파일을 minify 한다거나 파일을 카피한다거나 다양한 역할을 진행하게 됩니다.

프로젝트 디렉터리 구조 및 파일 구성

포스트에 정리된 내용으로 진행하면 최종적으로 아래와 같은 디렉터리 구조와 파일들을 가지게 됩니다.

위 이미지에서 상단의 붉은 박스 안의 디렉터리들은 따로 만든 디렉터리가 아니라 작업 중에 npm 과 bower, gulp 가 만들게 되는 디렉터리입니다. 일부는 git이나 intellij가 만들어낸 것들이라 혼란을 피하고자 지웠습니다.

이제 적당한 디렉터리를 하나 만들고 그 디렉터리 내에서 작업을 시작하겠습니다.

package.json 의 생성

package.json 파일을 작성하는 방법은 두 가지 입니다. 직접 vi 등으로 작성하는 방법과 npm init 을 통해 작성하는 방법입니다. package.json 의 경우 필수 항목은 두 개라고 합니다. 그 필수 항목은 "name"과 "version" 입니다.

npm init 을 하시면 하나씩 질문이 나오면서 진행을 하게 됩니다.

첫 질문은 name입니다. 보통은 기본값으로 디렉터리명이 사용되는데 다만 이 이름에는 몇 가지 제약이 있습니다. 모두 소문자여야 하고 공백이 없는 하나의 단어여야 하며 특수문자는 dash(-)와 underscore(_)만 허용됩니다. 저는 blog-npm 으로 만들었습니다.
다음은 version입니다. 기본값으로 1.0.0 이 나옵니다. 나중에 바꿀 수도 있으니 전 엔터로 진행했습니다.
description을 물어봅니다. 입력 안 해도 됩니다만 간단히 적어봅니다.
이 뒤로 별로 중요하지 않은 질문들이 계속됩니다. 그냥 엔터 쳐서 모두 진행했습니다.
license에 대한 질문을 마지막으로 Is this ok? 라고 물어봅니다. yes 치고 마무리하겠습니다.

이제 디렉터리를 보면 package.json 이 만들어졌습니다. 나중에 bower에서 사용할 자바스크립트 라이브러리 받아보시면 그곳에도 대부분 package.json 이 있는데 열어보시면 지금 만드신 내용과 크게 다르지 않을 겁니다.

여기서 npm install 이라고 쳐서 우선 package.json을 기반으로 npm 이 환경을 구성하게 하겠습니다.

node_modules 라는 디렉터리가 생기는데 현재는 비어있을 겁니다. 다음에 의존성을 추가하기 시작하면 해당 디렉터리에 관련 모듈들이 이 디렉터리에 들어가게 됩니다.

package.json 에 의존성 추가하기

package.json에 의존성을 추가하는 것도 두 가지 방법이 있습니다.

직접 package.json에 수동으로 넣은 다음 npm install 을 실행.
npm install --save(or --save-dev) <package name> 을 통한 추가.

저는 여기서 후자를 선택하겠습니다.

우선 bower와 gulp를 의존성 추가해야겠네요.

npm install --save-dev bower 
npm install --save-dev gulp

위 명령을 보면 --save-dev를 줬는데 이 옵션은 서버용 node 프로그램을 개발하시는 분들에는 중요할지 모르겠으나 현재까지 제가 파악한 바로는 웹 개발에서는 큰 영향은 없어 보입니다. 그래도 일단 --save-dev 옵션을 주고 추가합시다. package.json 파일을 열어보면 아래와 같이 내용이 바뀌었을 것입니다.

{
  "name": "blog-npm",
  "version": "1.0.0",
  "description": "Npm + Bower + Gulp for client web development",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "road <roadkh@gmail.com>",
  "license": "ISC",
  "devDependencies": {
    "bower": "^1.7.9",
    "gulp": "^3.9.1"
  }
}

보시면 버전 표시 부분이 조금 신기하죠? Semantic Versioning(Semver)라고 하는 것입니다. 짧게 설명하는 데는 워낙 능력이 없어서 잘못하면 너무 길어질 것 같으니 [여기]를 클릭하셔서 확인해 주세요.

bower.json 파일과 .bowerrc 파일 추가

bower.json 파일을 만드는 방법도 두 가지 입니다.

직접 bower.json 파일을 생성하고 내용을 입력
bower init 명령을 통한 생성 : 앞에서 npm init 을 통해서 했던 작업과 비슷합니다. 대부분 package.json의 내용을 기본값으로 물어봅니다. 일단 default 값을 보시고 엔터만으로도 bower.json 파일을 생성하실 수 있습니다. 그 후에 수정하시면 되니 편하게 이렇게 만드세요.

위 두 번째 방법으로 생성하시면 아래와 같은 모양이 됩니다.

bower.json의 spec은 [여기]서 확인하실 수 있습니다.

{
  "name": "blog-npm",
  "description": "Npm + Bower + Gulp for client web development",
  "main": "index.js",
  "authors": [
    "road <roadkh@gmail.com>"
  ],
  "license": "ISC",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

.bowerrc 파일은 bower 가 실행될 때 항상 먼저 실행이 되는 기본적이 내용을 정의하게 됩니다.
리눅스 계열이나 애플의 OS X 를 사용하셨던 분들은 이름이 좀 친숙할 것 같네요. .bashrc 라던가 하는 것과 비슷한 역할을 하게 됩니다. .bowerrc 파일에 대해 궁금하신 분들은 [여기]를 클릭하시면 자세한 설명이 있습니다. .bowerrc 파일에는 단순히 bower 에 의해 관리되는 의존성 파일들을 다운로드 할 디렉터리만 설정하도록 하겠습니다. 위 링크를 보시면 .bowerrc에 설정할 수 있는 다른 정보들도 확인하실 수 있어요.

{
  "directory": "bower_components"
}

사실 위의 내용이라면 구지 설정 안하셔도 됩니다. 원래 저게 기본값입니다. (github의 소스에는 .bowerrc 파일이 없습니다)

bower를 이용해 의존성 추가하기

bower는 실제로 프로그램에서 사용할 모듈들에 대한 의존성을 관리하기 위해서 사용한다고 했습니다. 실제로 bower는 더 많은 기능을 가지고 있습니다만, 저는 그런 용도로만 사용하고자 합니다.
우선 샘플 프로젝트에서 사용할 가장 중요한 의존성은 angular-material 패키지입니다.
아래 명령어를 통해서 angular-material 패키지를 추가하도록 하겠습니다.

bower install --save angaulr-material

위 명령을 실행하면 bower_components 라는 디렉터리가 생겼을 겁니다. 안에 내용을 보시면 전 angular-material 만 추가했는데 여러 개의 angular 모듈이 함께 다운로드 되어있을 것입니다. 의존성이 있는 관련 패키지들이 함께 다운로드 됩니다.

이왕 한 것 angular-loader, angular-route 도 위 명령어를 통해 추가해 보았습니다.
여기까지 작업한 bower.json은 아래와 같은 모양이 됩니다.

{
  "name": "blog-npm",
  "description": "Npm + Bower + Gulp for client web development",
  "main": "index.js",
  "authors": [
    "road <roadkh@gmail.com>"
  ],
  "license": "ISC",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular-material": "^1.0.9",
    "angular-loader": "^1.5.7",
    "angular-route": "^1.5.7"
  }
}

gulp 설정 시작하기

이제 드디어 gulp 설정을 시작하기 전에 gulp 가 할 일을 잠시 정리해 보겠습니다.

bower_components 하위에 있는 모듈들을 디렉터리 구조를 유지하면서 그 안에 있는 js와 css를 build/assets/ext 디렉터리로 복사합니다. 이때 해당 모듈의 minify 된 js와 css가 있으면 해당 js와 css를 복사하고 없으면 일반 js와 css를 복사합니다.
src/js 하위에 있는 자바스크립트 파일을 minify하고 파일명을 .min.js 형식으로 변경한 후에 build/assets/js 에 디렉터리구조를 유지하면서 복사합니다.
src/css 하위에 있는 css 파일을 읽어서 지정된 브라우저 설정에 맞는 처리를 진행하고 minify 한 후에 파일명을 .min.css 형식으로 변경하여 build/assets/css 에 디렉터리 구조를 유지하면서 복사합니다.
src/html 에 있는 html 파일을 디렉터리 구조를 유지하면서 build/ 폴더로 복사합니다.
목업 작업 중 위에 지정한 작업이 계속해서 이루어져서 일일이 명령어를 치지 않도록 합니다.
마지막으로 build 디렉터리를 지우는 명령도 있었으면 합니다.

이에 따라 필요한 모듈들이 있는데 원래는 하나씩 찾아서 작업 중 추가를 하게 됩니다만, 포스트에서는 한꺼번에 설정해서 의존성을 맺도록 하겠습니다. 의존성 추가는 npm install --save-dev 명령을 이용하도록 합니다. 추가할 모듈은 아래와 같습니다.

gulp-load-plugins : 지금부터 설치할 모든 npm 중 gulp 관련 모듈 패키지들을 쉽게 사용.
bower-main : bower_components 폴더의 파일에 대한 처리를 위해 추가.
gulp-rename : 파일명을 바꾸기 위해 추가.
gulp-uglify : 자바스크립트의 minify 처리를 위해 추가.
gulp-autoprefixer : 지원하고자 하는 브라우저의 정보를 설정해서 적절한 처리를 자동으로 진행하게 하는 모듈 패키지. https://www.npmjs.com/package/gulp-autoprefixer 의 내용을 참고.
gulp-uglifycss : CSS 파일의 minify 처리를 위해 추가.
gulp-watch : 작업중에 작업된 내용을 실시간으로 gulp 에 설정한 내용이 실행되도록 하기 위해 추가.
del : build 디렉터리를 지우는 clean task 를 만들기 위해 추가.

자 이제 package.json 파일의 devDependencies 는 아래와 같은 모양이 됩니다.

  "devDependencies": {
    "bower": "^1.7.9",
    "bower-main": "^0.2.14",
    "gulp": "^3.9.1",

    "gulp-autoprefixer": "^3.1.0",
    "gulp-load-plugins": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^1.5.4",
    "gulp-uglifycss": "^1.0.6",
    "gulp-watch": "^4.3.8"
  }

이제 gulpfile.js 를 만들고 필요한 task 들을 정의하는 일들만 남았습니다.
사실 단계로 정리를 할까 했었습니다만, 직접 소스를 보는 것이 더 빠르겠기에 소스의 주석으로 대신 정리를 할까 합니다.

/* gulp 모듈을 import 합니다. 가장 기본이고 필수입니다 */
var gulp = require('gulp');

/* 작업을 진행할 source 디렉터리와 결과물을 보관할 build 디렉터리를 지정합니다. */
var src = './src/';
var dest = './build/';

/* 
    npm 에 추가한 모듈들을 일일이 require하지 않고 사용하기 위한 처리입니다.
    예를 들어 bower-main의 경우는 plugins.bowerMain() 식으로 사용이 가능합니다. 
    gulp-로 시작하는 모듈들의 경우는 gulp-를 뺀 나머지로 사용가능합니다.
*/
var plugins = require('gulp-load-plugins')({
    pattern: ['gulp-*', 'gulp.*', 'bower-main'],
    replaceString: /\bgulp[\-.]/
});

// Minify & copy JS
/* 
    자바스크립트에 대한 처리를 진행합니다. 
    {base: ''} 옵션을 넣은 이유는 이렇게 해야 디렉터리 구조를 유지한 상태로 복사합니다.
    그렇지 않을 경우에는 build 디렉터리에 그대로 파일을 복사합니다. 
    혹시 concat모듈을 이용해서 하나의 거대 파일로 합칠 경우에는 위 옵션은 필요없습니다.
    처리의 내용은 src/js/ 하위의 모든 js 파일을 읽어서 이름을 .min.js 로 변경하고 
    minify를 진행한 후에 build/assets/js 로 복사하라는 내용입니다.
*/ 
function processJS() {
    return gulp.src(src + 'js/**/*.js', {base: src + 'js/'})
        .pipe(plugins.rename({suffix: '.min'}))
        .pipe(plugins.uglify())
        .pipe(gulp.dest(dest + 'assets/js'));
}
// gulp에 scripts라는 task로 지정합니다.
gulp.task('scripts', processJS);


// Minify & copy CSS
/*
    CSS 파일에 대한 처리를 진행합니다. 자바스크립트와 거의 동일한데 autoprefixer 부분만 특징적입니다.
    아래 설정은 모든 브라우저의 최근 2개버전을 처리하기 위한 css 처리를 하라는 내용입니다.
*/
function processCss() {
    return gulp.src(src + 'css/**/*.css', {base: src + 'css/'})
        .pipe(plugins.autoprefixer({
            // browsers: ['last 2 Chrome versions', 'last 2 Firefox versions', 'last 2 Android versions', 'last 2 ChromeAndroid versions'],
            browsers: ['last 2 versions'],
            cascade: true
        }))
        .pipe(plugins.rename({suffix: '.min'}))
        .pipe(plugins.uglifycss())
        .pipe(gulp.dest(dest + 'assets/css'));
}
// gulp에 css라는 task로 지정합니다.
gulp.task('css', processCss);


// Copy HTML
/*
    HTML 파일들을 복사합니다.
*/
function processHtml() {
    return gulp.src(src + 'html/**/*.html', {base: src + 'html/'})
        .pipe(gulp.dest(dest));
}
gulp.task('html', processHtml);


// Copy Vendor JSS & CSS from bower_components
/*
    bower_components 디렉터리에 있는 js와 css 들을 복사합니다.
    bower_main 모듈의 처리 결과는 minified, minifiedNotFound, normal 있는데 내용은
    minified : minify 처리된 파일
    normal : 일반 파일
    minifiedNotFound :　minify 처리된 파일이 없는 파일들의 일반 파일
    입니다.
    각 파일들의 파일명 리스트를 모두 합쳐서 디렉터리 구조를 유지시키면서 assets/ext 로 복사합니다.
*/
function processExternal() {
    var scriptBowerMain = plugins.bowerMain('js', 'min.js');
    var cssBowerMain = plugins.bowerMain('css', 'min.css');
    var mapBowerMain = plugins.bowerMain('js', 'min.js.map');
    return gulp.src(scriptBowerMain.minified.concat(scriptBowerMain.minifiedNotFound).concat(cssBowerMain.minified).concat(cssBowerMain.minifiedNotFound).concat(mapBowerMain.minified), {base: './bower_components'})
        .pipe(gulp.dest(dest + 'assets/ext'));
}
// gulp 에 external 이라는 task　로 지정합니다.
gulp.task('external', processExternal);

// Watch for changes in files
/*
    실시간 감시를 위한 task 등록입니다.
    지정한 디렉터리를 감시하고 있다가 추가/삭제/변경 등이 발생할 경우에는 지정한 함수를 호출합니다.
    원래 gulp.watch 가 있는데 이 경우는 변경사항은 감지가 되지만 추가/삭제는 감지가 되지 않습니다.
    그래서 gulp-watch 모듈을 이용했습니다.
*/
gulp.task('watch', function () {
    plugins.watch(src + 'js/**/*.js', processJS);
    plugins.watch(src + 'css/**/*.css', processCss);
    plugins.watch(src + 'html/**/*', processHtml);
    plugins.watch('./bower_components/**/*', processExternal);
});

// Default Task 입니다.
gulp.task('default', ['scripts', 'css', 'html', 'external', 'watch']);

/**
 * clean build.
 * 원래는 default task에 넣어서 gulp가 시작될 때 깨끗하게 build 디렉터리를 비우게 만들고 싶었는데,
 * 오류가 발생해서 잘 안됩니다. 뭔가 방법이 있을텐데 쉽게 찾아지지는 않네요.
 */
gulp.task('clean', function(cb) {
    plugins.del(['build/**'], cb);
});

이제 거의 마지막까지 왔습니다.

마지막으로 npm 으로 HTTP 서버를 띄워서 작업을 쉽게 할 수 있도록 하겠습니다.

npm install --save-dev http-server

package.json의 scripts 부분에 아래와 같은 내용을 추가하겠습니다.
한 가지 더 추가를 하는데, 이것은 npm install 명령을 이용해서 최초 구성을 할 때 bower install 명령이 함께 실행되도록 하려는 내용입니다.
위 두 가지 내용을 scripts 의 postinstall 과 start 속성으로 추가합니다.

...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "postinstall": "bower install",
    "start": "http-server -a localhost -p 8000 -c-1 ./build"
  },
...

이제 작업은 완료되었습니다.
확인을 해야 되겠지요? 현재 작업한 내용이 없으므로 package.json, bower.json, gulpfile.js 파일과 혹시 만드셨다면 .bowerrc 파일까지만 남기고 모든 내용을 삭제한 후에 npm install 을 실행합니다.
bower_componets와 node_modules 디렉터리가 만들어지고 의존성 파일들을 다운로드 받았는지 한번 확인해 보면 됩니다. 그리고 gulp 명령을 실행해서 별다른 오류 메시지 없이 대기하고 있는지 확인하면 작업 환경은 완료입니다.
여기서 일단 gulp 는 Ctrl+c 등으로 일단 종료하시고 src 디렉터리를 만드신 후에 그 하위에 js, css, html 디렉터리를 만듭니다. 다시 gulp 를 실행하시고 작업을 진행하면서 처리가 된 파일들이 build 디렉터리 안으로 적절히 이동되는지 확인하면 완료입니다.

혹시 몰라서 sample 디렉터리 안에 angular-seed 프로젝트의 샘플 내용을 조금 수정해서 넣어놨습니다. 해당 디렉터리 안의 내용을 한꺼번에 복사하시면 잘되는 경우도 있고 오류가 발생하는 경우도 있습니다. 제 경우에는 약 20~30% 정도 확률로 오류가 발생하더군요.
그리고 npm start 를 이용해서 http-server 를 실행하고 브라우저에서 http://localhost:8000 으로 접속해서 아래와 같은 화면이 뜬다면 모든 설정은 일단 완성이 된 것입니다.

제가 작업한 gulp.js 파일에는 많은 부족함이 있습니다. 해당 내용은 아래와 같습니다.

디렉터리만 추가된 경우에는 동작하지 않습니다. (마치 Git 처럼 말이죠)
파일이나 디렉터리가 삭제된 경우에도 build 디렉터리에는 반영되지 않습니다.
동시에 여러 개의 디렉터리와 파일들을 복사하는 경우에는 오류가 발생하기도 합니다.
제 우분투에서는 디렉터리 추가도 파일관리자에서 하면 오류가 발생합니다.
작업 중 오류가 발생하면서 gulp 프로세스가 종료되는 경우가 있습니다. 만약 작업물이 반영되지 않는 경우가 있다면 gulp의 watch 프로세스가 종료되지 않았는지 확인해 보세요.

결론

역시나 쉬운 내용을 길게 설명하는 데는 탁월한 능력을 갖추고 있는 것 같습니다.

마지막 부분에 적었듯이 많은 부족한 부분이 있는 내용입니다.
그냥 NPM + BOWER + GULP 를 이용하는 경우에 어떻게 구성이 되는구나! 정도의 설명으로 봐주시기 바랍니다.

이제 열심히 angular-material 을 이용해서 목업 작업을 진행해야겠네요. 휴...

황성호2018. 7. 13. 오전 1:53:00
ㄳ합니다~ 쉬운내용인데..
초보라;
답글삭제
답글

댓글 추가

road..道..みち

이 블로그 검색