Gruntの使い方:タスクをまとめて実行

goto_jp 437views 更新:2013年12月12日

前回の続きです。
コマンドプロンプトを package.json のあるプロジェクトフォルダへ移動しておいてください。

module.exports = function(grunt) {
  grunt.initConfig({
    cssmin: {
      compress: {
        files: {
          './css/min.css':['css/reset.css','css/style.css']
        }
      }
    },
    watch: {
      files:['css/*.css'],
      tasks:['cssmin']
    }
  });
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
};

Gruntfile.js が上記のようになっている場合、タスク「cssmin」と「watch」が存在する状態なので、それぞれ下記のコマンドで実行できます。

grunt cssmin
grunt watch

タスクが多くなると面倒ですし、複数人でプロジェクトを共有するときにタスク名も複数人で覚えて実行するのは手間です。
下記のように Gruntfile.js へ registerTask を追記してください。

module.exports = function(grunt) {
  grunt.initConfig({
    cssmin: {
      compress: {
        files: {
          './css/min.css':['css/reset.css','css/style.css']
        }
      }
    },
    watch: {
      files:['css/*.css'],
      tasks:['cssmin']
    }
  });
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');

  //追記
  grunt.registerTask('default', ['cssmin', 'watch']);
};

コマンドプロンプトへ下記のコマンドを打ってください。

grunt

registerTaskに「default」と設定することで、登録したタスクを順に実行させられます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません