1度使うとやみつきになる!フロントエンジニア必見の Grunt プラグイン6選



1度使うとやみつきになる!フロントエンジニア必見の Grunt プラグイン6選

一度使うとやみつきになる Grunt のプラグインをいくつかご紹介させて頂きます。 Web 開発のフロントエンジニアを目指す方、ご参考ください。 また Web サイトや Web アプリの制作を検討している方も、Grunt プラグインの機能を知ってから検討される方が、視野が広がると思いますよ。

本稿内のプラグイン・テスト環境/Windows 10

目次
  1. フロントエンジニア必見の Grunt プラグイン 6選
  2. プラグインの利用方法
  3. usemin
  4. grunt-text-replace
  5. contrib-imagemin
  6. browser-sync
  7. Yeoman
  8. まとめ

フロントエンジニア必見の Grunt プラグイン 6選

プラグインの利用方法

まず最初に Grunt プラグインの利用方法を復習しておきます。

利用環境/Grunt のインストールが終わっていること

  • ステップ1 | プラグインの選定/Grunt プラグイン公式サイト
  • ステップ2 | プラグインをインストール/Node.js コマンド画面より rpm install ・・・を入力
  • ステップ3 | Javascript ファイル『Gruntfile.js 』の作成/ここが難しいですよね
  • ステップ4 | コマンドプロンプト or ターミナルから grunt ○○で実行

基本的にどのプラグインも、導入方法のドキュメント(英語)は公開されていますので、それになぞって Gruntfile.js を制作すれば Grunt は動いてくれます。

Grunt のプラグインが初めての方は、Watch や Copy など基礎的なプラグインから始めてみると面白いと思います。

Uncssuncss

ダウンロード npm install grunt-uncss --save-dev

ドキュメント https://www.npmjs.com/package/grunt-uncss

UNCSS は、CSS ファイルの最適化に使えるプラグインになります。 HTML ファイルと CSS のプロパティを照合し、HTML ファイル内で使われていない CSS プロパティを自動的に削除してくれます。このことによって CSS ファイルの無駄なコードがなくなり、web ページの読み込み速度向上やメンテナンス性向上につながります。 CSS ユーザー必見のプラグインです。

 Gruntfile.js のサンプル・ダウンロード 

usemin

usemin

ダウンロード

npm install grunt-usemin --save-dev

ドキュメント

https://www.npmjs.com/package/grunt-useminnpm  

プラグイン usemin は、 Javascript ファイルの結合・圧縮、CSS ファイルの結合・圧縮をうまく組み合わせた html ファイルの最適化プラグインになります。 開発段階では複数ある js ファイルや css ファイルも useminを実行すると、開発中の js ファイルとcss ファイルを最適化し、さらに既存の index.html 内の Javascript ファイルのリンクと CSS シートのリンクを自動的に書き換え、最適化されたファイル一式を作り出してくれます。

絶対的にweb 開発の検証作業を激的に効率よくしてくれるプラグインなります。

CSSmin とか uglify などのプラグインを単体で使っている方は、一度試してみたい一品になりますね。

usemin のインストールについて

  • 必要なプラグイン一式をインストール 下記のコードを Node.js コマンド画面にコピペして実行してください。 5つのプラグインが同時にインストールされます。
npm install grunt-contrib-concat grunt-contrib-copy grunt-contrib-uglify grunt-contrib-cssmin grunt-usemin
  • 実行コマンド grunt build

Node.js コマンド画面に grunt build を入力すると、 build フォルダーが新しく作成されて、その中に css の結合圧縮、JavaScript の結合圧縮、最適化された html ファイルが出力されます 下記は、プラグイン usemin 実行によるディレクトリ構造の変化を表しています。 Usemin が元のディレクトリ構造で、Build がプラグイン実行後になります。

Usemin index.html
CSS style1.css
style2.css
js scrypt1.js
scrypt2.js
↓ プラグイン 実行後
Build index.html
CSS main.css
js main.js

 Gruntfile.js のサンプル・ダウンロード 

grunt-text-replace

grunt-replace

ダウンロード

** npm install grunt-text-replace --save-dev**

ドキュメント

https://www.npmjs.com/package/grunt-text-replace

html ファイル内のテキストやメモ帳などの文章を一括変更できるプラグインになります。 文章の構成や単位の変換など用途は、いろいろあります。 しかし、残念ながら CSS ファイル内のクラス名変更などはできない仕様となっています。 また HTML 内のタグの一括変更もできませんでした。

Gruntfile.js のサンプル・ダウンロード 

contrib-imagemin

grunt-imagemin

ダウンロード

npm install grunt-contrib-imagemin --save-dev

