Browser Sync + Jekyll
서재원 • • jekyll
gulp로 ruby솔루션도 새로고침 할 수 있을까?
몇주 전에 gulp로 html을 새로고침 하는 방법을 포스팅 했습니다만,
정작 이 블로그는 ruby솔루션인 jekyll로 만들기 때문에 적용시킬 수가 없었습니다.
검색 중에 우연히도 BrowserSync로 다른 웹 서버에서 개발중인 웹 페이지의 갱신방법을 찾아 내었기에 소개합니다.
Add live reloading to Jekyll with Gulp and Browsersync
플러그인의 설치법은 위 메모에 잘 나와 있습니다.
참고로 제가 이 블로그를 작성하면서 사용하고 있는 gulffile.js는 다음과 같습니다.
var gulp = require('gulp');
var shell = require('gulp-shell');
var browserSync = require('browser-sync').create();
gulp.task('build', shell.task(['jekyll build']));
// Task for building blog when something changed:
gulp.task('prod', shell.task(['jekyll build --watch --config _config_prod.yml']));
// Or if you don't use bundle:
// gulp.task('build', shell.task(['jekyll build --watch']));
// Task for serving blog with Browsersync
gulp.task('serve', function () {
browserSync.init({server: {baseDir: '_site/'}});
// Reloads page when some of the already built files changed:
gulp.watch('_site/**/*.*').on('change', browserSync.reload);
});
gulp.task('default', ['serve', 'prod']);build 테스크와 prod테스크를 분리해서 운용합니다.
prod에는 별도의 설정파일을 적용시켜 주고요.
IDE가 조금 느려지는 부작용이 있습니다만.
조금 더 정교하게 사용할 수 있게 된다면, java+tomcat+이클립스 조합에서 사용하는
자동 새로고침 기능을 소개할 수 있게 될지도 모르겠네요.