[Grunt & Yeoman] Gruntfile をもう少し探る

Gruntfile の中身について確認してみる。

前回の続きです。
[markdown]
> * [Grunt: タスクランナーで自動化する | deadwood](https://www.d-wood.com/blog/2013/11/07_4989.html)

公式にのっていた Gruntfile.js を確認してみます。

> * [Getting started – Grunt: The JavaScript Task Runner](http://gruntjs.com/getting-started)
> * [タスクの設定 | Grunt 日本語リファレンス | js STUDIO](http://js.studio-kingdom.com/grunt/doc/configuring_tasks)

“`javascript:Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),
uglify: {
options: {
banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n’
},
build: {
src: ‘src/sample.js’,
dest: ‘build/<%= pkg.name %>.min.js’
}
}
});
// Load the plugin that provides the “uglify” task.
grunt.loadNpmTasks(‘grunt-contrib-uglify’);
// Default task(s).
grunt.registerTask(‘default’, [‘uglify’]);
};
“`

## ファイル

uglify を実行すると、src: /src の入力を、dest: /build へ出力するようです。
このディレクトリについては、Grunt Project で推奨されるファイル構成に関する情報は見つけられませんでした。
以下のような命名が多く見られたのですが、

“`prettyprinted
src
dist (distribution)
build
dest (destination)
test
“`

/src にソースファイルを置いて、concat や compile を /dist や /build に一時ファイルを置きながら作成して、/dest に納品ファイルを置くような運用イメージでしょうかね？
うーんわからん。

追記(2013/11/11) こんな感じにしようかと思います。

* docs ドキュメント
* src コンパイル前のソース。この中をさわる。
* dist 納品ファイル。デプロイ用。
* test テスト。

### .gitignore

ということはこんな形になるでしょうか。

“`prettyprinted
node_modules/
build/
dist/
“`

### ファイル操作の記法

下記の3つがあるそうです。

> * [JavaScript – grunt 入門 – Qiita [キータ]](http://qiita.com/mikakane/items/a64ffb8bea310354382b)

* Compact Format
* Files Object Format
* Files Array Format

上記の例は、Compact Format になりますね。

## テンプレート

`<% %>` はテンプレートで、実行時に展開されるとのこと。
`<%= pkg.name %>` は、package.jason の name を引っ張ってくるようで、結果、build/gruntSample.min.js といったファイルが生成されることになります。
src/sample.js を作成して、grunt を実行してみます。

> * [grunt.jsを使って、frontendのビルドを行う – Qiita [キータ]](http://qiita.com/sinmetal/items/ab34c02fe26e994876a6)

“`javascript:src/sample.js
function hoge() {
var hoge = ” hoge fuga”;
console.log(hoge);
}
“`

“`prettyprinted
% grunt
Running “uglify:build” (uglify) task
File “build/gruntSample.min.js” created.
Done, without errors.
“`

## オプション

uglify に banner オプションを付けて実行されています。

> * [gruntjs/grunt-contrib-uglify](https://github.com/gruntjs/grunt-contrib-uglify)

“`javascript:build/gruntSample.min.js
/*! gruntSample 2013-11-08 */
function hoge(){var a=” hoge fuga”;console.log(a)}
“`

コメントが追加されています。

## Gruntfile.coffee

ディレクトリを整理したり、初期設定を加えつつ、.coffee に書き直してみる。

“`coffeescript:Gruntfile.coffee
module.exports = (grunt) ->
‘use strict’
# package.json の読み込み
pkg = grunt.file.readJSON ‘package.json’
# グラントタスクの設定
grunt.initConfig
# config
dir:
src: ‘src’
dest: ‘dest’
pkg:
name: ‘gruntSample’
# uglifyの設定
uglify:
options:
banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n’
build:
files: [
src: ‘<%= dir.src %>/sample.js’,
dest: ‘<%= dir.dest %>/<%= pkg.name %>.min.js’
]
# プラグインの読み込み
# grunt.loadNpmTasks ‘grunt-contrib-watch’
for taskName of pkg.devDependencies when taskName.substring(0, 6) is ‘grunt-‘
grunt.loadNpmTasks taskName
# タスクコマンドの設定
grunt.registerTask ‘default’, [‘uglify’]
“`

package.json から、pkg.name を取り出す表現が分からなかった。

以下の追記(2013/11/11)で解決しました。

## matchdep でコンポーネントをロードする

package.json の読み込みとコンポーネントのロードを、matchdep で行ったところ、スッキリまとめることができました。

“`prettyprinted
% npm install matchdep –save-dev
“`

> * [matchdepを使ってGrunt.jsのプラグインを自動ロードする | Re* Programming](http://nantokaworks.com/?p=955)
> * [オリジナルビルド環境をGrunt 0.4.xへ移行｜Blog｜Skyward Design](http://www.skyward-design.net/blog/archives/000159.html)

“`ruby:Gruntfile.coffee
‘use strict’
module.exports = (grunt) ->
# matchdep を利用してプラグインを読み込む
require(‘matchdep’).filterDev(‘grunt-*’).forEach(grunt.loadNpmTasks)
# グラントタスクの設定
grunt.initConfig
# config
dir:
src: ‘src’
dest: ‘dest’
pkg: grunt.file.readJSON “package.json”
banner: ‘/*! <%= pkg.name %> <%= pkg.version %>\n’+
‘<%= grunt.template.today("yyyy-mm-dd HH:MM:ss Z") %> */\n’
# uglifyの設定
uglify:
options:
banner: ‘<%= banner %>‘
build:
files: [
src: ‘<%= dir.src %>/sample.js’,
dest: ‘<%= dir.dest %>/<%= pkg.name %>.min.js’
]
# タスクコマンドの設定
grunt.registerTask ‘default’, [‘uglify’]
“`

## 補遺

こんな書き方もできました。

“`javascript:package.json
“path”: {
“src”: “./src”,
“dist”: “./dist”
},
“`

“`coffeescript:Gruntfile.coffee
files: [‘<%= pkg.path.src %>/**/*.html’]
“`
[/markdown]