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 플러그인을 설치하도록 합니다.
$ npm install gulp-livereload --save-dev다음 아래의 소스는 gulp-livereload task 를 등록한 gulpfile.js 입니다.
// 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 를 아래와 같이 실행해 봅니다.
$ gulp아마 sass를 사용하고 있다면 sass, css만을 사용한다면 css, 그리고 html, js 파일을 변경하면서 웹 브라우저를 확인하면 자동으로 refresh 가 되지 않을 것입니다.
livereload 를 사용하기 위해서 확장프로그램이 하나 더 필요한데 이를 크롬 브라우저에서 설치하도록 합니다.
위와 같이 확장프로그램을 설치하게 되면 크롬 브라우저 주소창 옆 패널에 다음과 같은 아이콘을 확인하실 수 있습니다.
gulp 를 실행한 후에 이 아이콘을 클릭하여 livereload 를 실행하도록 합니다.
그리고 나서 소스파일을 변경하면 수동적으로 refresh를 하지 않고도 브라우저가 자동 refresh 되는 것을 확인해 보실 수 있을 것입니다.
필자는 webstorm(웹스톰)이라는 편집툴을 사용하고 있습니다. 이 에디터는 로컬서버를 자동으로 실행해주기 때문에 livereload 를 테스트하는데 따로 웹서버를 실행해 주지 않았습니다.
혹여나 livereload 가 동작하지 않는다면 웹 서버를 실행하신 후 확인해 보시기 바랍니다.