Gruntで始めるWeb制作の自動化

Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。

node.jsで開発されており、Sass/CompassやLessなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。

インストール

まずはnode.jsをインストールします。公式サイトでインストーラーが配布されていますので簡単にインストールが可能です。

次にMacではターミナルを開いてgrunt-cliをインストールしましょう。cliとはCommon Language Infrastructureの略でコマンドラインからGruntを利用するためのツールです。

sudo npm install -g grunt-cli

パスワードが聞かれるので入力してください。成功すればgrunt-cliのインストールは完了です。

初期設定

次にGruntの初期設定を行ないます。Gruntはv0.4からプロジェクト単位で設定を行ないます。ターミナルにcd[スペース]と入力してからプロジェクトフォルダをターミナルにドラッグアンドドロップすると次のようなプロジェクトフォルダまでのパスが表示されるのでそのままリターンを押します。

cd /Users/nishihata/Desktop/grunt

今回はデスクトップ上に作成したgruntフォルダをプロジェクトフォルダと見立てて解説を行っていきます。

package.jsonの作成

まず最初にnode.jsのパッケージを管理するpackage.jsonを作成します。ターミナルで以下のコマンドを入力してリターンを押しましょう。

npm init

そうするとターミナルが「name: (grunt) 」といった具合に設定内容の入力を求めてきます。基本的にはリターンで初期値を入れてしまって問題ありませんが、「entry point: (index.js)」と聞かれた場合は「Gruntfile.js」と入力しましょう。

最後に以下のようなpackage.jsonの内容が表示されて、「Is this ok? (yes)」と聞かれるのでリターンを押すとプロジェクトフォルダにpackage.jsonが生成されます。

{
  "name": "grunt",
  "version": "0.0.0",
  "description": "",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause"
}

次にgruntのインストールを行ないます。先程インストールしたgrunt-cliとは別にプロジェクト単位でgruntのインストールは行います。

ターミナルで以下のコマンドを入力してください。

sudo npm install grunt --save-dev

以下のようなエラーが出ますが問題ありません。(多分)

npm WARN package.json grunt@0.0.0 No description
npm WARN package.json grunt@0.0.0 No repository field.
npm WARN package.json grunt@0.0.0 No README data
npm WARN install Refusing to install grunt as a dependency of itself

インストールが終了すると、package.jsonに「"devDependencies": {}」という一文が追加されています。

{
  "name": "grunt",
  "version": "0.0.0",
  "description": "",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause",
  "devDependencies": {}
}

プラグインのインストール

Gruntは利用したいタスクのプラグインをインストールして始めて利用できます。

まずはファイルの変更を監視する「grunt-contrib-watch」をインストールしてGruntの基本的な利用方法を見ていきましょう。ターミナルで以下のコマンドを入力してください。

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

プロジェクトフォルダに「node_modules」というディレクトリが作成され、その内側に「grunt」や「grunt-contrib-watch」というディレクトリとたくさんのファイルが生成されます。

package.jsonの内容も以下のように変更されます。

{
  "name": "grunt",
  "version": "0.0.0",
  "description": "",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-watch": "~0.5.3"
  }
}

これで、grunt-contrib-watchプラグインのインストールは完了です。

Gruntfile.jsの作成

Gruntのタスクや設定はGruntfile.jsに記述します。プロジェクトディレクトリにGruntfile.jsと監視するファイルであるsample.txtを作成しましょう。

Gruntfile.jsの内容は以下のようにします。node.jsはJavaScriptと同じ記法なのでJavaScriptのコメントアウトなども利用できます。

module.exports = function(grunt) {
  //グラントタスクの設定
  grunt.initConfig({
    //watchの設定
    watch: {
      dev: {
        files: ["sample.txt"]
      }
    }
  });
  //プラグインの読み込み
  grunt.loadNpmTasks('grunt-contrib-watch');
};

sample.txtはひとまず以下のような内容にしましょう。

sample

