なにか作る

なにかを作るブログです。

Gruntとgulp、それぞれのライブリロード環境の作り方

Grunt gulp

Grunt を使おうと思っていたら、最近は gulp の方が主流との話を目にする。どうやら gulp の方が記述を簡潔にできて可読性がよいそうな。というわけで、一度 Grunt で書いたものを gulp で書き直してみた。

前提条件

以下のソフトウェアがインストールされていること。

FireFox など他のブラウザでも　LiveReload のプラグインはあるらしい。

ディレクトリ構造

webapp
├─app
└─package.json

webappディレクトリ上でnpm initを実行して package.json を作っておく。

Grunt

npm install grunt grunt-contrib-connect grunt-contrib-watch --save-dev

// Gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
    watch: {
        options: {
            livereload: true
        },
        html: {
            files: ['app/**/*']
        }
    },
    connect: {
        server: {
            options: {
                port: 9000,
                base: 'app'
            }
        }
    }
  });
  grunt.loadNpmTasks('grunt-bower-task');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.registerTask('default', ["connect", "watch"]);
};

gulp

npm install gulp gulp-webserver --save-dev

// gulpfile.js
var gulp = require('gulp');
var webserver = require('gulp-webserver');

gulp.task('webserver', function() {
    gulp.src('app')
    .pipe(webserver({
        port: 9000,
        livereload: true,
    }));
});

gulp.task('default', ['webserver']);

確かに gulp の方が簡潔に書けるかも。でもプラグイン次第ってところはあるかもね。

追記