LoginSignup
10

More than 5 years have passed since last update.

gulpを使ってjekyllでlivereloadする

Last updated at Posted at 2014-10-17

jekyllを使ってlivereloadしたい

gulpで実行することで静的サーバ+ライブリロード開始
setting部分の変数やwatchするcss, jsのディレクトリ指定は自分の環境に合わせる。

gulp
jekyllの初回ビルド、静的サーバ、ファイルの変更監視(変更があったらjekyll再ビルド)を行っている。

gulpfile.js
var gulp = require('gulp'),
    spawn = require('child_process').spawn,
    webserver = require('gulp-webserver'),
    notifier = require('node-notifier');

var SERVER_PORT = 4000;
var SERVER_ROOT = '_site/'

var Logger = function() {
  var logger = function() {
  };

  var _log = function(message) {
    console.log(message);
  };

  var _notify = function(title, message) {
    notifier.notify({
      title: title,
      message: message
    });
  };

  logger.prototype = {
    log : _log,
    notify : _notify
  };
  return logger;
}();


gulp.task('jekyll', function () {
    var jekyll = spawn('jekyll', ['build']);
    var logger = new Logger();

    jekyll.stderr.on('data', function(data) {
        logger.log("" + data);
        logger.notify('Build Error', data);
    });

    jekyll.on('exit', function (code) {
        var message = code ? 'error' : 'success'
        logger.log('Finished Jekyll Build : ' + message);
    });
});

gulp.task('serve', function() {
  gulp.src(SERVER_ROOT)
    .pipe(webserver({
      livereload: true,
      open: true,
      port: SERVER_PORT
    }));
});

// Watch for changes
gulp.task('watch', function () {
    gulp.watch(['*.html', '*/*.html', '*.md', '*/*.md', '_sass/*.scss', 'stylesheets/*.scss', 'stylesheets/*.css', 'stylesheets/**/*.css', 'javascripts/*.js', '!_site/**', '!_site/*/**'], ['jekyll']);
})


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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10