最近、会社で遭遇したいくつかの現象をブログに書こうと何度か思ったのですが、なぜか自宅ではそれらの現象が再現できないということが何度かあって更新頻度が減っています(ただのいいわけ)。
先日、フロントエンド開発徹底攻略 (WEB+DB PRESS plus)に収録されていたGruntの詳しい解説を読んでちょっとだけ触ってみた。
実行にはNode.jsが必要なようなので、下記ページからNode.jsをインストールして実行。
node.js
コマンドプロンプトを開いて、nodeコマンドの確認
C:\>node -v v0.10.32
インストールできていることが確認できる。
続いて、Gruntコマンドをnpmからインストール。自分の環境だと下記のようになった。
C:\>npm install -g grunt-cli C:\Users\FMVF56DDRZ\AppData\Roaming\npm\grunt -> C:\Users\FMVF56DDRZ\AppData\Roa s\grunt-cli\bin\grunt grunt-cli@0.1.13 C:\Users\FMVF56DDRZ\AppData\Roaming\npm\node_modules\grunt-cli ├── resolve@0.3.1 ├── nopt@1.0.10 (abbrev@1.0.5) └── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11) C:\>grunt --version grunt-cli v0.1.13
インストール時に-gオプションをつけることで、システムグローバルなパスにインストールすることになるらしい。試しにユーザー環境変数のPATHを調べてみると、”C:\Users\FMVF56DDRZ\AppData\Roaming\npm”が追加されており、そのフォルダを見てみると、”grunt”と”grunt.cmd”というファイルが追加されていた。
ところで、上記でインストールしたのはGruntのフロントエンドであるコマンド郡なだけで、バックエンドのGrunt本体は別途インストール必要があるよう(このあたり、まだよく分かってません。本に書いてあったことをそのまま書いてるだけです)。
というわけで、Gruntを動かそうとしているパスに移動して、Grunt本体をインストールすることに。
C:\>cd C:\Users\FMVF56DDRZ\Dropbox\grunt C:\Users\FMVF56DDRZ\Dropbox\grunt>npm install grunt grunt@0.4.5 node_modules\grunt ├── dateformat@1.0.2-1.2.3 ├── which@1.0.5 ├── eventemitter2@0.4.14 ├── getobject@0.1.0 ├── colors@0.6.2 ├── rimraf@2.2.8 ├── async@0.1.22 ├── hooker@0.2.3 ├── grunt-legacy-util@0.2.0 ├── exit@0.1.2 ├── nopt@1.0.10 (abbrev@1.0.5) ├── lodash@0.9.2 ├── coffee-script@1.3.3 ├── underscore.string@2.2.1 ├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0) ├── iconv-lite@0.2.11 ├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3) ├── findup-sync@0.1.3 (glob@3.2.11, lodash@2.4.1) ├── grunt-legacy-log@0.1.1 (underscore.string@2.3.3, lodash@2.4.1) └── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)
本当は、package.jsonというものを作って、–save-devオプションをつけてインストールするのがいいらしい。ただ、自分自身がよく分かってないのでそこまでしないことに。
とりあえず、UglifyJSというJavaScriptファイルをミニファイするツールを使ってみることにしてみる。
C:\Users\FMVF56DDRZ\Dropbox\grunt>npm install grunt-contrib-uglify npm WARN package.json grunt@1.0.0 No description npm WARN package.json grunt@1.0.0 No repository field. npm WARN package.json grunt@1.0.0 No README data grunt-contrib-uglify@0.6.0 node_modules\grunt-contrib-uglify ├── uri-path@0.0.2 ├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-colo 1.0, strip-ansi@0.3.0) ├── lodash@2.4.1 ├── uglify-js@2.4.15 (uglify-to-browserify@1.0.2, async@0.2.10, optimist@0.3. ) └── maxmin@1.0.0 (figures@1.3.3, pretty-bytes@1.0.1, gzip-size@1.0.0)
UglifyJSをインストールしてみようとすると、なぜかワーニングが表示された。見た感じ、package.jsonを用意してないのが悪いのだろうか？ このあたりはよく分かってない。
つづいて、ミニファイを行う2つのJavaScriptファイルを置く(さすがに全く同じなのもなんなので、本に書かれているコードとは少し変えている)。
// sample01.js
function viewYourDomain(domain){
console.log("あなたのサイトドメインは、" + domain + "です");
}
// sample02.js
(function(){
viewYourName("am-yu.net")
})();
それと、Gruntを実行するには、Gruntfile.jsというファイルが必要なようなので、下記のように書いて置く。
module.exports = function(grunt){
grunt.initConfig({
uglify: {
dist: {
files: {
"output.min.js" : [
'sample01.js',
'sample02.js'
]
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
}
いろいろ書いてありますが、とりあえずこれでsample01.jsとsample02.jsをミニファイルしたoutput.min.jsというファイルを作成する準備ができました。
というわけで実行。
C:\Users\FMVF56DDRZ\Dropbox\grunt>grunt
Running "uglify:dist" (uglify) task
>> 1 file created.
Done, without errors.
C:\Users\FMVF56DDRZ\Dropbox\grunt>dir
ドライブ C のボリューム ラベルがありません。
ボリューム シリアル番号は 4270-BB9E です
C:\Users\FMVF56DDRZ\Dropbox\grunt のディレクトリ
2014/10/13 23:36 <DIR> .
2014/10/13 23:36 <DIR> ..
2014/10/13 23:32 420 Gruntfile.js
2014/10/13 23:24 <DIR> node_modules
2014/10/13 23:36 134 output.min.js
2014/10/13 23:19 273 package.json
2014/10/13 23:31 116 sample01.js
2014/10/13 23:31 50 sample02.js
5 個のファイル 993 バイト
3 個のディレクトリ 722,789,453,824 バイトの空き領域
ちゃんと作成されました。試しにoutput.min.jsを開いてみると、下記のようになっていました。
function viewYourDomain(a){console.log("あなたのサイトドメインは、"+a+"です")}!function(){viewYourName("am-yu.net")}();
改行やムダなスペースをなくすだけでなく、変数名の短縮や、ちょっとした実装の変更まで行ってくれるようです。
他にも、Gruntには、grunt-contrib-watchというプラグインを使えばファイルの更新を検知して自動的にタスクを実行してくれるという便利な機能があるようです。
Gruntは名前ぐらいは聞いたことあったのですが、確かにすごい便利そうです。もう少し勉強して使いこなせるようになりたいと思います。ただ、それ以前に自分の場合は、Node.jsの勉強をしたほうがいいのかもしれませんが・・・。
2014/10/18追記：
どうやら、最近はGruntよりgulpというツールのほうがよく使われているようです。
JSの開発作業自動化ツールのgulpを軽く触ってみた | while(isプログラマ)
コメント