GitHub Pagesでいくつか静的なWebページを作成しているのですが、生のcssではなく、sassでcssを作成することにしました。
sassを使おうとして、調べるとgemでsassをインストールして始めるという記事が見つかります。
- CSSのメタ言語Sass(SCSS)、LESSの完全入門
また、Compassというものも出てきたりします。
- CSSの常識が変わる！「Compass」の基礎から応用まで！
またフロントエンドの環境などについて知っていたりすると、gruntやgulpといったタスクランナーも使えるんじゃないかと思ったりして、それらでsassを使う方法も出てきたりします。
- gulp インストール～基本設定の備忘録（windows）
ふむふむ、といった感じで記事を読んだりするのですが、やらないといけないことやルール、覚えないといけないことが多くて、結局どうするのがいいのだろうと迷ってしまいました。
gruntやgulpは確かに便利ですが、ミニマムに始めるにはちょっとやることが多い気がしたり、一週間後に見た時にどうやるか忘れてる自信もあります。
ミニマムにやる方法を調べる中たどり着いたのが、npmのrun scriptを使うという方法です。
- Grunt/Gulpで憔悴したおっさんの話
- Watch & Compile your Sass with npm.
npm
npmについては以下の記事がわかりやすいです。
- npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう
npmはnode.jsで書かれたツールのパッケージマネージャで、gruntやbowerもnpmでインストールします。Grunt/Gulpで憔悴したおっさんの話によると、"Node.js/npmに関する知識とかUNIXに関する知識は、数ヶ月で変わることもない＂ので、npmでやるのが簡単そうです。
始める
先に大まかな流れを書くと以下のようになります。
npmのみを使うので、シンプルです。
- nodeをインストールする
- npmでsassのコンパイルに必要なツール、ファイルの監視に必要なツールをインストールする
- npm run scriptでsassをコンパイルする
では、サンプルを用いて詳細を書きます。
環境
使用している環境は以下です。
- OS: OSX 10.11.2 El Capitan
- パッケージマネージャ: homebrew 0.9.5
node.jsのインストール
homebrewでnode.jsをインストールします。
$ brew install node
プロジェクトを作る
例として、Webサイト用のディレクトリをデスクトップに作成します。ここでは、mysiteというディレクトリにします。
$ mkdir ~/Desktop/mysite && cd ~/Desktop/mysite
npmの初期設定を行います。
$ npm init
いろいろ聞かれますが、とりあえずエンター。
sass用のディレクトリ scss 、sassをコンパイルした後にcssを出力する用のディレクトリ cssを作成します。
$ mkdir scss css
ソースをgitで管理する場合に、npmを使用した際に作成されるnode_moduleは不必要なので、gitで管理しないように.gitignoreを作成します。
$ touch .gitignore
.gitignoreに関しては、GitHubによって公開されている.gitignoreリポジトリのNode.gitignoreを参考にするといいと思います。
次にscssファイルを作成します。
$ touch style.scss
以上でプロジェクトの構成は終了です。
npmでツールをインストールする
sassのコンパイルに必要なツール node-sass と、ファイルの更新管理に使用するツール nodemon をnpmでインストールします。
$ npm install -D node-sass nodemon
sassをコンパイルする
npmを使用するとpackage.jsonというファイルができていますが、その中のscriptsの部分に、sassコンパイル用のscript, 監視用のscriptを記述します。
"scripts": {
"build-css": "node-sass --include-path scss scss/style.scss css/style.css",
"watch-css": "nodemon -e scss -x \"npm run build-css\""
}
build-css, watch-cssの部分を npm run の後に書くことで、コマンドを実行できます。
npm run build-css コマンドを実行すると scss/style.scss が css/style.css にコンパイルされ、 npm run watch-css コマンドを実行するとscssの変更が監視されます。
style.scssにコードを書いて、コンパイルします。
$my-color: #3d3d3d;
body {
color: $my-color;
}
$ npm run build-css
これで、css/style.css が作成され、以下のようなファイルができると思います。
body {
color: #3d3d3d;
}
シンプルに
上記のように、nodeの使い方以外を知らなくても、sassを使用する環境を整えることができ、比較的シンプルなのではないかと思っています。
sassライフが捗りそうです。
おまけ
nodeを使えばローカルサーバーも簡単に立ち上げられます。
local-web-serverを使用します。
$ npm install -D local-web-server
package.json
"scripts": {
"build-css": "node-sass --include-path scss scss/style.scss css/style.css",
"watch-css": "nodemon -e scss -x \"npm run build-css\"",
"ws": "ws"
}
$ npm run ws