SHOEISHA iD

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

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

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

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

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


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

プラグインの読み込みとタスク定義

 ここまで設定した各プラグインを読み込むために、Gruntfile.jsにはリスト8の記述が必要になります。

リスト8 package.jsonにGruntとプラグインの情報が追加された状態
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-contrib-watch");

 最後にGruntのタスクを定義します。grunt.registerTaskメソッドの第1引数にタスク名、第2引数に登録するタスクを指定します。

リスト9 Gruntタスクの定義
// デフォルトタスク
grunt.registerTask("default", ["watch"]);
// buildタスク:uglify、cssmin、copy、logを実行
grunt.registerTask("build", ["uglify", "cssmin", "copy", "log"]);
// 独自タスク(ログ出力)
grunt.registerTask("log", function(){
    grunt.log.writeln("All tasks done!!");
});

 「default」タスクは、タスク名が指定されない場合に実行されるタスクを表します。ここではcontrib-watchプラグインのwatchタスクを指定します。また「build」タスクはリスト6の記述によりcontrib-watchプラグインが実行するタスクで、uglify(JavaScriptの最小化)、cssmin(CSSの最小化)、copy(ファイルコピー)、log(後述)のタスクを順番に実行します。

 なお「log」タスクのように、第2引数にJavaScript関数を指定して実行させることもできます。ここではタスクが終了した旨をコンソールに出力します。

Gruntの実行と動作確認

 ここまで準備ができたら、gruntコマンドを実行してタスクを実行します。

リスト10 Gruntでタスクを実行するコマンド
grunt

 実行するとdefaultタスクに指定されているwatchタスクが実行され、ファイルの変更監視が開始されます。この状態でindex.html、js_srcフォルダ配下の*.jsファイル、style_srcフォルダ配下の*.cssファイルのいずれかを変更すると、buildタスクが実行されてJavaScriptとCSSファイルが最小化され、HTMLファイルを含めた一式がreleaseフォルダにコピーされます。この時release配下のindex.htmlをブラウザで表示していれば、Webブラウザが自動的にリロードされます。

図3 ファイルを変更するとWebブラウザがリロードされる
図3 ファイルを変更するとWebブラウザがリロードされる

補足:CoffeeScriptの活用

 Gruntでは、CoffeeScript(コンパイルしてJavaScriptにする、いわゆるAltJSの一つ)をサポートしています。CoffeeScriptをコンパイルするcontrib-coffeeプラグインが提供されているほか、設定ファイル自体もリスト11のようにCoffeeScriptで記述することができます(リスト11を含むGruntfile.coffee全体はダウンロードできるサンプルファイルに含まれます)。

リスト11 リスト4同等のcontrib-cssminプラグイン設定をCoffeeScriptで記述(Gruntfile.coffee)
# contrib-cssmin
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"]

 CoffeeScriptはコードブロックをインデント(字下げ)で表すため、JavaScriptでよくある「多数の中括弧や括弧で見通しが悪くなる」ことがなく、設定ファイルをより簡潔に記述できるメリットがあります。

まとめ

 本記事では、JavaScriptのタスク実行環境Gruntについて、複数プラグインを組み合わせて活用する設定方法を紹介しました。Gruntとプラグインを用いて、頻繁に実行される手順の組み合わせを自動実行させて開発効率をあげることができます。またcontrib-watchプラグインを用いるとファイルの変更をトリガーにタスクを自動実行できるため、開発者はタスク実行さえ意識する必要がなくなり、コーディングに集中することができます。

 プラグインをどのように組み合わせて、何をどのように自動実行させるのかを最初に考えるのはそれなりに手間がかかりますが、定形作業がはっきりしている場合には利用を検討してもよいのではないでしょうか。

参考資料

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング