CygwinでGruntjsを使ってみる
前回GRUNT.jsをインストールする所まで終わりました。
今回は、実際に使用してみたり、使えるプラグインなんかを試してみたいと思います。
参考にしたサイト
前回までのおさらい
前回は、nodejsをcygwinに入れようとして、「npm init」ですごいハマリ、
あきらめかけた時に、package.jsonを自作して、gruntのインストールかましたら、
普通にいけたって感じでしたね。
cygwinでは限界があるのか！？って思ったんですけど、その辺はコマンドプロンプトか、
試してないですが、MinGWでは実行できるんじゃねーかと思います。
まぁ、ひとまずインストールが出来てたんで、Cygwinでどこまで出来るか、試してみようと思います。
Gruntfile.jsを作成しよう
まずは、どんな自動タスクを実行させるか、Gruntfile.jsファイルに記載していきます。
package.jsonと同じ階層に今回は作成しました。
まずは、以下のように、記述します。
このfunctionの中に色々書いていく事になります。
module.exports = function(grunt){ }
pluginのインストール
今回はsassのコンパイルを自動化できるようにしたいと思います。
まずは、インストールから行います。
$ npm install grunt-contrib-sass --save-dev npm WARN package.json test-project@0.1.0 No description npm WARN package.json test-project@0.1.0 No repository field. npm WARN package.json test-project@0.1.0 No README data grunt-contrib-sass@0.7.3 node_modules\grunt-contrib-sass ├── dargs@0.1.0 ├── which@1.0.5 ├── win-spawn@2.0.0 ├── async@0.2.10 └── chalk@0.4.0 (ansi-styles@1.0.0, has-color@0.1.7, strip-ansi@0.1.1)
次に、インストールしたプラグインのロード設定をGruntfile.jsにします。
module.exports = function(grunt){ //プラグインのロード grunt.loadNpmTasks('grunt-contrib-sass'); }
続いて、configを設定して、コンパイルするファイルの指定と、
出力先の指定を行います。
module.exports = function(grunt){ //config grunt.initConfig({ sass: { dist: { files: { 'source/css/style.css': 'source/sass/style.sass' } } } }); //plugin load grunt.loadNpmTasks('grunt-contrib-sass'); }
最後に、taskの実行内容を作成します。
module.exports = function(grunt){ //config grunt.initConfig({ sass: { dist: { files: { 'source/css/style.css': 'source/sass/style.sass' } } } }); //plugin load grunt.loadNpmTasks('grunt-contrib-sass'); //tasks grunt.registerTask('default', ['sass']); }
これで、準備は完了しました。
以下のように実行するタスクが走ってくれます。
$ grunt Running "sass:dist" (sass) task C:\Users\takumi-main\Desktop\dev\grunt>#!/usr/bin/env bash 文字化け文字化け文字化け文字化け文字化け文字化け文字化け C:\Users\takumi-main\Desktop\dev\grunt>set -e 文字化け文字化け文字化け文字化け文字化け文字化け文字化け C:\Users\takumi-main\Desktop\dev\grunt>[ -n "$RBENV_DEBUG" ] && set -x 文字化け文字化け文字化け文字化け文字化け文字化け C:\Users\takumi-main\Desktop\dev\grunt>program="${0##*/}" 文字化け文字化け文字化け文字化け文字化け文字化け C:\Users\takumi-main\Desktop\dev\grunt>if [ "$program" = "ruby" ]; then
んー大量の文字化け・・・早くもエラー発生していました。。。
ちなみに、コマンドプロンプトで実行すると、以下のようになります。
> grunt Running "sass:dist" (sass) task File source/css/style.css created. Done, without errors.
早くも結論が・・・もうGruntをやる場合は、Cygwinはダメですね・・・。
ローカルでやる場合は、コマンドプロンプトでやり、
Cygwinをどうしても使いたい場合は、実行環境用にVagrantを作成して、
共有ディレクトリをコンパイル先にしておく等のちょっとしたコツが必要になるかもしれません。
ひとまず、コマンドプロンプトで実行する事は出来ました。
このように、プラグインをインストールして、その設定をGruntfile.jsに書き込み、
「grunt」コマンドでタスクを実行するっていう感じの流れになります。
また、今回のタスクだけであれば、compassだけで十分って事になりますが、
今回紹介したタスクは、入門編として一部紹介しただけとなります。
これ以外にも、簡単に色んなタスクを実行する事が出来ますので、お試しあれ！
