Vue.js를 많이 사용한다는 소리를 들었지만 계속 미뤄났던 공부를 다시 조금씩 해볼까하고 보고 있는데..
gulp에서 vue를 돌리는 방법이 많이 나와있지 않은 것 같아 한참을 헤맸었다…
요즘 한국사람들도 블로그를 많이해서 설마 많이 사용하는데 있겠지 계속 검색 검색….안나옴 ㅠㅠ

그래서 구글링으로 검색을 했고 반신반의로 실행을 해보았다. 으하하하 그래서 해결!!!! 뿌듯!

우선 기본 설치 방법은 아래와 같다.
gulp-vue-module사용하여 템플릿을 이용할 수 있다.

설치방법:

$ npm i gulp-vue-module --save-dev

gulp.js:

var gulp      = require('gulp');
var rename    = require('gulp-rename');
var VueModule = require('gulp-vue-module');
 
gulp.task('vue', function() {
    return gulp.src('./vue/**/*.vue')
                .pipe(VueModule({
                    debug : true
                }))
                .pipe(rename({extname : ".js"}))
                .pipe(gulp.dest("./dist"));
});
 
gulp.task('default', ['vue']);

이렇게해서 잘 되면 아랫부분을 더이상 실행 안해도 된다.

gulp-vue-module 설치할때부터 에러가 나기 시작했다. 보이는건 error, fail, warnning일뿐… 모두 영어라 gulp-vue-module를 task에 넣고 gulp를 실행해봤지만 역시 설치가 제대로 되지 않아 gulp조차도 에러가 되었다.

무엇이 문제일까 삽질하고 생각(?)하고 구글링하여 한가지의 방벙을 찾았고, 테스트 결과 제대로 gulp실행도 에러가 없이 작동을 되는 것을 확인하였다.
방법은 아래와 같다.

방법 찾은 곳
여기서 보면 node_module를 지우고, package-lock.json(이 파일이 존재하면 지우는 것이 맞는듯)을 지우고 npm을 다시 설치한다는 둥 했는데 다 할 필요 없이 1번째꺼만 하면 되었다.

1. cmd를 관리자 권한으로 실행한다.

2. node_moule 있는 곳에서 아래와 같이 명령을 치면 된다.

$ npm --add-python-to-path='true' --debug install --global windows-build-tools


나는 D:드라이브에 작업영역을 두었고 node_modules이 Workspace 아래 있어서 위의 캡쳐화면처럼 해당 폴더에서 실행을 한 것이다.


이런식으로 막 나올 것이다…..


다 설치가 되면 All done이라는 메세지와 함께 끝난다.

3. gulp-vue-module 설치

$ npm i gulp-vue-module --save-dev

이제 다시 이것을 실행한다.

그럼 에러없이 잘 설치가 되었고 실행도 잘된다!!