これで設定は完了です。ターミナルに戻り以下のコマンドを入力します

grunt watch

そうするとターミナルに以下のような内容が表示されます。

Running "watch" task
Waiting...

これで先ほど設定した「sample.txt」を監視している状態になります。この状態のまま「sample.txt」に変更を加え保存してみましょう。そうすると以下のような内容が表示されます。

>> File "sample.txt" changed.

このように、grunt-contrib-watchではファイルの変更を監視することができます。

ただ監視しているだけでは面白く無いので実際にタスクを与えてみましょう。とりあえずターミナルに戻り「control+C」を入力しgrunt watchを中断します。

CSSの圧縮や結合

grunt-contrib-cssminを利用してCSSの圧縮や結合を行ってみましょう。grunt-contrib-cssminは以下のコマンドでインストールできます。

sudo npm install grunt-contrib-cssmin --save-dev

圧縮や結合前のファルとしてプロジェクトファイルにcssディレクトリを作成し、その内側にbase.cssとlayout.cssを設置します。cssファイルの中身には適当なCSSを記述しておいてください。

Gruntfile.jsの内容は以下のように変更します。

module.exports = function(grunt) {
  //グラントタスクの設定
  grunt.initConfig({
    //cssminの設定
    cssmin: {
      combine: {
        files: {
          'css/style.min.css': ['css/base.css', 'css/layout.css']
        }
      }
    },
    //watchの設定
    watch: {
      dev: {
        files: ['css/base.css', 'css/layout.css'],
        tasks: ['cssmin']
      }
    }
  });
  //プラグインの読み込み
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
};

Gruntfile.jsの変更が終了したらgrunt watchしたあとにbase.cssかlayout.cssに変更を加えてみましょう。2つのファイルを圧縮結合したstyle.min.cssが書きだされるようになります。

Sassのコンパイル

次はSassファイルのコンパイルを行ってみましょう。まずはgrunt-contrib-sassをインストールします。

sudo npm install grunt-contrib-sass --save-dev

今回はプロジェクトファイル内のsass/style.scssに変更が発生するとcss/style.cssをコンパイルして書きだす設定を行ないます。

Gruntfile.jsを以下のように設定しgrunt watchすればSassのコンパイルタスクが可能になります。

module.exports = function(grunt) {
  //グラントタスクの設定
  grunt.initConfig({
    //sassの設定
    sass: {
      ddist: {
        files: {
          'css/style.css': 'sass/style.scss'
        }
      }
    },
    //watchの設定
    watch: {
      dev: {
        files: ['sass/style.scss'],
        tasks: ['sass']
      }
    }
  });
  //プラグインの読み込み
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-sass');
};

Compassのコンパイル

Compassのコンパイルはgrunt-contrib-compassを利用します。

sudo npm install grunt-contrib-compass --save-dev

Sassと同じようにはプロジェクトファイル内のsass/style.scssに変更が発生するとcss/style.cssをコンパイルして書きだす設定を行ないます。config.rbはプロジェクトファイル直下に配置します。

Gruntfile.jsを以下のように設定します。

module.exports = function(grunt) {
  //グラントタスクの設定
  grunt.initConfig({
    //compassの設定
    compass: {
      dev: {
      }
    },
    //watchの設定
    watch: {
      dev: {
        files: ['sass/style.scss'],
        tasks: ['compass']
      }
    }
  });
  //プラグインの読み込み
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-compass');
};

これまでとちがって寂しいですね。Compassは設定をconfig.rbに記述するためです。config.rbは以下のように設定しています。

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

config.rbはデフォルトではプロジェクトディレクトリ直下を参照しますが、以下のようにタスクを組むことで他の場所に置くこともできます。

module.exports = function(grunt) {
  //グラントタスクの設定
  grunt.initConfig({
    //compassの設定
    compass: {
      dev: {
        options: {
          config: 'sass/config.rb'
        }
      }
    },
    //watchの設定
    watch: {
      dev: {
        files: ['sass/style.scss'],
        tasks: ['compass']
      }
    }
  });
  //プラグインの読み込み
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-compass');
};

config.rbの位置を変更した場合も、config.rbの設定はプロジェクトディレクトリを起点にパス設定するの注意してください。

JavaScriptの圧縮・結合

最後にJavaScriptの圧縮・結合タスクを組んでみましょう。JavaScriptの圧縮・結合にはgrunt-contrib-uglifyを利用します。

sudo npm install grunt-contrib-uglify --save-dev

Gruntfile.jsの内容は以下のようにします。

module.exports = function(grunt) {
  //グラントタスクの設定
  grunt.initConfig({
    //uglifyの設定
    uglify: {
      my_target: {
        files: {
          'js/script.min.js': ['js/plugin.js', 'js/script.js']
        }
      }
    },
    //watchの設定
    watch: {
      dev: {
        files: ['js/plugin.js', 'js/script.js'],
        tasks: ['compass']
      }
    }
  });
  //プラグインの読み込み
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-uglify');
};

これでplugin.jsやscript.jsに変更が加えられた際に圧縮・結合したscript.min.jsが書きだされるようになります。

関連エントリー

Source MapでSass/Compassを簡単にCSSをデバッグする
CodeKitで簡単にCSS Preprocessorを利用する！
Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する
CompassでデータURI スキーム
CompassでCSSスプライト

スポンサードリンク

• 2013年8月28日 01:02
• カテゴリー tools

«FacebookがWebサイトへの埋め込み機能を提供 | メイン | ロリポップでMTにログインできなくなった場合の対処方法»

to-Rについて

JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。

書いてる人

西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア

株式会社トゥーアールについて

渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

検索

著書

Web制作の現場で使う
jQueryデザイン入門
[改訂新版]

JavaScript
コーディング
ベストプラクティス

スポンサードリンク

カテゴリー

• AWS [4]
• React [5]
• Angular [5]
• TypeScript [1]
• JavaScript [130]
• jQuery [59]
• CSS [95]
• HTML [19]
• iPhone [20]
• Android [31]
• Movable Type [72]
• WordPress [11]
• Facebook [6]
• Google [20]
• PHP [43]
• SEO [62]
• SEM [11]
• writer [108]
• seminar [107]
• Mac [7]
• server [15]
• Firefox [22]
• direction [7]
• tools [72]
• design [26]
• works [9]
• books [88]
• dialy [84]

アーカイブ

• 2021年11月 [3]
• 2021年10月 [2]
• 2021年5月 [1]
• 2020年5月 [1]
• 2020年1月 [3]
• 2019年5月 [4]
• 2019年4月 [1]
• 2019年1月 [1]
• 2018年12月 [1]
• 2018年7月 [1]
• 2018年3月 [2]
• 2021年 [6]
• 2020年 [4]
• 2019年 [6]
• 2018年 [5]
• 2017年 [11]
• 2016年 [15]
• 2015年 [44]
• 2014年 [41]
• 2013年 [62]
• 2012年 [66]
• 2011年 [100]
• 2010年 [85]
• 2009年 [96]
• 2008年 [149]
• 2007年 [213]
• 2006年 [143]
• 2005年 [66]

最近のエントリー

• AWS CloudFrontで特定ディレクトリを別のS3ストレージを割り当てる
• Nuxt.js / Next.jsで作成したサイトをGitHub ActionsでAWS S3にデプロイする
• AWS CloudFront FunctionsでBasic認証を設定する
• AWS SAM のtemplate.yamlをdeploy環境ごとに切り替える
• AWS Lambda(Node.js)でJimpを使って画像のバリデーションを行う
• IE11が終わる日
• 自宅ネットワーク高速化の道のり
• もう、SP用のWebデザインを倍の解像度で作るのをやめよう
• ReactのuseRefを再描画がかからないState管理として利用する
• TypeScriptのインデックス シグネチャでオブジェクトのキーの型を指定する

© 2005 to-R some Rights Reserved.