Gruntを試してみた

2014.08.12

作業の効率化のために、先日はgulp.jsを試してみたのですが、うまく動かせなかった上に期待したほどスピードが速いわけでもなく。そこで、Node.jsのタスクランナーではスタンダードになっているGruntを試してみることにしました（実はRubyのGuardも試してみたんですが、ツールのバージョンの関係でこれもうまく動かせなかったのです）。

• Grunt: The JavaScript Task Runner

とりあえず、やりたかったこと（Wordpressのテーマファイルと.scssファイルを監視して、書き換えたらブラウザを自動リロード）が実現できたのでそこはよし。やはりCompassのコンパイルで時間がかかっているようで、定番の grunt-contrib-compass から grunt-compass-multiple に入れ替えてみたり、grunt-contrib-watch の spawn: false オプションを試してみたり。あまり変わらない感じでしたが、デイジー・デジタル・デザインで使っている.scssファイルでリロードまで5秒弱。まあ我慢できる範囲ではあるかなと。参考までに、Gruntfile.jsだけ載せておきます。

module.exports = function(grunt) {
  grunt.initConfig({
    //grunt-contrib-connectの設定
    connect: {
      site: { 
      }
    },
    //grunt-compass-multipleの設定
    compassMultiple: {
      options: {
        config: 'config.rb',
        sassDir: 'sass/'
      },
      common: {},
    },
    //grunt-contrib-watchの設定
    watch: {
      themes: {
        files: ['wp-content/themes/hogehoge/*.php']
      },
      dev: {
        files: ['sass/*.scss'],
        tasks: ['compassMultiple'],
      },
      options: {
        spawn: false,
        livereload: true
      }
    }
  });
  //プラグインの読み込み
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-compass-multiple');

  //デフォルトタスク
  grunt.registerTask('default', ['connect', 'watch']);
};

ライブリロードなんて、ブラウザ再読み込みの手間は殆どかからないんだから…と思っていた時期が私にもありました。が、やってみると想像以上に快適なものです。たしかに環境を作るまでの手間はたいへんです。しかし、ここで投資した手間が先々に何倍かになって返ってくるかもしれません。

ウェブ制作を仕事にする限り、新しい技術を学ぶことから逃れられませんし、Webデザイナーの方もこういったモダンな制作環境に触れてみることは大事だと思います。個人的には、「時代に取り残されるのはイヤだ！」ってのが原動力だったりしますけどね。