鶏口牛後な日々

心の赴くまま、やりたいことを仕事に。

初めてのnode-sassとnpm scriptでscssファイルをcssファイルにコンパイルする

前回、npmの初めの一歩を書きました。

tacosvilledge.hatenablog.com

 

 

今回は、node-sassとcpxを入れてnpm scriptを使えるようにしたいと思います。

サイトのデザインは、scssで書いた方が、cssで書くよりも効率よく書けるので、

scssで書いたものを、cssコンパイルしてくれる機能をnpmスクリプトでやるのが目的です。

 

 

参考1:node-sass Githubのページ
参考2:npm-scripts で Web フロントエンド開発を管理する – アカベコマイリ

参考2の方が、とてもよくまとめてくださってるので、分かりやすかったです。

 

node-sassのインストー

node-sassとは?

node-sassとは、.scssファイルをcssファイルにコンパイルしてくれるライブラリです。


今勉強も兼ねて、webサービスのプロトタイプを作っているのですが、CSSとHTMLで作るよりは、少し新しい技術取り入れてやりたい、と思っていました。


先日業務委託の案件で、gulpでscssをコンパイルしてcssにするようなテンプレートを初めて使ったので、scssを使いたいと思ったところ、scssをcssコンパイルするだけであれば、gulpよりもnpm scriptというのでよりシンプルにできると聞き、インストールすることにしました。

 

npm install node-sass -S

 

  • 使い方(CLI

node-sass <input> [output]


<input>には生成元となるscssファイルを、[output]には、生成したファイルを指定すると、scssからcssファイルを自動生成してくれるのだそうな!

やりたいのはこれです!!!


その仕掛けがどうなっているのか? 詳しい中身はおいおい理解するとして、とにかく使い方をざっと学びましたので、備忘メモメモ。

 

node-sassでのscriptのコマンド

例:
node-sass src/style.scss dest/style.css

 

これで、style.scssというsassファイルから、style.cssというCSSファイルを生成してくれます。


元フォルダは、src、先ファイルはdestと名付けることが慣習的に多いとな。
また、-wオプションをつけると、scssの変更をウォッチしてくれて、変更があると都度cssファイルを生成し直して反映してくれます。

 

これをどこに書くか? と言うと、package.jsonのscriptの{}内に書きます。
そのとき、コマンドの名前は自由に決められます。

 

例:
"sass": "node-sass src/sass/style.scss dest/css/style.css -w”
ここで、”sass"というのは、名前なので、”hoge”でも、”animal"でもなんでも良いようです。

 

f:id:TACOSVilledge:20170502195513p:plain

 

  • 実行の仕方

terminal上で、一度runを打って、ちゃんとdestinationファイルに新しいcssファイルが出来上がっているか確認しましょう。
npm run sass


これは、npm run-scriptの省略形らしいです。

参考:npm script の説明ページ

 

 

f:id:TACOSVilledge:20170511155227p:plain

出来上がってました!

今回、destフォルダの中に、CSSというフォルダを作って、CSSファイルたちを格納するようにしました。

この時、1点注意が必要なのは、CSSというフォルダは勝手には作ってくれないので、destフォルダ同様、自分で作っておいてあげてください。

出ないと、タスクをrunしてもstyle.cssが生成されませんでした。

 

cpxを使ってコピーコマンドを書く

次に、htmlや画像は、そのままdestinationフォルダに収めて欲しいので、コピーするコマンドを追加します。


これには、node-sassの他に、cpxというパッケージをnpmでインストールして使うのが簡単です。


cpxの公式:https://www.npmjs.com/package/cpx

 

npmでインストールします。
npm i cpx -S

 

package.jsonに書き込むコードは以下のような形。

htmlとimgフォルダの二つは別に書きました。

 

"copy-img": "cpx \"./src/img/*.{png, jpg, gif}\" ./dest/img”
"copy-html": "cpx \"./src/*.html\" ./dest",

  

package.jsonにコードを書いたら、terminal上で、それぞれのコマンドを走らせてみましょう。

コマンドは、上記の場合だと、

 

 npm run copy-img 

 npm run copy-html

 

です。

f:id:TACOSVilledge:20170511155630p:plain

 

無事、思い通りの場所にコピーされました!!

先ほどのCSS生成と同様ですが、imgというフォルダを作って中にimgを入れたい場合、imgというフォルダは、コマンドでは自動生成されませんので、コマンドを打つ前に自分で作っておいてあげましょう。

 

 

さて、最後に、これらのcss生成と、html及びimgフォルダのコピーを順々に続けてやってくれるコマンドを書きます。


"serve": "npm run copy-html & npm run copy-img & npm run sass"

 

これで、nom run serve と打つだけで、一気にファイルをまとめて生成してくれるようになった!! 


npmやnode.jsなどサーバサイドで動くJavaScriptの初歩に足を踏み入れた!
今後も継続して色々覚えていきたい!

 

 

2017.5.29追記:

最初、個々のスクリプトに -w をつけた場合、 &&でつないだところ、前から順々に実行していくらしく、一つ目の-wで止まってしまった。-wをつけない場合は、実行後に順々に次のスクリプトを実行してくれた。-wをつけたスクリプトを同時並行で走らせるためには別の方法が必要なようだ。

 

2017.6.15追記:

スクリプトは、&でつなぐと並行処理、&&で繋ぐと直列処理とのこと!

これで、-wをつけたスクリプトをパラレルでウォッチしてくれるようになった!

ということで本文を変更。