SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

HTML/JavaScript開発作業を効率化する便利ツールの活用

複数プラグインを組み合わせて、より多くのタスクをGruntに任せよう

HTML/JavaScript開発作業を効率化する便利ツールの活用 第2回


  • X ポスト
  • このエントリーをはてなブックマークに追加

各プラグインの機能紹介と設定方法

 Gruntのプラグインに実行させるタスクはGruntfile.jsファイルに記述します。以下では(前回記事で紹介した)contrib-uglify以外の各プラグインについて、機能と設定例を紹介していきます。全て記述済みのGruntfile.jsはサンプルコードに含まれています。

CSSの最小化をするcontrib-cssプラグイン

 contrib-cssプラグインはCSSを最小化するGruntプラグインです。図2のように、CSSファイルを最小化することができます。

図2 CSSファイルが最小化される
図2 CSSファイルが最小化される

 Gruntfile.jsへのcontrib-cssプラグインのタスク記述は、リスト4のようになります。

リスト4 contrib-cssプラグインの設定
cssmin: {
    target1: {
        files: [
            // default.css -> default.min.css
            {"style/default.min.css":
                ["style_src/default.css"]},
            // page1.css、page2.css -> page.min.css
            {"style/page.min.css":
                ["style_src/page1.css", "style_src/page2.css"]},
        ]
    }
},

 filesに最小化前後のファイルを指定します。記述方法はcontrib-uglifyと同様で、「{<ファイルA>:[<ファイル1>,<ファイル2>,...]}」のように記述すると、ファイル1、ファイル2...が結合/最小化されてファイルAに出力されます。ここではdefault.cssを最小化してdefault.min.cssに、page1.cssとpage2.cssを結合/最小化してpage.min.cssに出力するよう指定しています。

ファイルをコピーするcontrib-copyプラグイン

 contrib-copyプラグインはファイルやフォルダをコピーする機能を提供します。設定はリスト5のように記述します。

リスト5 contrib-copyプラグインの設定
copy: {
    target1: {
        files: [
            {
                // フォルダツリーを維持
                expand: true,
                // コピー元
                src:["index.html","js/*","style/*"],
                // コピー先
                dest:"release/",

            }
        ]
    }
},

 srcにコピー元を複数指定した配列、destにコピー先を指定します。expandオプションをtrueに設定することで、複数階層のフォルダツリー構成を維持したままコピーを行います。ここではindex.html、(最小化されたJavaScriptが格納される)jsフォルダ配下の全ファイル、(最小化されたCSSが格納される)styleフォルダ配下の全ファイルをreleaseフォルダ以下にコピーするよう指定しています。

変更を監視するcontrib-watchプラグイン

 contrib-watchプラグインは、ファイルの変更を監視してタスクを実行します。設定はリスト6のように定義します。

リスト6 contrib-watchプラグインの設定
watch: {
    target1: {
        // 変更監視ファイル
        files: ["index.html", "js_src/*.js", "style_src/*.css"],
        // 実行するタスク
        tasks:["build"],
        options: {
            // livereloadを有効に
            livereload: true
        }
    }
}

 filesは変更を監視するファイル配列です。ここではindex.html、(最小化前のJavaScriptが配置される)js_src配下の*.jsファイル、(最小化前のCSSが配置される)style_src配下の*.cssファイルを指定しています。ファイルが変更された時に実行するタスクをtasksに指定します。ここでは後述するbuildというタスクを実行します。

 optionsはオプション指定です、表2に主なオプションを示します。eventオプションには、all(全て)/changed(変更時)/added(追加時)/deleted(削除時)が指定可能です。

表2 contrib-watchプラグインの主なオプション指定
名称 内容 デフォルト値
interval 変更監視の間隔 100(100ms)
event 変更対象のイベント all(全てのイベント)
livereload Webブラウザの自動リロードを行う false(行わない)

 リスト6ではlivereloadオプションにtrueを設定して、コンテンツが更新された時にWebブラウザを自動的にリロードするようにしています。この機能を有効にするためには、HTMLファイルにリスト7のようなJavaScriptの参照設定を行うか、livereload.comで配布されているプラグインをWebブラウザに導入します。

リスト7 livereloadオプションを有効にするためのJavaScript参照
<script src="http://localhost:35729/livereload.js"></script>

 ダウンロードできるサンプルコードには、リスト7の記述が含まれています。

次のページ
プラグインの読み込みとタスク定義

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
HTML/JavaScript開発作業を効率化する便利ツールの活用連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8714 2015/06/15 13:58

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング