Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Webサイト制作に便利なGruntプラグイン(その1)

More than 5 years have passed since last update.

Webサイト制作に便利なGruntプラグイン(その1)

これからGruntを始める同僚の参考になればいいなぁ、と思い書きました。今回は基本のGrunt-contribプラグインにターゲットを絞り、その中で僕がWebサイト制作で特に利用することの多いプラグインを紹介しています。

簡単な設定例も併記しましたが、たいていはそれぞれのプラグインでより多くのオプションが用意されており、また僕自身もそれらの機能を十分把握していない可能性もあるので、実際に使用する際には各々の説明ページを参照してください。

また、grunt-contrib以外で利用しているその他のGruntプラグインは、別記事としていくつか紹介しています。

Gruntにやってもらうと便利な作業

さまざまな用途に利用できますが、Web制作では以下のような機能が便利に使えるのではないでしょうか。

【開発時】

  • 任意のファイルを更新すると、ブラウザを自動で更新(ライブリロード)

  • CSSスプライトの生成(スプライト画像の自動生成とCSSの書き換え)

  • SassやLess、Stylusを監視し、変更があれば自動的にCSSにコンパイル

  • CoffeeScriptやTypeScriptを監視し、変更があれば自動的にJavaScriptにコンパイル

  • JadeやHandlebarsやUnderscoreテンプレートを監視し、変更があれば自動的にHTMLにコンパイル

  • JavaScriptやHTML、CSSの構文チェック

【リリース時】

  • 開発用のソースをリリース用にコピー。またリリース時に不要なファイルを削除。

  • ファイルの内容の一部を書き換え

  • JavaScriptやCSSの連結、ミニファイ(難読化)

Grunt-contrib?

grunt-contrib
Gruntの公式プラグインのセットです。汎用的なタスクを実行してくれるさまざまなプラグインが用意されています。これからGruntを使ってみようと思う方は、まずはこれらのプラグインの中から、自分の仕事で利用できそうなものを使ってみるといいかと思います。

Grunt-contribには以下の25個のプラグインが含まれています(2014年3月19日現在)。以下にそれぞれのタスクの概要をリストしています。(テスト開発関連のプラグインは、言い回しが不適切かもしれません。すいません..。)

以下、この記事では上記のリストにて*を付記しているプラグインについて簡単に紹介しようと思います。

grunt-contrib-clean

grunt-contrib-clean*

【 設定例 】
releaseディレクトリを削除します。(開発用ファイルからリリース用のファイルを生成する前に、このタスクを使い、現在のリリース用ファイルをまとめて削除しておくと安心です。またリリース用のファイル群に不要なソースが存在している場合は、このプラグインで削除してしまいましょう。)

package.json
clean: [ 'release' ]

grunt-contrib-compass、grunt-contrib-sass

grunt-contrib-compass
grunt-contrib-sass

【 設定例 】
main.scssをmain.cssにコンパイルします。Compassも利用するできるようにoptionscompass設定をtrueにします。

package.json
sass: {
  dist: {
    options: {
      compass: true
    },
    files: {
      'main.css': 'main.scss'
    } 
  }
}

grunt-contrib-concat

grunt-contrib-concat

【 設定例 】
src/js配下のplugins.jsとmain.jsを連結し、releaseディレクトリにapp.jsとして生成します。

package.json
concat: {
  dist: {
    src: ['src/js/plugins.js', 'src/js/main.js' ],
    dest: 'release/app.js',
  }
}

grunt-contrib-connect

grunt-contrib-connect

【 設定例 】
ライブリロードサーバに接続します。デフォルトでは、ブラウザのlocalhost:3000でアクセスできると思います。環境によっては、ライブリロードを利用するブラウザ毎に、別途こちらのプラグインをインストールしてあげる必要があるかもしれません。

package.json
connect: {
  server: {
    options: {
      livereload: true
    }
  }
}

grunt-contrib-copy

grunt-contrib-copy

【 設定例 】
srcフォルダ内のjs/app.min.jsと、imgsフォルダ内のすべてのファイル、およびindex.htmlを、releaseディレクトリ配下に生成します。このとき、不可視ファイル(.で始まるファイル)までコピーされないように、dotオプションをfalseにしています。

package.json
copy: {
  main: {
    files: [{   
      expand: true, 
      cwd: 'src', 
      src: [   
        'js/app.min.js',
        'imgs/**',
        'index.html'
      ], 
      dest: 'release',
      dot: false
    }]
  }
}

grunt-contrib-cssmin

grunt-contrib-cssmin

【 設定例 】
src/cssフォルダ内のreset.cssとmain.cssを連結、圧縮し、releaseディレクトリ配下に生成します。

package.json
cssmin: {
  combine: {
    files: {
      'release/css/app.min.css': ['src/css/reset.css', 'src/css/main.css']
    }
  }
}

grunt-contrib-jshint

grunt-contrib-jshint

【 設定例 】
src/js/main.jsをJSHintで検証します。

package.json
jshint: {
  all: [
    'src/js/main.js'
  ],
  options: {
    jshintrc: '.jshintrc',
  }
}

検証に関する細かい設定は、jshintrcオプションにて指定したファイルで可能なようです。詳細はJSHintのページに説明があります。

.jshintrc
{
"curly": true,
  "eqnull": true,
  "eqeqeq": true,
  "undef": true,
  "globals": {
    "window": true,
    "document": true
  },
  "jquery": true
}

また、検証対象のスクリプトファイル内にて定義されていないグローバルオブジェクトについては、上記の設定以外でも、以下のようにスクリプト内に直接記述することにより、検証エラーを回避できるようです。

src/js/main.js
/*global window, document, jQuery*/

grunt-contrib-uglify

grunt-contrib-uglify

【 設定例 】
src/js配下のplugins.jsとmain.jsを連結・難読化し、releaseディレクトリにapp.jsとして生成します。

package.json
uglify: {
  js: {
    files: {
      'release/app.min.js': ['src/plugins.js', 'src/main.js']
    }
  }
}

grunt-contrib-watch

grunt-contrib-watch

【 設定例 】
src配下のhtmlファイルと、sassフォルダ内のsassファイル(.scss)を監視し、変更があった場合にブラウザを自動更新します。また、sassファイルの更新が認められた場合は、sassプラグインのタスクも実行します(上述のgrunt-contrib-sassの項で設定したような、sassからcssへのコンパイルが実行されます)。

package.json
watch: {
  html: {
    files: 'src/*.html',
    tasks: '',
    options: {
      livereload: true
    }
  },
  sass: {
    files: 'src/sass/*.scss',
    tasks: [ 'sass' ],
    options: {
      livereload: true
    }
  }
}
megurock
フロントエンドエンジニア。一昔前はFLASHer。もっと昔はWebデザイナ。犬が好き。
fork
株式会社フォークは、Webサイトの企画・制作・開発・サーバホスティング・コンタクトセンターを一社に集約したワンストップソリューションを展開する制作会社です。
https://www.fork.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away