node.jsでよく使うコマンド一覧

ホームページ作るときによく使うコマンドたち。

1. プロジェクトにnpmを入れる
2. sassを入れる
3. style.css.mapて何？
4. autoprefixerを入れる
5. コマンドラインで各機能を使う
6. スクリプトを連続処理

プロジェクトにnpmを入れる

npm init

sassを入れる

npm install sass -D

-D（–save-dev）とは？

npmでインストールするときのオプションで付ける–save-dev（もしくは-D）とはなんなのについて。

ざくっと答えだけ言うと、今自分が作ってるプロジェクトを配布するときにこれは配布先でも使うな～、という機能については何もつけずにインスト―ル。反対にこの機能は開発時にしか使わないな、という機能については–save-devをつける、という感じ…らしい。

もうちょいくわしく

–save-devをつけるとそのインストールする対象がpackage.jsonの「devDependencies」の方に追加されるようになる。

何もつけないと「dependencies」の方に追加されるようになる。

何が違うの？というと–save-devをつけたほう、devDependenciesに追加された方は今自分で作ってるプロジェクトをクローンというのか複製したときに自動でインストールされない。反対にdependenciesに追加された機能はクローンしたときに自動でインストールされる。

node-sassじゃないの？

今回sass（dart-sassというらしい）をインストールしている。

2021年にnode-sassは非推奨になったらしいので、sassを入れている。

style.css.mapて何？

dart-sassを使うとsassからcssを作るとき、style.css.mapていうのが出来上がります。

これはcssの各行がsassファイルのどこに書いてるかが載ってるファイル。ものすごいsassを複数に分けてるときはあると便利。なんですがいらない場合も多いと思います。

style.css.mapを作らない場合は、sassを使うときにオプション「–no-source-map」を入れると生成されなくなります。

sass --no-source-map style.scss style.css

autoprefixerを入れる

こっちにくわしく→【解決済】「Cannot find module ‘postcss’」が出て動かない！

コマンドラインで各機能を使う

こっちにくわしく→postcss、autoprefixer、dart-sassをコマンドラインで使う方法

スクリプトを連続処理

npmスクリプトを連続で処理するとき、よく「npm-run-all」を入れろ、と書いてあるが入れなくても直列処理、並列処理が可能。

「npm-run-all」はスクリプトの記載が簡単になるだけ。

「&&」でつなげば直列、つまり1番が終わってから2番…で実行し、「&」でつなげば並列、つまり同時にwatchしたりできる。

"scripts":{
  "command" : "npm run command1 && npm run command2",
  "command2": "echo 'World'",
  "command1": "echo 'Hello'"
}