Gulp 사용법 #5 (gulp-livereload)

Setting Up Gulp With LiveReload, and Other Tasks

앞선 포스팅 단계별 gulp 사용법 #4 까지 스크립트, gulp-sass, gulp-sourcemaps 에 대해 알아보았습니다.

이번 글에서는 liveReload 를 다뤄보도록 하겠습니다.

일반적으로 로컬에서 프론트엔드 작업을 할 때 어떤 형태로든 웹서버를 띄워서 결과물을 확인하게 됩니다. 

파일을 수정할 때마다 정적 리소스들을 빌드해준 후에 띄워놓은 웹서버에 접속해서 리프레시를 해서 결과물을 확인하는 것이 일반적인 작업 패턴일 것입니다.

livereload 는 파일 변경(Sass, css, js, html 등...)시에 이를 자동으로 감지해서 브라우저 refresh 를 자동으로 수행할 수 있도록 도와 줄 수 있는 도구입니다.

gulp-livereload

지난 포스팅의 소스를 바탕으로 gulp-livereload 를 추가한 것입니다.

먼저 gulp-livereload 플러그인을 설치하도록 합니다.

Command Line Interface

$ npm install gulp-livereload --save-dev

다음 아래의 소스는 gulp-livereload task 를 등록한 gulpfile.js 입니다.

gulpfile

// gulp 및 패키지 모듈 호출
var gulp        = require('gulp'),
    concat      = require('gulp-concat'),
    uglify      = require('gulp-uglify'),
    rename      = require('gulp-rename'),
    sourcemaps  = require('gulp-sourcemaps'), 
    scss        = require('gulp-sass'), 
    livereload  = require('gulp-livereload'); // livereload 호출


var src   = 'project/src';
var dist  = 'project/dist';
var paths = {
    js : src + '/js/**/*.js',
    scss : src + '/sass/**/*.scss'
};

/**
 * =====================================+
 * @task : HTML livereload 반영
 * =====================================+
 */
gulp.task('html', function () {
    return gulp
        /**
         * html 파일을 읽어오기 위해 경로 지정
         */
        .src('./**/*.html')

        /**
         * html 파일을 읽어온 후 livereload 호출하여 브라우저에 반영
         */
        .pipe(livereload());
});

/**
 * =====================================+
 * @task : Script 병합,압축,min 파일 생성
 * =====================================+
 */
gulp.task('js:combine', function () {
    return gulp
        .src(paths.js)
        .pipe(concat('combined.js'))
        .pipe(gulp.dest(dist+'/js'))
        .pipe(uglify())
        .pipe(rename('combined.min.js'))
        .pipe(gulp.dest(dist+'/js'))

        /**
         * 스크립트 task를 모두 수행한 후 livereload 호출하여 브라우저에 반영
         */
        .pipe(livereload());
});

/**
 * ==============================+
 * @SCSS : SCSS Config(환경설정)
 * ==============================+
 */
var scssOptions = {
    outputStyle : "expanded",
    indentType : "tab",
    indentWidth : 1,
    precision: 6,
    sourceComments: false
};

/**
 * ==================================+
 * @task : SCSS Compile & sourcemaps
 * ==================================+
 */

gulp.task('scss:compile', function () {
    return gulp
        .src(paths.scss)
        .pipe(sourcemaps.init())
        .pipe(scss(scssOptions).on('error', scss.logError))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(dist + '/css'))

        /**
         * SCSS 컴파일을 수행한 후 livereload 호출하여 브라우저에 반영
         */
        .pipe(livereload());
});

/**
 * ==============================+
 * @task : livereload 실행
 * ==============================+
 */
gulp.task('live', ['html', 'js:combine', 'scss:compile'], function () {

    /**
     * livereload.listen() 옵션값으로 기본 경로를 지정
     */
     livereload.listen(
         { basePath: dist }
     );

});

/**
 * ==================================+
 * @task : watch 파일 변경을 감지
 * ==================================+
 */
gulp.task('watch', function () {
    
    gulp.watch('./**/*.html', ['html']); // html task 를 watch 에 등록
    gulp.watch(paths.js, ['js:combine']);
    gulp.watch(paths.scss, ['scss:compile']);

});

gulp.task('default', ['live','watch']);

지난 글을 잘 이해하셨다는 가정하에 소스 설명은 코드 상의 주석으로 대체하도록 하겠습니다.

gulp-livereload options 확인하러가기

참고로 필자의 gulp 수행 후의 테스트 프로젝트 디렉터리 구조는 다음과 같습니다.

기본 테스크인 gulp 를 아래와 같이 실행해 봅니다.

Command Line Interface

$ gulp

아마 sass를 사용하고 있다면 sass, css만을 사용한다면 css, 그리고 html, js 파일을 변경하면서 웹 브라우저를 확인하면 자동으로 refresh 가 되지 않을 것입니다.

livereload 를 사용하기 위해서 확장프로그램이 하나 더 필요한데 이를 크롬 브라우저에서 설치하도록 합니다.

위와 같이 확장프로그램을 설치하게 되면 크롬 브라우저 주소창 옆 패널에 다음과 같은 아이콘을 확인하실 수 있습니다.

gulp 를 실행한 후에 이 아이콘을 클릭하여 livereload 를 실행하도록 합니다.

그리고 나서 소스파일을 변경하면 수동적으로 refresh를 하지 않고도 브라우저가 자동 refresh 되는 것을 확인해 보실 수 있을 것입니다.

필자는 webstorm(웹스톰)이라는 편집툴을 사용하고 있습니다. 이 에디터는 로컬서버를 자동으로 실행해주기 때문에 livereload 를 테스트하는데 따로 웹서버를 실행해 주지 않았습니다.

혹여나 livereload 가 동작하지 않는다면 웹 서버를 실행하신 후 확인해 보시기 바랍니다.

Related Info

1. Gulp #1(걸프 설치 및 개요)
2. Gulp 사용법 #2
3. Gulp 사용법 #3
4. Gulp 사용법 #4 (gulp-sass, gulp-sourcemaps)

Jaehee's WebClub