[初心者向け]Gruntのインストールからcompass,coffeeScript+αのビルドまでやってみた! | Select *
Web Web制作

[初心者向け]Gruntのインストールからcompass,coffeeScript+αのビルドまでやってみた!

gruntフロントエンドエンジニア養成読本の影響でいろいろ試している@deepblue_willです。

せっかく色々試しているので、試したなかからなんとなく動きが分かった物を備忘録がてら残していこうと思います。
今日は「Grunt」について書きます!



Gruntはいろいろやってくれるタスクランナー


まずGruntの説明から。
Gruntは一言で言ってしまうとコマンド1つでいろんなことをやってくれる超便利なツールです。
変更を監視して、ファイルを編集するたびにSassCoffeeScriptのコンパイル、ファイルのMinify(空白や改行を除去してファイルサイズを小さくする)、画像の圧縮などやってくれる優れものです。
その各々の機能はプラグインという形で提供されており、自分の好きな機能を組み合わせることができます
利用には実行にはnode.jsが必要です。
あと、皆様がお嫌いな黒い画面(ターミナル)を使います。これを気にお友達になりましょう。

まずはnode.jsのインストール

まずnode.jsをインストールします。
Windowsの場合は↑でダウンロードできるインストーラーでやればよいかと
バージョンを管理したい場合はnodistというツールもあるそうです。[参考] node.jsをインストールしてみた(Windows)

Macの場合、
homebrewを使ってる人はHomebrewで。

バージョン管理したい人nvmnodebrew使って。
[参考]
nvm を利用したnode.js のインストール – もろず blog
MacのローカルにnodebrewでNode&npmをインストール – Qiita

特にこだわりない方はサイトからパッケージをダウンロードして
インストールするのが良いかと思います。
ちなみに私はhomebrewでインストールしています。

無事インストールが終わるとnodenpmというコマンドが使えるようになるはずです。
なのでターミナルを開いて以下のコマンド打ってみましょう!バージョンが表示されたらOKです。
$ node -v
v0.10.26

$ npm -v
1.4.3



Gruntのインストール


node.jsをインストールしてしまえば、Gruntのインストールは簡単です。
なにせ以下のコマンドを打つだけですから。
$ npm install -g grunt-cli


ここまでできたらgruntコマンドを実行してみます
$ grunt
grunt-cli: The grunt command line interface. (v0.1.13)

Fatal error: Unable to find local grunt.

If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started


こんなのが出力されたらとりあえずOKです。
実はまだgrunt本体はインストールされていないのです、さきほどインストールしたのはカレントにあるGruntを実行するというモジュールだったりします。
なのでここからが本番です。

まず、適当なフォルダを作ってそこに移動し、以下のコマンドを実行します。
$ npm init


そうすると対話形式でいろいろ聞かれますが、特にこだわりなければ全部EnterでOKです。
終了するとpackage.jsonというのが作成されます。
このファイルはプロジェクトで使用するパッケージを管理するためのファイルです。
1人で制作するならいいのですが、複数人で制作する場合、各々の環境が異なっているとある人のローカルでは動作するけど、ある人のでは動かないなんて問題が起きたりします。
でもこのようなパッケージ管理ファイルがあると、npm installで同じ環境がすぐ作れるのでそんな問題も起こりにくくなります。

次に以下のコマンドを実行すれば、package.jsonにパッケージが追記され、さらにnode_moduleというフォルダが作成され、その中にgruntがインストールされます。
$ npm install grunt --save-dev


再度gruntコマンドを実行してみます
$ grunt
A valid Gruntfile could not be found. Please see the getting started guide for
more information on how to configure grunt: http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.


先ほどと違ってこんなかんじで出力されればOKです。

Gruntの肝!Gruntfile.js


GruntはGruntfile.jsに書かれた内容に従って動作します。(Gruntfile.coffeeでも可)
なので、このファイルがないと怒られるわけです。
では早速CSSをMinifyするタスクを作ってみましょう!
├── Gruntfile.js
├── node_modules
├── package.json
└── stylesheets
    ├── dir1
    │   └── sample2.css
    └── sample.css


上記のようなフォルダ構成で、sample.csssample2.cssを同じフォルダ上に*.min.cssとして生成します。
まず以下のコマンドでgrunt-cssoというプラグインをインストールします。
$ npm install grunt-csso --save-dev


次に以下をGruntfile.jsとして保存します。
module.exports = function(grunt){
  grunt.initConfig({
    csso: {
      dynamic_mappings: {
        expand: true,
        cwd: 'stylesheets/',
        src: ['**/*.css', '!**/*.min.css'],
        dest: 'stylesheets/',
        ext: '.min.css'
      }
    }
  });
  // プラグインのロード
  grunt.loadNpmTasks('grunt-csso');
  
  // タスクの登録
  grunt.registerTask('default', ['csso']);
};


