Gruntを使ってSASS処理やJS連結をしてみる

エディタをNetBeansからSublimeTextに移行し始めて1ヶ月と少し。だいぶ環境に慣れてきたので、欲を出してGruntを試してみました。

SCSSからCSSへの変換処理だけなら、これまでどおりで良かったのですが、機能ごとに分けて作ったJSの結合もやってみたいと思っていたのがGruntを試した理由です。Gruntを導入する工程を、残しておいたEvernoteのメモから転記します。作業はTerminal.appで行います。

Macの設定

MacPortsのデータベースアップデート

  1. Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門を見ながら設定を始める。
  2. ターミナルでNode.jsが使える状態にしておく必要があるようなので、MacPortsでインストールを試みる。
  3. …と、その前にMacPortsのportデータベースのアップデート(sudo port selfupdate)をしようとすると、失敗する。どうやら定期的にアップデートしないと、不具合が起きるようだ。
  4. sudo port clean all を実行してみる(少し待つ)。
  5. もう一度、sudo port selfupdate を実行(少し待つ)。
  6. selfupdateが終わると、「The ports tree has been updated. To upgrade your installed ports, you should run port upgrade outdated」とメッセージが出たので、port outdatedを入力して、古いパッケージを確認する。
  7. ズラズラ、っと出る。
  8. sudo port upgrade installed を実行して、インストールされているパッケージのアップデートを試みる。
  9. 「Error: Problem while installing subversion-perlbindings-5.16」と言われる。
  10. sudo port -f activate subversion-perlbindings-5.16 を実行してみる。
  11. sudo port upgrade installedをもう一度実行してみる。
  12. この間、「Warning: No port ncursesw found in the index. 」のメッセージを確認。
  13. 途中でとまったので、Ctrl+Cで終了。
  14. port list installedでインストールされているパッケージを確認。
  15. sudo port -uf uninstallで重複パッケージを削除。
  16. もう一度、sudo port selfupdate を実行。

…面倒なツールだ。MacPortsの設定を完璧にするのを諦めて次の工程へ。

Node.jsのインストール

  1. sudo port install nodejsを実行。
  2. node -vでバージョン確認。インストール時は0.10.26。
  3. 【Mac OSX】node.jsをローカルで動かす! « zoomAroidを見ながらhoge.jsを、作成したnodeディレに入れ、cd移動後、node hoge.js を実行。
  4. Node.jsが動くことを確認する。

npm(パッケージ管理ツール)のインストール

  1. sudo npm install -g grunt-cliを実行。sudo: npm: command not found と言われる。
  2. sudo port install npm を実行。
  3. npm -vでバージョン確認。インストール時は1.4.4。

Gruntの設定

grunt-cliのインストール

  1. sudo npm install -g grunt-cliをもう一度実行。
  2. Gruntを使う準備が整う。

初期設定

  1. 実行ディレに移動。
  2. npm initを実行。
  3. package.json生成のための初期値を聞かれる。
  4. Gruntを使ってJSやCSSの面倒なタスクを自動化しよう | kudox.jpを見ながら設定。
  5. name : プロジェクト名
  6. version : 0.1.0(とりあえず)
  7. description : プロジェクトの説明
  8. entry point : Gruntfile.js
  9. test command : return
  10. git repository : return
  11. keywords : return
  12. author : @busstop_kuroda
  13. license : とりあえずMITにしておく。
  14. Is this ok?と聞かれるので yesと入力。

Gruntのインストール

  1. npm install grunt –save-dev を実行し、Gruntをインストール。node_modulesディレ(この中にGruntが入っている)の生成とpackage.jsonに必要な情報が追加されたのを確認。
  2. npm install grunt-contrib-watch grunt-contrib-cssmin –save-devを実行し、grunt-contrib-watch(ファイル監視処理用モジュール)とgrunt-contrib-cssmin(CSSをミニファイ保存するモジュール)を入れる。
  3. 一度、node_modulesを削除し、npm installを実行。package.jsonが使い回せるかテストする。node_modulesが無事生成されたのを確認。
  4. npm install grunt-contrib-compass –save-devを実行。
  5. npm install grunt-contrib-sass –save-devを実行。
  6. npm install grunt-contrib-connect –save-devを実行。
  7. npm install grunt-open –save-devを実行。
  8. npm install grunt-contrib-concat –save-devを実行。(ファイル結合用)

watchとconnectを併用することでLivereloadが出来るらしいので、今回は使いませんがgrunt-contrib-connectと関連しているgrunt-openも、とりあえず入れておきました。grunt-contrib-cssminもついでです。

Gruntfile.jsの作成

module.exports = function(grunt) {
  grunt.initConfig({
    //compass
    compass: {
      dist: {
        options: {
          config: 'config.rb'
        }
      }
    },
    //watch
    watch: {
      options: {
        livereload: true
      },
      //html
      html: {
        files: '*.html',
        tasks: ['']
      },
      //sass
      sass: {
        files: 'sass/*.scss',
        tasks: ['compass']
      },
      //js
      js: {
        files: 'prejs/*.js',
        tasks: ['concat']
      }
    },
    //concat
    concat: {
      prod: {
        //連結するファイル
        src: [
          "prejs/_function.js",
          "prejs/_intro.js",
          "prejs/_lightBox.js",
          "prejs/_outro.js",
        ],
        //JSファイル生成
        dest: "js/all.js"
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-concat');
  //gruntコマンドで実行するタスク
  grunt.registerTask('default', ['connect','watch','compass','concat']);
};

[Grunt] JSファイルを結合するときに無名関数として出力する | un-T factory! Interactive blogを見ながら設定してます。
watchで作業ディレ内の『sass』ディレと『js』ディレを監視し、sassはファイルに変更があればcompassタスクを実行、jsはconcatタスクを実行し、その実行内容をconcat内に記述しています。

Gruntの実行(terminal.app)

grunt

と打って実行するだけです。これで当初予定していたJSファイルの連結もSASS処理に加えて行えるようになりました。Gruntの設定よりMacPortsの設定に手こずった印象です。

Author

  • Shinichi Kuroda - 黒田晋一
  • 香川県高松市 - Takamatsu-shi, Kagawa, Japan.
  • Mail - info@studiobusstop.com