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

製作 プログラム

最終更新日:2021/04/17

ラムネグから一言:寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.

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

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

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

コマンドプロンプト(cmd)で

npm init

sassを入れる

コマンドプロンプト(cmd)で

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」を入れると生成されなくなります。

package.jsonのスクリプト内:

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'"
}

【おしらせ、というか完全なる宣伝】

文体がもうぜんぜん適当すぎてあれだけどものすごい自由に書いてるブログ「檸檬だくだく」もよろしく.寝る前に読める恐ろしくくだらないやつです.

こんなにも一ミリも目を引かれないタイトルを取り扱ってます: アジアという語感 / 精神的食パン限界値 / 続・マーガリン問題 /