ここまでやったらgruntコマンドを実行してみます。
$ grunt
Running "csso:dynamic_mappings" (csso) task
File stylesheets/dir1/sample2.min.css created.
File stylesheets/sample.min.css created.

Done, without errors.


こんなかんじに出力されればOKです。指定のフォルダにMinifyされたcssが生成されているはずです。

記述をちょっと補足します。
grunt.initConfig()中にGruntでやってほしいことをJSON形式で記述していきます。
記述の仕方はプラグインによって異なります。
書き方はだいたいプラグインのページ(grunt-csso)に書いてあるので、そんなに困らないと思います。

grunt.loadNpmTasks(プラグイン名);でプラグインを読み込みます。
つまり、プラグインが増えれば増えるほどこの記述が増えていきます。

grunt.registerTask(タスク名, [処理するタスク,...])で一連のタスクに名前をつけることができます。
コマンドを実行する時grunt タスク名でタスクを実行することもできるのですが、defaultタスクは特別でgruntで実行した時に動作するタスクを設定できます。この場合cssoタスクが実行されるようにしています。
このタスク登録を応用すると、下記の用にCSSに関するタスクをまとめたstylesheetsというタスクを作ることも可能です。
grunt.registerTask('default', ['stylesheets']);
grunt.registerTask('stylesheets', ['sass', 'csso', 'csslint']);


一歩進んだGruntfile.js

CSSを変更するたびにコマンドうってMinifyするのではめんどくさいので、CSSが変更されたらminifyされるようにしてみます。
そのためにgrunt-contrib-watchというファイルの変更を監視して、タスクを実行するプラグインをインストールします。
$ npm install grunt-contrib-watch --save-dev


そして、cssを変更したらcssoタスクを実行するように、gruntコマンドを実行したら変更を監視するようにGruntfile.jsを編集します。
module.exports = function(grunt){
  grunt.initConfig({
    csso: {
      dynamic_mappings: {
        expand: true,
        cwd: 'stylesheets/',
        src: ['**/*.css', '!**/*.min.css'],
        dest: 'stylesheets/',
        ext: '.min.css'
      }
    },
    watch:{
      css: {
        files: 'stylesheets/**/*.css',
        tasks: ['csso'],
      }
    }
  });
  // プラグインのロード
  grunt.loadNpmTasks('grunt-csso');
  grunt.loadNpmTasks('grunt-contrib-watch');
  
  // タスクの登録
  grunt.registerTask('default', ['watch']);
};


私が作ったGrunt.coffeeを公開

最後に私が2日かけて作成したGruntfile.coffeeを紹介します。
使用しているプラグインは以下のとおりです。
grunt-csso
CSSのMinify
grunt-image
画像を圧縮
grunt-csscomb
CSSのプロパティの整理
プロジェクトの直下に.csscombrc作成してその設定どおりに動作します。
設定内容は.csscombrcをそのままコピペしてます
grunt-webfont
Webフォントの生成
grunt-contrib-watch
変更の監視してタスクを実行
grunt-contrib-connect
Webサーバーを起動
grunt-contrib-csslint
ルールに従ってCSSをチェック
プロジェクトの直下に.csslintrc作成してその設定どおりに動作します。
これも.csslintrcをそのまま使ってます。
grunt-contrib-compass
compassでsassをコンパイル
設定はプロジェクトの直下にあるcompass_config.rbに書いてます。
# コンパイルするsassのフォルダ
sass_dir = "src/sass/"

# CSSは展開で出力
output_style = :expanded
# .sass-cacheは出力しない
cache = false
# CSSにSCSSの何行目か出力しない
line_comments = false


grunt-contrib-coffee
CoffeeScriptをコンパイル

そしてフォルダ構成は以下を前提にしています。
srcに.scssやcoffeeをおいて、それをGruntでstylesheetsやjavascriptsに生成しています。
├── Gruntfile.coffee
├── compass_config.rb
├── images
├── index.html
├── javascripts
├── package.json
├── src
│   ├── coffeescripts
│   ├── sass
│   └── svg
└── stylesheets



最後に

いかがでしょうか?
Gruntは仕組みをなんとなく理解して、仕組みを作ってしまえばあとはほぼ放置で良い画期的なツールです。
よくGruntのテンプレートやフォルダ構成をGithubに保存しておいて、新しいプロジェクトが始まったらそれをクローンするみたいなことをやっている方も多いそうです。
いまのWeb制作でCSSプリプロセッサーやAltJSを使わないなんてほとんどないと思うので、参考になればなと思います。
次回はbowerについて書きます!

ではでは

このブログをRSS登録する! この記事をはてブする!

Comment

Zenback

Categories

  • Lifehack (57)
  • Web (140)
  • まとめ (172)
  • コンピュータ (132)
  • 仕事 (10)
  • 趣味 (104)
  • 雑記 (88)