Gruntで快適な環境を整備したい!【タスク記述編】

『Gruntで快適な環境を整備したい!【インストール編】』に引き続き、タスクの自動化ツールであるGruntを使ってみます。今回はタスク記述編ということで、様々なタスクを書いてみます

今回したいこと

今回は以下のタスクを書いてみたいと思います。タスクはGruntfile.jsに書きます。ベースとなるコードは前回の記事『Gruntで快適な環境を整備したい!【インストール編】』の「Gruntfile.jsを作成する」をご覧ください。

タスクの中身は基本的に、処理対象となるファイルやフォルダのパスと処理後のパスで構成されています。ファイルパスの書き方には「コンパクト形式」「ファイルオブジェクト形式」「ファイル配列形式」があります。Gruntのドキュメントを日本語化してくださっているサイトがありますので、こちらを参考にしてください。プラグインによってはサポートしていない形式があるようですので、どのプラグインがどの形式をサポートしているかは各プラグインのドキュメントを参照してください。

■ファイル、フォルダの複製

ファイル、フォルダの複製にはgrunt-contrib-copyを使います。納品用に必要なファイルをすべてbuildフォルダ下にコピーしてみます。

  copy: {
    dist: {
      files: [{
         src: [‘assets/**’,’css/**’,’js/**’,’index.html’],
         dest: ‘build/’
      }]
    }

■ファイルの連結

複数のファイルの連結にはgrunt-contrib-concatを使います。下記では、foo.js、bar.js、baz.jsを1ファイルに連結し、(package.jsonで設定した名前).jsにしています。package.jsonの値は、「<%= pkg.name %>」のような形で取得できます。たとえばpackage.jsonで「riaxdnp」というプロジェクト名をnameに設定している場合、riaxdnp.jsというJSがjsフォルダ下に新たに作成されます。

concat: {
     options: {
       // 結合したファイルの頭にコメント入れたいとき
       banner: “/* test */\n”
     },
     dist: {
       // 出力元
       src: [
         ”build/js/foo.js”,
         ”build/js/bar.js”,
         ”build/js/baz.js”
       ],
       // 出力先( package.jsonのnameから値を取得している)
       dest: “build/js/<%= pkg.name %>.js”
     }
   },

■JSのminify

JavaScriptファイルの縮小化にはgrunt-contrib-uglifyを使います。ここでは、元となるファイルのsrcに「<%= concat.dist.dest %>」を指定し、上記のconcatで1ファイルにまとめたJSを元にminifyしてみます。このように、他のタスクの値を取得することも可能です。

   uglify: {
      main: {
         src: “<%= concat.dist.dest %>“,
         dest: “build/js/<%= pkg.name %>.min.js”
      }
   },

■CSSのminify

CSSファイルの縮小化にはgrunt-contrib-cssminを使います。下記では、foo.css、bar.css、baz.cssの3つのCSSをまとめて(package.jsonで設定した名前).min.cssという1つのファイルにしています。(事前にconcatしなくて良いので便利です。もちろんJSのminifyでも同じことができます。)

cssmin: {
      main: {
         src : [‘build/css/foo.css’,’build/css/bar.css’,’build/css/baz.css’],
         dest : ‘build/css/<%= pkg.name %>.min.css’
      },
      // パスが違う場合はこのようにタスクを複数書くこともできます。
      // devという名前は任意で付けています
      dev: {
         src : [‘build/dev/css/*’],
         dest : ‘build/dev/css/<%= pkg.name %>.min.css’
      }
   },

■不要なファイルの削除

 
フォルダ、ファイルの削除にはgrunt-contrib-cleanを使います。CSSとJSを縮小化したので、ここでは元となったファイルを削除してみます。すべて他のタスクの設定値を利用していますが、パスを記述してももちろん問題ありません。

   clean: {
      // concatで設定したfoo.js bar.js baz.jsが削除されます。
      mainJS: [“<%= concat.dist.src %>“],
      // concatのタスクで生成されたname.jsが削除されます。
      concatJS: [“<%= replace.dist.dest %>“],
      // cssminで設定したfoo.css bar.css baz.cssと、dev/css下のすべてのファイルが削除されます
      css: [“<%= cssmin.main.src %>“,”build/dev/css/*”]
   },

■ファイルの更新監視

ファイルの更新を監視して、何かのタスクを都度実行したい際にはgrunt-contrib-watchを使います。以下では、jsフォルダ内のjsファイルの変更を監視し、ドキュメントの生成と構文チェックを行っています。

   watch: {
      doc: {
         // 変更を監視するファイルを指定
         files: [“js/”,”Gruntfile.js”],
         // 変更されたらどのタスクを実行するか
         tasks: [“jshint”,”yuidoc”]
      }
   },

■JSの構文チェック

JSの構文チェックにはgrunt-contrib-jshintを使います。optionsでjshintの設定ファイルであるjshintrcを指定しています。チェック対象にGruntfile.js自身も入れておくと便利です。

   jshint: {
      options: {
         jshintrc: “.jshintrc”
      },
      // 対象ファイルを指定
      all: [“js/”]
   },

■YUIDocによるドキュメント生成

ドキュメントの生成にはgrunt-contrib-yuidocを使います。pathsで元のJSのフォルダやファイルのパスを、outdirで生成済みのドキュメントを格納したいフォルダを指定します。

   yuidoc: {
      dist: {
         ’name’: ‘Test Web App’,
         ’description’: ”,
         ’version’: ‘0.1.0’,
         options: {
            paths: [‘js/’],
            outdir: ‘docs/’
         }
      }
   }

実行するためにタスクをまとめる

最後に、ここまでで書いてきたタスクをまとめてみます(使用したプラグインの読み込み部分の記述も忘れずに!)。grunt.registerTaskでタスクの設定を行います。defaultは「grunt」コマンドを入力した際のデフォルトタスクの設定で、buildは任意で付けたタスク名です。下記ではデフォルトでwatch(更新の監視)を行い、「grunt build」が入力された場合はcopy、concat、uglify、cssmin、cleanの順番でタスクが実行されます。

grunt.registerTask(‘default’, [‘watch’]);
grunt.registerTask(‘build’, [‘copy’,’concat’,’uglify’,’cssmin’,’clean’]);

Related Post

Webフォントを使用したスマートフォン向け秀英体見本帳を公開Webフォントを使用したスマートフォン向け秀英体見本帳を公開

秀英体とは、大日本印刷オリジナルの書体です。秋からMORISAWA PASSPORTで秀英角ゴシック、秀英丸ゴシックが提供開始されるにあたり、スマートフォン向け見本帳を作成しました。以前より、Flash版の見本帳を公開していましたが、今回はWebフォントサービスのRealTypeさまにご協力いただき、秀英明朝/秀英初号明朝/秀英横太明朝/秀英丸ゴ/秀英角ゴ金/秀英角ゴ銀の6 書体を試験的にWebフォント化し、HTML版を作成しました。推奨閲覧環境はiOS5以上、Android 3.2以上となっております。本コンテンツではWebフォント機能を使用しているため、環境によってはフォントが適用されない場合がありますので、あらかじめご了承ください。 Flash版はこちら>Flash見本帳HTML版はこちら>スマートフォン向け秀英体見本帳(※2013/3/29現在、リニューアルに伴い公開停止中です。ご迷惑をおかけいたしますが、よろしくお願い致します。)  チャレンジしたこと Webフォントでの縦書き表現 CSS3のwriting-modeプロパティを使用すると、テキストを縦書き表示することができます。しかし、writing-modeを指定したテキストにWebフォントを指定すると、かなだけグリフが寝てしまう問題(参照:縦書きにWebフォントを使いたい!けど使えるのか検証してみた)がありました。そのため、HTML版秀英体見本帳内の縦組み部分ではSVGのtext要素、JavaScriptを使った縦組みライブラリのNehanを使用して縦組みを表現しています。

WebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれWebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれ

先日、1年ほど前に公開したスマートフォン向け秀英体見本帳を更新しました!スマートフォン向け秀英体見本帳は、モバイルブラウザを対象としたWebフォントを使った縦組み表現に挑戦したコンテンツです。スマートフォン向け秀英体見本帳はこちらから、推奨動作環境等はこちらをご覧ください。 更新、といっても、見た目はほとんど変わらないのですが、Webフォントのフォント形式をSVGから他の形式に切り替えました。SVGフォントの場合は不具合なく表示されていたものが、WOFFやTTF、OTFに切り替えた場合に表示の不具合が出たりして意外に大変でした。モバイルブラウザでのWebフォント表現のノウハウが少なく、問題が不明で未解決のものもありますが、今回ハマったポイントをご紹介します。 検証端末 今回の検証に用いた端末の端末名/OSバージョン/ブラウザは以下です。 AQUOS PHONE SERIE ISW16SH

Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]

Kii Cloudは、MBaaSと呼ばれるクラウドサービスのひとつで、モバイルアプリの開発で共通して必要となるサーバ側の機能が提供されています。BaaSを使ったフロントエンド開発は、Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]でもご紹介しました。 MBaaS – Kii Cloud キークラウド Kii CloudもParseと同じく、ユーザー管理やデータ管理など、アプリケーション開発に必要な一連の機能が用意されており、SDKやREST