node.jsを用いたsassファイルのコンパイル

Question

node-sass sass/style.scss style.css

でコンパイルできますよね？

しかし、npm run buildでもコンパイルできると聞きました。

これは同じ仕組みでコンパイルされているのでしょうか。
どちらのコマンドでも問題ないのでしょうか。

Answer 1

node-sass sass/style.scss style.css でコンパイルできますよね？

確かにいけそうですね。

sass/node-sass - GitHub

Command Line Interface

The interface for command-line usage is fairly simplistic at this stage, as seen in the following usage section.

Output will be sent to stdout if the --output flag is omitted.

Usage

node-sass [options] <input> [output] Or: cat <input> | node-sass > output

Example:

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

---

しかし、npm run buildでもコンパイルできると聞きました。

それ何処情報？（みさわ顔
それはnpm-scriptsと呼ばれるものですね。

参考サイト: npm-scriptsについて - Qiita

要するにpackage.jsonに好きなコマンド登録して使えるってネタです。

{
  "name": "myapp"
  "scripts": {
    "build": "node-sass sass/style.scss style.css"
  }
}

$ npm run build

> # ここに実際に実行するコマンドが表示される
> node-sass sass/style.scss style.css

# node-sassの実行結果がつらつらと表示される

---

これは同じ仕組みでコンパイルされているのでしょうか。

見ての通り同じコマンドで実行されているので、
間違いなく同じ仕組みでコンパイルされていますね。

どちらのコマンドでも問題ないのでしょうか。

よく使うならnpm-scriptsを使う方が良いでしょう。
node-sass sass/style.scss style.cssコマンドは毎回一言一句間違いなく打ち込めますか？
新しくジョインしたメンバーや半年先の自分も同じように、一言一句間違いなく打ち込めますか？

特に後者、無茶言うなって言いたくありませんか？

そこでNode.js(npm)ではpackage.jsonにコマンドを記載して後から呼び出せるようになっています。
ちゃんと書き残しておけばREADME.mdとpackage.json見れば概要が分かります。
そうすれば後輩や未来の自分に「README.mdとpakcage.jsonをまず見てから質問しにこい」って言えますね。

Comments

[fewebuser]

ご回答誠にありがとうございます。
buildコマンドはpakcage.jsonファイルで定義されているということですよね？
pakcage.jsonを確認したところ、buildが記載されている箇所は「 "build": "webpack --progress --colors"」としか書かれていませんでした。
これは調べたところ処理がどの程度進捗しているかをバーで表示させるためだけの記述でしょうか。

[miyabi-sun]

ふむ、そのプロジェクトはどこからかコピーしてもってきたものなのですね。

webpackは「webpack.config.js」というファイルをプロジェクトルートに作成して管理します。
https://qiita.com/soarflat/items/28bf799f7e0335b68186

> これは調べたところ処理がどの程度進捗しているかをバーで表示させるためだけの記述でしょうか。
webpackは「webpack」と打ち込んだ瞬間、「webpack.config.js」を元にコンパイルが走ります。
プログレスバーはそのコンパイル作業進捗の表示でしょう。

この中でnode-sassが使われていれば、10中8〜9それを使ってコンパイルしていることでしょう。
ただし、1ファイルをピンポイントでコンパイルする`node-sass`コマンドとは根本的に異なるので、同じ機能やオプションを使ってコンパイルしているかどうかはわかりません。

webpackでコンパイルする時は、文字の圧縮なんかも同時に行うのが基本なので、
同じコマンドを打ち込んでいる可能性はかなり低いかと思われます。