nodebrewでバージョン管理してる場合にSublimeText3でCSScombが動かない問題

SublimeTextにCSScombというめちゃくちゃ便利なパッケージがあります。CSScombはNode.jsで動いているので、使うときはNode.jsをインストールする必要があります。

CSScomb JS を Sublime Text 3 で使ってみる | Web Design Leaves
※記事では「CSScomb js」となっていますが現在は「CSScomb」と表示されるようです。

ところがNode.jsをnodebrewで管理している場合、パッケージをインストールしてもCSScombが動いてくれません。

ググっても情報が出てこないので、パッケージ内のファイルを調べているとREADMEにこのような記述がありました。
Package/CSScomb/README.md

### Caveats

If node has been installed with NVM you need to make a symlink to node in `/usr/local/bin`. Using OS X, the binary path would typically be `/Users/[your name]/.nvm/[node version]/bin/node`.

英語は苦手なのですが、Node.jsのバージョン管理ツールNVMを使っているときはシンボリックリンクを貼る必要がありますよ、と書いてあるようです。

解決方法

この情報を参考に下記コマンドでシンボリックリンクを作成したところ、CSScombがうまく動いてくれました。

$ li -s ~/.nodebrew/current/bin/node /usr/local/bin/node

なんとか解決できました。

GruntでSassのビルドとjsファイルの結合・圧縮を自動化

JSファイルの結合と圧縮を自動化したくて色々調べていたのですが、やはりGruntが一番便利だということで導入してみたました。
結論からいうと、もっと早く導入すればよかった。

Gruntの導入

導入部分は下記を参考に。

Windowsの場合
http://webdrawer.net/javascript/firstgrunt.html

Macの場合
http://catcher-in-the-tech.net/461/

Gruntfile.js を記述

module.exports = function(grunt) {

    grunt.initConfig({
                //Sassをビルド
        sass: {
            options: {
                style: 'compressed',//CSSのスタイル
                sourcemap: true,//ソースマップを書き出す
                noCache: true//キャッシュファイルを生成しない
            },
            styles: {
                src: 'scss/inc_sc.scss',//SCSSファイル
                dest: 'css/inc_sc.css'//CSSファイル
            }
        },

                //JSファイルを圧縮
        uglify: {
            js: {
                src: "js/import.js",//圧縮するファイル
                dest: "js/import.min.js"//圧縮したファイル
            }
        },

                //JSファイルを結合
        concat : {
            js : {
                src : [//結合するファイル
                'js/app.js',
                'js/app.namespace.js',
                'js/app.databind.js',
                'js/app.gallery.js'
                ],
                dest : 'js/import.js'//結合したファイル
            }
        },

                //監視対象のファイル
        watch: {
            sass: {
                files: ["scss/*.scss"],
                tasks: ['sass']//対象が変更されると実行されるタスク
            },
            js: {
                files: ["js/*.js"],
                tasks: ['concat','uglify']//対象が変更されると実行されるタスク
            }
        }

    });

        //使用するなプラグイン
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');

};

Gruntfile.jsの記述は前述のサイトやCordGridを参考にしました。

実行（コマンド）

grunt watch

(Windowsの場合)
grunt.cmd watch

実行するとファイルの監視が始まります。
今回の場合はjsフォルダ、scssフォルダ内のファイルに変更があると、それぞれのタスクが実行されます。

おまけ

Gruntの実行にいちいちコマンドを打つのが面倒な場合は、下記の記事の要領でバッチファイルを作成して該当のフォルダに設置しておけば便利です。

Sassのビルドにバッチファイルを利用する - bata's log