Gulp: 파일 변경 시 브라우저 새로고침하기

발생일: 2015.05.16

키워드: gulp, browser-sync, browserSync, 걸프, 브라우저싱크, livereload, 라이브리로드

문제:

기존엔 그런트를 사용하고 있었고, 파일 변경 시 브라우저를 새로고침할 땐 livereload 모듈을 사용하고 있었다.

걸프에도 동일한 태스크가 있을 텐데, 어떻게 추가하면 될까?

해결책:

browser-sync 모듈을 사용하면 된다.

$ npm install browser-sync --save-dev

빌드 코드를 보면서 설명하는 게 이해하기 쉬울 듯 하다.

var gulp = require('gulp');

var express = require('express');

var browserSync = require('browser-sync'); // 브라우저싱크 모듈

var gutil = require('gulp-util'); // gulp 에서 사용할 수 있는 유틸리티 모듈

var server;

gulp.task('server', function () {

  // 먼저 빌드된 디렉토리를 서빙할 용도로

  // 8000번 포트로 express 를 구동시킨다.

  server = express();

  server.use(express.static('dist'));

  server.listen(8000);

  // browserSync 모듈이 8000번 포트에 프록시를 추가하도록 한다.

  // 이렇게 하면 HTML을 응답할 때, 새로고침을 위한 코드 스니핏을 추가한다.

  browserSync({

    proxy: 'localhost:8000'

  });

});

// 브라우저를 새로고침할 때는 `browserSync.reload()` 메서드를 호출하면 된다.

// 브라우저 새로고침은 개발 중에 서버가 올라와있을 때에만 동작하면 되고,

// 여기에 더해, 다른 태스크의 스트림에 연결해서 동작할 수 있게 하면 훨씬 편리할 것이다.

function reload() {

  if (server) {

    return browserSync.reload({

      stream: true

    });

  }

  return gutil.noop(); // 아무 것도 하지 않는 스트림을 리턴한다.

}

// 이제 `reload()` 함수를 리소스가 변경되었을 때 새로고침하길 원하는 태스크에 추가하면 된다.

// 아래 코드처럼 스트림의 마지막에 파이프로 추가해주면 된다.

gulp.task('less', function () {

  return gulp.src('less/*.less')

    .pipe(less())

    .pipe(gulp.dest('dist/css'))

    .pipe(reload());

});

// 개발 중에 리소스가 새로고침 되길 원한다면 `watch`로 등록해두면 된다.

gulp.task('watch', function () {

  return gulp.watch('less/*.less', ['less']);

});