[걸프(Gulp)] 4. gulp-connect (웹서버 띄우기 + 자동 새로고침)

gulp-connect 는 웹서버를 띄우고 문서를 수정하고(예 : HTML) 저장할때 띄워져 있는 웹 페이지를 새로고침 할 수 있는 기능을 가지고 있습니다.

쉽게 말해서 브라켓의 실시간 미리보기 하는 동작을 수행할 수 있습니다.

누가 저한테 이걸 알려 준 것이 아니기 때문에 여러가지 옵션들을 유연하게 사용하는 법에 대해선 고민해보려 합니다.

일단 이 gulp-connect 설치와 사용 방법에 대해서 글을 작성하겠습니다.

 

 

1. 설치는 다음과 같습니다. 다만, 저는 경로를 D드라이브에 gulp를 셋팅하면서 사용하기에 드라이브를 이동하였습니다.

C드라이브에 사용하신다면 드라이브 경로 변경은 하지 않으셔도 됩니다.

그 후, D드라이브 에 있는 gulpSetting 라는 폴더로 이동하였습니다. 그 자리에서

npm install --save-dev gulp-connect

를 입력하게 되면 gulp-connect 를 사용하게 됩니다.

http://programmingsummaries.tistory.com/356

--save-dev 플래그를 추가하면 디펜던시들을 devDependency로써만 설치하게 되는데, 이 옵션을 주는 이유는 Gulp와 관련 디펜던시들은 어플리케이션 개발 과정까지만 필요하기 때문입니다. Gulp의 플러그인들을 설치할 때에도 같은 --save-dev 옵션을 주어야 합니다.

스크린샷에는 오타가 있습니다. 근데 설치하는데 에러가 안떳네요. 스샷처럼 설치하지 마시고. 저 파란색 글씨처럼 gulp-connect를 설치하시기 바랍니다.

 

 

 

 

 

 

 

2. 일단 root 라는 경로를 어떻게 하는게 지금 나한테 개이득일까 하다가 저는 이렇게 설정했습니다.

아래 스샷에 보이는 D:\gulpSetting\app\src 를 root 경로로 만들도록 하려합니다.

 

 

 

 

 

 

 

3. gulpfile.js 에 다음과 같이 작성하였습니다.

gulpfile.js 는 Gulp포스팅을 저와 처음부터 함께 따라서 해보셨다면 어느 위치에다가 만드셨는지 아시리라 생각합니다.

아무튼 이전에 있던부분 에서 제가 추가한 라인은 이렇게 됩니다.

3, 27~46

3번 라인은 node js 의 require 로 gulp-connect 라는 모듈을 가져옵니다.

28~34 번 라인은 connect 에 대한 task를 작성하는데 처음보는 부분이 있을꺼예요.

3번에서 모듈을 가져온 변수를 활용해서 connect에 사용 가능한 server에 대해 옵션값등을 넣을 수 있습니다.

(이건 저도 가이드 페이지를 보면서 따라해본 부분이라 나름대로 해석해봤습니다.)

해당 프로젝트의 서버에서 최상위 root 경로는 어디로 할지, 자동 새로고침 의 유무, 포트번호 등을 설정해봤습니다.

또 이것 외에도 여러가지 옵션이 있습니다.

36~39 번 라인은 자동으로 새로고침해 주는 부분에 있어서 어느 경로의 어떤 파일을 대상으로 할지, 그리고 어떤 작업을 수행할지를 작성합니다.

41~44 번 라인은 Sass를 gulp로 셋팅해 주면서 함께 해 봤었죠. 자동으로 컴파일 시켜줬던거로 기억하는데 watch라는 메서드는 자동으로 특정 리소스의 변화를 감지하고 해당되는 task를 자동으로 연결해줍니다.

var fileinclude = require('gulp-file-include'),
    sass = require("gulp-sass"),
    connect = require('gulp-connect'),
    gulp = require('gulp');
 
// html파일 인클루드
gulp.task('fileinclude', function() {
    gulp.src(['./app/src/index.html', './app/src/sub/*.html'], {base : './'})
    .pipe(fileinclude({
        prefix: '@@',
        basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});
 
// Sass
gulp.task('sass', function(){
    return gulp.src('./app/scssfile/*.scss')
    .pipe(sass({outputStyle : 'compact'}).on('error', sass.logError))
    .pipe(gulp.dest('./app/src/css'));
});
 
gulp.task('sass:watch', function(){
    gulp.watch('./app/scssfile/*.scss', ['sass']);
});
 
// gulp 서버
gulp.task('connect', function(){
    connect.server({
        root: './app/src',
        livereload: true,
        port: 8001
    });
});
 
gulp.task('html', function(){
    gulp.src('./app/src/*.html')
    .pipe(connect.reload());
});
 
gulp.task('watch', function(){
    gulp.watch(['./app/src/*.html'], ['html']); // html 리로드
    gulp.watch(['./app/scssfile/*.scss'], ['sass']); // sass 자동 컴파일
});
 
gulp.task('default', ['connect', 'watch']);

 

 

 

 

 

 

 

4. 그럼 바로 위엣 작업들을 cmd 에서 실행해 봤습니다.

gulp default

이걸 입력하게 되면 html에 어떤 변화가 일어나면 열려있는 localhost:포트넘버/문서이름.html 에 반영이 됩니다.

이름은 46번 라인을 잘 보시면 아시겠지만 default 로 지정하지 않고 맘에 드는 이름으로 하셔도 됩니다.

저는 index.html 에 실험을 해봤는데 아주 잘 됩니다. 이걸 동영상으로 찍고 싶은데 귀찮아서 못찍겠어요.

아무튼 문서를 저장하는 순간 즉시 반영 됩니다.

브라켓 의 실시간 미리보기 를 하는것 같습니다. 조금 다른 사용 방식이지만요.

 

 

 

 

gulp-connect : https://www.npmjs.com/package/gulp-connect