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

gulp-webserver 는 gulp-connect와 거의 같은 기능을 합니다.

http://recoveryman.tistory.com/292

하지만 한가지가 더 좋았습니다. gulp 명령을 사용했을 시에

진행중인 프로젝트의 웹 페이지를 바로 띄워 줍니다.

브라우저 주소창에 localhost:포트번호 <- 이런거 입력 안해도 되요.

하지만 gulp-connect 는 gulp-connect 만의 장점이 있습니다.

여러 프로젝트를 관리할때에는 gulp-connect가 더 나을 수 있겠구나 싶기도 하더라구요.

1. gulp-webserver 설치 입니다.

경로를 바꿔주는건 이전의 포스팅을 참고하시면 되구요.

npm --save-dev gulp-webserver

이 명령을 입력하면 gulp-webserver 모듈을 설치합니다.

2. gulpfile.js 에 다음과 같이 적어줍니다.

추가된 라인은

4, 49~58 라인입니다.

이건 Sass모듈을 설치해보고 사용해 봤던 분들이라면 잘 아실꺼 같아요

오희려 gulp-connect 작성이 뭔가 조금 생소했었죠. 그리고 더 많은 작성을 요구했습니다. 아무튼...

51번 라인의 해당 경로에 있는 파일에 대해서.

52~56번 라인의 이러한 작업을 수행하겠다. 라는 의미입니다.

var fileinclude = require('gulp-file-include'),
    sass = require("gulp-sass"),
    connect = require('gulp-connect'),
    webserver = require('gulp-webserver'),
    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']);
 
// gulp 서버2
gulp.task('webserver', function(){
    gulp.src('./app/src')
    .pipe(webserver({
        livereload: true,
        open: true,
        port: 8888
    }));
});
gulp.task('default2', ['webserver']);

이건 정말 동영상으로 찍어서 올려야 이걸 왜 쓰는구나 알 텐데...

그리고 이 gulp를 쓰다보니 '웹스톰' 이라는 툴을 한번 사용하고 싶어졌습니다.

그래서 다음번엔 웹스톰을 사용하면서 이 걸프를 사용하고 git으로 소스 배포를 하는 부분을 포스팅 해보려 합니다.

호흥좀....