吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【Gruntの設定】Sassファイル複数対応、ブラウザの自動更新、これでコーディングがよりスムーズに!

2014年5月25日 / category : その他-lab

コーディングの環境をまた変えました。今までは、下の記事のような環境でコーディングをしていました。
http://tsudoi.org/weblog/?p=2382
簡単に言うと、

【テキストエディタ】
Dreamweaver → sublime text

【ファイルアップロード】
DreamweaverのPUT機能 → winSCPのミラーリングアップロード機能(自動アップロード)

これで作業が速くなり、それなりに満足していましたが・・・
Sassの作業が多くなったことで、これでは作業がスムーズにはいかないとストレスが出てきてしまいました。

【作業がスムーズにいかない要因】
1.SassからCSSへのコンパイルをコマンド「compass w」での監視(自動化)、さらにwinSCPのミラーリングアップロード機能(自動アップロード)、2重の自動更新待ちになってしまい、時間がかかってしまう。
2.Sassの複数ディレクトリの対応ができない。

上の2つの問題で、作業効率がよろしくなく、解決策を探していました。
そこで見つけたのがGruntです。
ただ、「うわ~、設定面倒くさそうだな~っ」というのが正直な感想で、他に何か簡単そうな解決策はないか探しましたが・・・、どうもなさそうなので、ここは覚悟を決めて、Gruntを設定しました。

設定後の感想は、「快適!!やってよかった!!」

ということで、この設定を忘れないように、僕のメモ用として、記事にしてみることにします。(設定が色々とあるので・・・)
できるだけ、わかりやすく書いてみます。また、現在これをテンプレートとして実務で使用していますが、もしかすると間違っている記述があるかもしれません。
見つけた場合は、ご連絡いただけると光栄です。

ではまず、Gruntを設定したことによってできたことを次に。

1.Sassの複数ディレクトリ対応
→ ディレクトリの違う複数のSassファイルを、自動的にCSSファイルにコンパイルしてくれます。

2.ファイルの自動更新(ブラウザ確認)
→ プロジェクトの関連ファイル(.html, .css, .js)などを、テキストエディタ上で保存すると自動的にブラウザが更新され最新の表示になる。
→ localhostでのブラウザ表示なので、更新ファイルをサーバーにアップする必要がないので、更新待ちのタイムラグがなく、スムーズに更新される。

次に、そもそもGruntとは、なんぞや?というと、
Node.jsを使用したビルドツールです。
なので、Sassのコンパイルに特化したツールではありませんので、いろんなところで使用されるツールかと思います。
実行コードを書くところは、コマンドプロンプト(win)、ターミナル(mac)などの、黒い画面を使用します。

次に、Gruntを設定するまでの手順一覧を。
【手順】
1.Node.jsのインストール
2.grunt-cli のインストール
3.package.jsonファイルの作成
4.Gruntfile.jsファイルの作成
となります。

【1.Node.jsのインストール】
次の公式サイトからNode.jsをダウンロードしてください。
http://nodejs.org/
次のディレクトリにインストールされると思います。

また、環境変数も念のため、確認。
次のように、node.jsまでのパスが追加されているかどうか。

【2.grunt-cli のインストール】
まず、grunt-cliとは、なんぞや?
おそらく、Node.jsでGruntを実行できるようにするGruntのモジュールパッケージかと思われます。
これをインストールするために、黒い画面のCUI(winの場合は、コマンドプロンプト)からコードを記述して実行します。
windowsであれば、[win]+[r]をクリックし、「ファイル名を指定して実行」画面で、[cmd]を入力して[OK]をクリックすると、黒い画面が立ち上がります。
この画面で、次のコードを記述します。

CUI : 黒い画面
npm install -g grunt-cli

[enter]を叩くと、インストールが始まります。

【3.package.jsonファイルの作成】
ここから、プロジェクトのファイルを触っていきます。
プロジェクトのサンプルデータを一式、下記にアップしましたので、ダウンロードしてください。

■サンプルプロジェクトのデータ一式
http://tsudoi.org/weblog/grunt_sample.zip

■ディレクトリ構成
index.html
Gruntfile.js(Gruntの定義ファイル)
package.json(Node.jsのライブラリなどの環境情報を管理するための設定ファイル)
config.rb(CSSファイルの出力スタイルの設定 → 同階層のsassディレクトリ用)
sass / styles.scss
css / styles.css
common / config.rb(CSSファイルの出力スタイルの設定 → 同階層のsassディレクトリ用)
common / sass / styles.scss
common / css / styles.css

package.jsonを見てみます。

package.json
{
  "name": "SAMPLE",
  "version": "0.0.0",
  "description": "",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "*",
    "grunt-contrib-watch": "*",
    "grunt-contrib-compass": "*",
    "grunt-contrib-connect": "*",
    "grunt-contrib-livereload": "*",
    "connect-livereload": "*",
    "grunt-open": "*"
  }
}

このコードの中で重要なのは、devDependenciesの中身です。
ここで指定している値は、インストールするモジュール名となります。
このサンプルでは、

→ 監視する(ファイルが更新されたかどうか)
→ Sassファイルのコンパイル
→ ライブリロード(ファイルが更新されるとブラウザも更新される)
→ Gruntの実行時に、localhostを開く

という仕様に必要なモジュール名を記述しています。
モジュールはプロジェクトごとにインストールする必要があります。
黒い画面のCUI(winの場合は、コマンドプロンプト)を立ち上げ、プロジェクトのディレクトリまで移動するコードを記述します。

CUI : 黒い画面
cd フォルダまでのパス

で、移動できます。
または、[cd] + [半角スペース]の後に、該当のフォルダを黒い画面にドラッグして、[enter]を叩くと移動できます。

サンプルデータの「grunt_sample」フォルダがディスクトップにある場合は、次のようになるかと思います。

モジュールをインストールします。次のコードを実行してください。

CUI : 黒い画面
npm install

モジュールのインストールが始まり、次ような画面になります。

インストールが終了すると、ディレクトリの中に、「node_modules」フォルダが作成されます。この中に、モジュールが一式格納されています。

【4.Gruntfile.jsファイルの作成】
Gruntfile.jsファイルとは、Gruntを定義するファイルです。サンプルデータの中のGruntfile.jsファイルをそのまま使用することもできます。
コード場所を区切って簡単に解説します。

Gruntfile.js
var pkg, taskName;
pkg = grunt.file.readJSON('package.json');

//パッケージの自動読み込み
for(taskName in pkg.devDependencies) {
    if(taskName.substring(0, 6) == 'grunt-') {
        grunt.loadNpmTasks(taskName);
    }
}

先ほどインストールしたモジュールを読み込んでいるコードです。

Gruntfile.js
//default登録
grunt.registerTask('default', ['connect', 'open', 'watch']);

Gruntを実行したときに、実行される機能名を登録しています。
このコードの場合、

connect → localhostとの接続
open → ブラウザを開く
watch → ファイルの監視

を登録しています。

Gruntfile.js
grunt.initConfig({
    //コンパイル
    compass: { },
    //監視
    watch: { },
    //接続
    connect: { },
    //ブラウザを開く
    open: { }
});

initConfig関数の中に、Gruntの実行文を記述します。
サンプルで定義しているのは、

compass → コンパイル
watch → ファイルの監視
connect → localhostとの接続
open → ブラウザを開く

です。各機能の定義をひとつずつ見ていきます。

Gruntfile.js
//コンパイル
compass: {
    dist: {
        options: {
            config: 'config.rb'
        }
    },
    common: {
        options: {
            config: 'common/config.rb'
        }
    }
}

Sassのコンパイル機能です。
サンプルデータでは、Sassファイルが2つ、別のディレクトリにあり、config.rb(CSSファイルの出力スタイルの設定ファイル)も2つあります。
このconfig.rbファイル分、記述が必要です。
オブジェクトのキーはおそらく、任意で問題ないと思います(検証していません)が、optionsのconfigに、それぞれ参照先を指定してください。

Gruntfile.js
//監視
watch: {
    options: {
        livereload: LIVE_RELOAD_PORT
    },
    sass: {
        files: [
            'common/sass/styles.scss',
            'sass/styles.scss'
        ],
        tasks: ['compass']
    },
    html: {
        files: ['./**/*.html'],
        tasks: ['']
    },
    css: {
        files: ['./**/*.css'],
        tasks: ['']
    },
    js: {
        files: ['./**/*.js'],
        tasks: ['']
    }
}

ファイル監視機能です。
Sassファイルに関しては、2ファイル分、指定をしています。
その他、htmlファイル、cssファイル、jsファイルについては、すべてのファイルを対象となるように記述しています。

Gruntfile.js
//接続
connect: {
    options: {
        port: 9000,
        hostname: '0.0.0.0'
    },
    livereload: {
        options: {
            middleware: function (connect) {
                return [
                    lrSnippet,
                    mountFolder(connect, './')
                ];
            }
        }
    }
}

localhostへの接続機能です。
portに9000を指定していますので、
URLは、

http://localhost:9000/

となります。

Gruntfile.js
//ブラウザを開く
open: {
    server: {
        url: 'http://localhost:<%=connect.options.port%>'
    }
}

ブラウザを開く機能です。
Gruntを実行したタイミングで、自動的にブラウザが立ち上がります。

これですべての準備が整いました。
それでは、実際にGruntを実行してみましょう。

黒い画面のCUI(winの場合は、コマンドプロンプト)で、次のコードを記述して実行します。

CUI : 黒い画面
grunt

この実行文で、registerTask関数のdefaulで登録した機能が実行されます。
実行したことで、ブラウザが立ち上がっていると思いますので、正しく監視されているか確認してみてください。

Sassファイルを更新する → CSSファイルが更新される → index.htmlの表示内容が更新される(ブラウザが自動更新される)

となるはずです。
いかがでしょうか。