ドキュメント

https://github.com/gruntjs/grunt-contrib-imagemin

軽量な Web サイト作成に欠かせない画像圧縮ツールになります。

今回は、Imagemin を取り上げていますが、Grunt 内には多数の画像圧縮プラグインが公開されています。それぞれに特徴はありますが、こちらは定番のプラグインになります。 Gif 用、jpeg 用の拡張子も用意されているので、一通りの画像圧縮はこちらのプラグイン一つでこなしてくれるはずです。 少しテストしましたが、ファイルによって圧縮率にバラつきが出ました。

 Gruntfile.js のサンプル・ダウンロード 

browser-sync

grunt-sync

ダウンロード

npm install grunt-browser-sync --save-dev

ドキュメント

https://www.browsersync.io/docs/grunt/

こちらの同期系プラグインは、手っ取り早くサーバーテストと静的な Web サイトの CSS をチェックするのに役立つプラグインです。 watch 機能も兼ね備えているので、CSS の変更があれば即座にブラウザ上に変更が反映されて、Node.js コマンド画面にも変更があったことが表示されます。 またオプション機能も充実していて、https モードのテストやデバイス毎の表示テスト(ghostMode)、各種スクロールテストなどが用意されています。

簡易サーバー用のプラグイン『grunt-contrib-connect 』とかもいいですが、複合機能を兼ね備えた browser-sync もご参考ください。

 Gruntfile.js のサンプル・ダウンロード 

Yeoman

yo-web

ダウンロード

** npm install -g yo **

ドキュメント

http://yeoman.io/

もはや Web 開発現場の常識?ともいえる Yeoman。 CSS のフレームワークやJavascript のライブラリ、土台となるテンプレート、さらには Sass や CoffeeScript などのコンパイル処理、といったフロントエンジニアにとって必要な環境を Yeoman は整えてくれます。 ソフトの構成は、web ページのひな型を作る『yo』とテスト環境を提供する『Grunt』、Javascript ライブラリーや CSS フレームワークを提供してくれる『Bower』の3本柱で構成されています。

Yeoman のインストールについて

前段階として Bower をはじめいくつかのプラグインが必要になります。

もし必要なプラグインが足りない場合はエラーで表示されますので、その都度追加でプラグインを足していってもいいかなと思います。

yo-erorr

自分のパソコンに bower があるかどうかわからない時は、、 Node.js コマンド画面に bower –v を入力してチェックしてみましょう!

bower が入っていなければ npm install -g bower でインストールできます。

Yeoman のコア部分 yo をインストールします。

npm install -g yo

次に Yeoman のジェネレーターをインストールします。

npm install -g generator-webapp

フォルダ testyo(任意名称)を作成しておきます。 ディレクトリ/ Taka7 > testyo

testyo のディレクトリに移動します。Node.js コマンド画面から

cd testyo yo webapp

と実行します。 ちょっと時間がかかってから選択肢が表示されますので、リターンキーをプッシュします。 3つの項目から選択を外したい場合は上下キーでカーソルを動かし、スペースキーで項目を外します。

yo-command

Node.js コマンド画面から

grunt server

を叩いて、server 機能がうまく働けば自動的に Yeoman のサンプルページが立ち上ります。 Yeoman のデフォルトポート/ Localhost:9000 html や css ファイルは、yo のプラグインをインストールしたディレクトリのapp フォルダ内にあります。 ** 公式サイトに公開されている手順通りにインストールを進めたつもりでしたが、grunt server を叩く度にエラーが発生し、結果以下の工程を踏んでしまいました。 うまくいかずに不安に思っている方の励みになればと思って、記録します。

  1. npm install --save-dev time-grunt
  2. npm install jit-grunt --save-dev
  3. npm install grunt-autoprefixer --save-dev
  4. npm install --save-dev grunt-wiredep
  5. npm install --save-dev grunt-bower-install
  6. bower install
  7. npm install grunt-contrib-compass --save-dev
  8. npm install grunt-newer --save-dev
  9. compass エラーが消えない・・・
  10. npm update
  11. gem install compass grunt server 立ち上がる
  12. やった

 Yeoman の Gruntfile.js は自動的に制作されます 

まとめ

いかがでしたでしょうか?今回ご紹介させて頂いた中で、usemin というプラグインは設定に苦労しましたが、複雑な処理をこなす一方、Gruntfile.jsのコードはシンプルなままなので、慣れると結構使えるプラグインと思います。 またご紹介することは出来ませんでしたが、静的サイト・ジェネレーターで有名な Jekyll やページの読み込み速度を測定してくれる pagespeed など、他にも気になるプラグインはたくさんありますね。

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp