Gruntの復習 (3)タスクの書き方
Gruntの復習 (2)Gruntfile.jsを書く - 鴨のいいカモですにて色々タスクを追加してみると予告していたのですが、タスクの記述方法をきちんと理解していなかったことに気づいたので、そこを調べてみることにしました。
この部分です!
uglify: { dest: { // ターゲットdest files: { 'dest/js/scripts.min.js': ['src/js/*.js'] } } }
公式サイトのドキュメントであるConfiguring tasks - Grunt: The JavaScript Task Runnerを参考に。
まず基本
JSONで書く…と思ったら、JSONではなくJavaScriptだそうで。ということでJSONだけではなく、JavaScriptで処理を書いてもよいそうです。
タスクについて
Gruntはタスクランナーとありますが、そのタスクは、上記でいうとuglify
の箇所です。Gruntはなにもしないと何もタスクが使えませんが、前に書いたgrunt.loadNpmTasks()
でタスクを読み込むことで、利用可能なタスクを追加することができます。
プラグインの追加によってどのような名前のタスクが追加されるかは、追加するプラグインのドキュメントを確認してください。
タスクは、前回記述したようにgrunt タスク名
で実行することができます。
ちなみに、現在使えるタスクはgrunt --help
で確認することができます。「Available tasks」の箇所に利用可能なタスクが表示されるはずです。
ターゲットについて
タスクには、ターゲットと呼ばれるものを指定することができます。上記でいうとdest
の箇所です。ターゲットは任意の名前にすることができます。そして、複数定義することもできます。それにより、ターゲットごとに違う設定を実現することができます。以下はターゲットごとにminify結果の配置先を変更した例です。
uglify: { dest: { // ターゲットdest files: { 'dest/js/scripts.min.js': ['src/js/*.js'] } }, build: { // ターゲットbuild files: { 'build/js/scripts.min.js': ['src/js/*.js'] } } }
ターゲットを指定して実行するには、grunt タスク名:ターゲット名
でOKです。
ターゲットを指定しないでgrunt タスク名
とすると、全ターゲットを実行します。
変換元および変換先のファイル指定について
Gruntでは多くのタスクでファイルの変換や移動を行います。それらファイルの変換元と変換先は、ターゲットごとに以下の方法で指定することができるようです。
Compact Formatを用いる方法
以下のように、src
に変換元、dest
に変換先を指定します。
target: { src: ['src/a.js', 'src/b.js'], dest: 'dest/c.js', }
Lintのように出力先が不要な場合は'dest'を省略します。また、これにオプションのプロパティをつけくわえることも可能のようです。
Files Object Formatを用いる方法
以下のように、files
を使い、変換元(src/*.js)と変換先(dest/c.js)を指定します。また特徴として、次のようにマッピングを複数持つことができます。
target: { files: { 'dest/c.js': ['src/a.js', 'src/b.js'], 'dest/f.js': ['src/d.js', 'src/e.js'] } }
ただし、オプションのプロパティを付け加えることはできないようです。
Files Array Formatを用いる方法
files
を使い、かつsrc
とdest
も指定します。マッピングを複数持て、かつオプションのプロパティを付け加えることができるようです。ただ、記述が冗長ですね。
target: { files: [ {src: ['src/a.js', 'src/b.js'], dest: 'dest/c.js'}, {src: ['src/d.js', 'src/e.js'], dest: 'dest/f.js'} ] }
変換元と変換先それぞれのファイル指定には、直接指定の他にpath/**/*.js
のような、いわゆるGlobパターンも使用することができます。
optionsについて
options
プロパティを使用することで、タスクのデフォルト設定を上書きすることができます。options
プロパティはタスクごとのみではなく、ターゲットごとに指定することができます。こんな感じですね。
uglify: { options: { report: 'min' }, dest: { // ターゲットdest options: { beautify: true }, files: { 'dest/js/scripts.min.js': ['src/js/*.js'] } }, build: { // ターゲットbuild files: { 'build/js/scripts.min.js': ['src/js/*.js'] } } }
全体でreport: 'min'
(minifyのレポート出力)にし、ターゲットdest
のみbeautify: true
(デバッグ用に読みやすく整形)としています。
これで基本的なタスクの書き方はおさえられた感じです。その他にもファイル指定が便利になるプロパティや、テンプレートや外部データのインポートなどができるようです。詳しくは参考にしたConfiguring tasks - Grunt: The JavaScript Task Runnerを見てください。
次回は色々とタスクを追加してみようと思います、がはてさて。
Gruntの復習 (2)Gruntfile.jsを書く
前回の(1)インストールから初期設定に続き、実行するタスクを記述するGruntfile.jsを作成してみます。
Gruntfile.jsの構成
Gruntfile.jsは以下のような構成になっています。
module.exports = function(grunt) { grunt.initConfig({ // ここに実行タスクを記述する }); // プラグインを使用するときにタスクを読み込む記述を追加 // grunt.loadNpmTasks(''); // デフォルトタスクなどのタスク名を設定 grunt.registerTask('default', []); }
このように、grunt.initConfig()
にタスクを記述し、grunt.registerTask()
でdefaultなどにタスクを指定したり、タスク名を設定したりします。また、Gruntはプラグイン機構によりさまざまな機能を実現しています。プラグインを利用する際には、タスクを読み込むためにgrunt.loadNpmTasks()
を使う必要があります。
Gruntfile.jsへのタスク追加
プラグインgrunt-contrib-uglifyを使い、JavaScriptのminifyを実行してみましょう。
プラグインのインストール
以下のコマンドを実行します。gruntと同様、--save-dev
のオプションをつけてpackage.jsonへ記述が追加されるようにします。
npm install grunt-contrib-uglify --save-dev
タスク読み込み記述の追加
Gruntfile.jsへ以下を追記し、grunt-contrib-uglifyのタスクを読み込んで、使えるようにします。
grunt.loadNpmTasks('grunt-contrib-uglify');
現状のGruntfile.jsは以下のようになっています。
module.exports = function(grunt) { grunt.initConfig({ // ここに実行タスクを記述する }); // プラグインを使用するときにタスクを読み込む記述を追加 grunt.loadNpmTasks('grunt-contrib-uglify'); // デフォルトタスクなどのタスク名を設定 grunt.registerTask('default', []); }
実行タスクの記述
grunt.initConfig()
内に実行するタスクを記述します。ここでは仮に、src/js/*.js
をminifyしてdest/js/scripts.min.js
に出力するようにします。記述後のGruntfile.jsは以下のようになっています。
module.exports = function(grunt) { grunt.initConfig({ // ここに実行タスクを記述する uglify: { dest: { files: { 'dest/js/scripts.min.js': ['src/js/*.js'] } } } }); // プラグインを使用するときにタスクを読み込む記述を追加 grunt.loadNpmTasks('grunt-contrib-uglify'); // デフォルトタスクなどのタスクを設定 grunt.registerTask('default', []); }
デフォルトタスクは設定していませんが、この時点でもタスク名を指定したタスクの実行が可能です。今回の場合だと、grunt uglify
でminifyが実行されます。
デフォルトタスクの設定
defaultというタスク名のタスクを指定すると、grunt
を実行するだけでそのタスクが実行されます。ここではuglifyをデフォルトタスクにしてみましょう。grunt.registerTask()
の箇所を以下のように変更します。
grunt.registerTask('default', ['uglify']);
grunt
を実行するだけで、minifyが実行されるようになりました。
これで基本的なGruntfile.jsが完成です。Gruntfile.jsは次のようになります。
module.exports = function(grunt) { grunt.initConfig({ // ここに実行タスクを記述する uglify: { dest: { files: { 'dest/js/scripts.min.js': ['src/js/*.js'] } } } }); // プラグインを使用するときにタスクを読み込む記述を追加 grunt.loadNpmTasks('grunt-contrib-uglify'); // デフォルトタスクなどのタスク名を設定 grunt.registerTask('default', ['uglify']); }
ちなみに、Gruntfile.jsの代わりにCoffeeScriptを使ってGruntfile.coffeeを作成して使用することもできます。特にプラグインや設定の必要もありませんので、Coffeeに慣れている方はどうぞ。個人的にはそんなにCoffee使ってないのですが、Gruntの範疇なら簡単な記述しかしないので特に困ることもなく書けますし、なにより楽なんでいいかなと。
次回は色々とそれっぽいプラグインを追加してみることにします。と思ったのですが、タスクの記述方法についてきちんと理解していなかったため、そこを調べてみることにしました。
Gruntの復習 (1)インストールから初期設定
2014/1/2
Gruntは使っていたのですが、さわりしか使っていない気がしたので、整理も兼ねて学び直すことにしてみました。ちなににGruntのバージョンは0.4.2を使用しています。
インストール
Node.jsのインストール
Gruntの実行にはNode.jsが必要ですので、インストールします。
公式サイトのダウンロードからパッケージを入手してもよいですし、nodebrewを使うのも手です。
grunt-cliのインストール
Gruntのcliツールであるgrunt-cliをインストールします。
Node.jsのパッケージマネージャーであるnpmから、以下のコマンドでグローバル(システムで共有)インストールします。-gがグローバルインストールのオプションです。
npm install -g grunt-cli
プロジェクトへの導入
package.jsonの作成
Gruntの実行には、npmで使用するモジュール群の依存関係やバージョンを管理するpackage.jsonが必要です。この作成のため、プロジェクトの適当なディレクトリ(トップディレクトリなどでよいと思います)などで以下のコマンドを入力します。
npm init
すると、プロジェクト名やバージョン等々聞かれますので、それに答えていくとpackage.jsonができます。ちなみにnameとversionを書いておけば、あとは削除してもOKのようです。
gruntのインストール
先程はcliツールのgrunt-cliをインストールしましたが、今度は本体のgruntをインストールします。これはグローバルである必要はありませんので、package.jsonのあるディレクトリにて、以下のコマンドを実行してインストールしましょう。
npm install grunt --save-dev
ちなみに--save-devがは、このコマンドでインストールしたモジュールをpackage.jsonの記述にも追加する便利なオプションです。このように、必要なモジュールとして追加されています。
{ "name": "grunt-test", "version": "0.0.0", "devDependencies": { "grunt": "~0.4.2" } }
このように、package.jsonに必要なモジュールを記述しておくと、package.jsonを受け取った人はpackage.jsonのあるディレクトリでnpm install
を実行するだけで記述モジュールをインストールすることができます。複数人での開発などに有用ですね。
で、次は実行するタスクを記述するGruntfile.jsの作成ですが、今日はこのへんで次回に。
Bootstrap 3をWebページ制作環境にしよう(3) LESSファイルでのカスタマイズ
えらく前になりましたが、前回のGruntでのwatchとlivereload環境設定ができましたら、最後に書いてあるように、トップディレクトリでgrunt watchreload
を実行し、ブラウザ側の拡張機能をonにして、livereloadが実行されるようにしておきましょう。
今回は、スタイルのカスタマイズにCSSを編集するのではなく、LESSを編集して効率的にやりましょう、という話です。LESSでは変数や関数、mixinなどの機能が使えます。Bootstrap3でもそれらを活用してLESSからCSSを生成していますので、利用者もそれに乗っかってやれば、CSSを直接編集するのに比較して効率的に作業ができちゃいます。
LESSファイルの場所
トップディレクトリ配下のless
ディレクトリ配下にあります。
たくさんあって面食らうと思いますが、それらをざっくり解説します。
Bootstrap3 LESSファイルの解説
bootstrap.less
BootstrapにおけるLESSファイルの親玉です。LESSでは他のLESSファイルを読み込むことができますのが、ここではその機能を使い、色々なLESSファイルを読み込む記述をしています。これがCSSに変換されると、bootstrap(.min).cssになります。
もし使いたくない機能があれば、そn読み込み部分を削除してあげればOKです。
theme.less
Bootstrap3ではフラットデザインにしたくない人向けにbootstrap-theme.cssというスタイルシートを用意していますが、その変換元です。
variable.less
各種変数をここで定義しています。Bootstrap3のカスタマイズサービスで変更可能な変数は大抵ここにあります。このファイルを変更しながら作業するほうがすぐに反映結果を確認することができ、効率的ですね。おそらく、一番変更することになるでしょう。
中の変数については、変数名でなんとなく想像がつくでしょう、ということで割愛します。
mixin.less
clearfixやCSS3機能のベンダプレフィックス付与mixinが定義されています。ここは変更するというよりも、どのようなmixinが定義されているか確認して、余裕があればそれを利用する感じでしょうか。
残りはざっくりとした解説です。
スタイルのベースとなるLESSファイル
- grid.less グリッドの定義
- normalize.less normalize.css のLESS版
- print.less 印刷用スタイル
- scaffolding.less スキャフォルド
- type.less タイポグラフィ
部品定義のLESS
名前でわかると思います。
- alerts.less
- badges.less
- breadcrumbs.less
- button-groups.less
- buttons.less
- carousel.less
- close.less
- code.less
- dropdowns.less
- forms.less
- glyphicons.less
- input-groups.less
- jumbotron.less
- labels.less
- list-group.less
- media.less
- modals.less
- navbar.less
- navs.less
- pager.less
- pagination.less
- panels.less
- popovers.less
- progress-bars.less
- responsive-utilities.less
- tables.less
- thumbnails.less
- tooltip.less
- wells.less
その他
- component-animations.less フェードアウトなどアニメーションの定義
- utilities.less ユーティリティクラス
変更のポイント
まずはvariable.lessを変更して、LESSそのものやBootstrap3でのLESSファイルの構成に慣れてきたらスタイルのベースとなっているものに手を出していく感じになるかと思います。
ということで、このシリーズはひとまずこれで終わり、ということで。
『HTML5プロフェッショナル認定資格 レベル1 教科書』を書きました
とっととBootstrapの続き書けやボケって声も聞こえてこなくはないのですが、本を書きましたのでその紹介を。
本について
- 作者: 鈴木雅貴,重田尚孝,立川敬行
- 出版社/メーカー: エヌ・ティ・ティ ソフトウェア株式会社
- 発売日: 2013/12/17
- メディア: Kindle版
- この商品を含むブログを見る
LPIで2013.01.01から開始される予定のHTML5プロフェッショナル認定資格 レベル1向け参考書です。認定資格について詳しくはLPIサイトをご覧ください。
今回は電子書籍のみの予定です。上記のKindleと、Koboは明日17日発売予定です。
HTML5プロフェッショナル認定資格 レベル1 教科書 By: 立川 敬行,重田 尚孝,鈴木 雅貴 - eBook - Kobo
あと、Kinoppyでも出るはず。iBooksも遅れて出る、かな?
中身ですが、あくまで試験対策本であり、試験範囲の知識を網羅するものになっています。リファレンス的な。この試験、やたらと試験範囲が広いですが、これを使えば効率的に情報を収集できるでしょう。問題集もついてます。ただ、読み物として面白いかと言われるとたぶん面白くないのでご注意を。
本を書いてみて
今回は最初から電子書籍のみで出すつもりだったためでんでんコンバーターを検討していたのですが、Markdownがよくわからんという人のために今回は一度HTMLを作って、それを制作会社にEPUB化してもらう方法をとりました。
が、結局最終的にHTMLをMarkdownからpandocで生成していたので、ゴリ押ししてしまえばよかったと思う次第です。そして、MarkdownからHTMLなのにkobo/gaiden使わなかったのは余裕がなかったためです。時間とか心とか。ごめんなさいごめんなさい。
で、EPUB制作。制作会社の方には色々と対応していただきそれには満足しているのですが、今度は自分で最後まで面倒見たい欲が出てきました。ということで、次の機会があって手段を選択できるなら、EPUBまで自分のところで出せる手段をとりたいと思ってます。
ということで
試験を受けようと思う方、本書をぜひご検討ください!
HTML5 Conference 2013に参加しました
11/30(土)に開催されたHTML5 Conference 2013に参加してきました。ボランティアスタッフとして。
なぜボランティア参加?
勤務先がスポンサーになれなかったので、せめてボランティアでも、と思いまして。
なにやったの?
私はルーム担当でした。やることはセッション部屋のドア開け閉め等の誘導、タイムキーパー、聴講者数計上など。1部屋に3,4名で一人2−3コマ担当という感じです。
ボランティア参加してどうだった?
9:30現地集合は結構早くてびっくりしましたが、ルーム作業をこなしながらセッションを聞けるくらいの余裕はありますし、担当コマ以外は普通にセッション聞けますし、お昼出ますし、スタッフ用休憩場所もありますし、スタッフ同士の交流もありますし、Tシャツもらえますし、懇親会出られますし、ボランティアといいながらかなーりお得なんではないでしょうか。
ボランティアスタッフとしての反省点
セッション終了時の入退場はもうちょっとうまくできたかなぁ、と。担当ドアとかをかっちり決めておくくらいしておけばよかったかも。
振り返って
楽しかったので、またボランティアスタッフとして参加できればと思ってます。html5jスタッフのみなさま、すばらしいイベントに参加させていただき、ありがとうございました!
Bootstrap 3をWebページ制作環境にしよう(2) LiveReloadの実現
前回の事前準備ができましたら、今度はLiveReloadできるようにしましょう。
WebブラウザへLiveReload用拡張を追加
How do I install and use the browser extensions? – LiveReload Help & Supportを参考に、WebブラウザへLiveReload用拡張を追加しておきましょう。
grunt側でLiveReloadの設定
BootstrapのGruntfile.jsを見るとgrunt-contrib-watchを使っていますので、grunt-contrib-watchしてれば簡単にLiveReloadできるに書いたように、grunt-contrib-watchのオプションで簡単にLiveReloadできちゃいます。
今回は、とりあえずLiveReloadを動作させるということで、以下のようにします。
- トップディレクトリ配下にtest.htmlを作成
- cssやjsはdist配下のものを使用
- test.htmlが更新されたらLiveReloadされる
1,2に合わせたHTMLファイルは以下のような感じです。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="dist/css/bootstrap.min.css"> </head> <body> <h1>LiveReload</h1> <script src="http://code.jquery.com/jquery.js"></script> <script src="dist/js/bootstrap.min.js"></script> </body> </html>
Gruntfile.jsのwatchの部分を以下のようにしましょう。
watch: { /* 略 */ recess: { files: 'less/*.less', tasks: ['recess'] } }, /* 以下htmlを追加 */ html: { files: 'test.html', tasks: [], options: { livereload: true } } }
そして、grunt.registerTask()を実行しているあたりで、ローカルにサーバ起動しつつwatchを実行するgruntタスクを追加しましょう。ローカルでサーバを起動するconenctはすでにありますので、それを使って。今回はwatchreloadというタスク名にします。
grunt.registerTask('watchreload', ['connect', 'watch']);
LiveReload実施
トップディレクトリで以下のコマンドを実行し、作成したwatchreloadタスクを起動しましょう。
$ grunt watchreload
Webブラウザで http://localhost:3000/test.html を開くと、先ほど作成したHTMLファイルを開くことができるはずです。
そして、WebブラウザにインストールしたLiveReload拡張を有効にして(デフォルトのポートは35729です)、test.htmlを書き換えると、自動でWebブラウザが再読込され、変更した内容が表示されるはずです。LiveReloadが実現できました!
次回は、この環境をベースに、効率的にBootstrapを用いたサイトを作成できるようにしましょう。