npm run watchやbuildしているが最新のscssが反映されない

Question

npm run buildやnpm run watchを行っているのですが
編集したscssやsassがブラウザ上で反映されません。（npmのエラーは出てません）

最初はgemでsassがインストールされなかったことに気づいて
インストールしたのですがそれでも反映されません。

気になることとしまして、
itermを使ってるのですが普通npm run watch中にCSSを変更したら
itermの通知が出るはずなんですがMacを変えた今回その通知が出ないのが気になることです。

何か心当たりがありましたら教えていただきたいです。

（かなり抽象的で申し訳ありません必要な情報があれば追記いたします。）

#気になること2
npm run build したときのログ

> eccube@4.0.0 build /Users/tom/dev/app
> run-p build:*


> eccube@4.0.0 build:js /Users/tom/dev/app
> parcel build ./html/user_data/assets/es/customize.js --out-dir ./html/user_data/assets/js --out-file customize.js --target browser --bundle-node-modules


> eccube@4.0.0 build:scss /Users/tom/dev/app
> gulp

⠙ Building...[21:41:43] Using gulpfile ~/dev/app/gulpfile.js
[21:41:43] Starting 'default'...
[21:41:43] Starting '<anonymous>'...
[21:41:43] Starting '<anonymous>'...
[21:41:43] Starting '<anonymous>'...
⠹ Building customize.js...[21:41:43] Finished '<anonymous>' after 40 ms
[21:41:43] Finished '<anonymous>' after 53 ms
[21:41:43] Finished '<anonymous>' after 65 ms
[21:41:43] Starting '<anonymous>'...
[21:41:43] Starting '<anonymous>'...
[21:41:43] Starting '<anonymous>'...
[21:41:43] Finished '<anonymous>' after 20 ms
⠸ Building URI.js...[21:41:43] Finished '<anonymous>' after 39 ms
[21:41:43] Finished '<anonymous>' after 41 ms
[21:41:43] Finished 'default' after 128 ms
✨  Built in 1.77s.

html/user_data/assets/js/customize.js.map    ⚠️  1.07 MB    310ms
html/user_data/assets/js/customize.js          326.3 KB    572ms

↑ビルドされているのはjsだけ？

#追記
package.json

{
  "name": "eccube",
  "version": "4.0.0",
  "description": "EC-CUBE EC open platform.",
  "main": "index.js",
  "directories": {
    "test": "tests"
  },
  "scripts": {
    "check": "npm-check --update",
    "test": "echo \"Error: no test specified\" && exit 1",
    "clean": "echo \"Error: no clean specified\" && exit 1",
    "start": "echo \"Error: no start specified\" && exit 1",
    "build": "run-p build:*",
    "build:scss": "gulp",
    "build:js": "parcel build ./html/user_data/assets/es/customize.js --out-dir ./html/user_data/assets/js --out-file customize.js --target browser --bundle-node-modules",
    "watch": "run-p watch:*",
    "watch:scss": "gulp watch",
    "watch:js": "parcel watch ./html/user_data/assets/es/customize.js --out-dir ./html/user_data/assets/js --out-file customize.js --target browser --bundle-node-modules",
    "bash": "docker-compose exec ec-cube bash",
    "logs": "docker-compose logs -f ec-cube"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/XXXXXXXX/xxxxxxxxxxx.git"
  },
  "author": "",
  "license": "GPL-2.0",
  "bugs": {
    "url": "https://github.com/XXXXXXXX/xxxxxxxxxxx.git"
  },
  "homepage": "https://www.xxxxxxx.net/",
  "dependencies": {
    "autoprefixer": "^9.8.5",
    "bootstrap": "^4.5.0",
    "bootstrap-sass": "^3.4.1",
    "cross-env": "^7.0.2",
    "css-mqpacker": "^7.0.0",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-notify": "^3.0.0",
    "gulp-pleeease": "^2.0.2",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0",
    "gulp-pug": "^4.0.1",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^2.6.5",
    "husky": "^4.2.5",
    "jquery": "^3.5.1",
    "lint-staged": "^10.2.11",
    "node-sass-package-importer": "^5.3.2",
    "normalize.css": "^8.0.1",
    "npm-check": "^5.9.2",
    "npm-run-all": "^4.1.5",
    "parcel": "^1.12.4",
    "postcss-import": "^12.0.1",
    "run-sequence": "^2.2.1",
    "sort-css-media-queries": "^1.5.0",
    "uikit": "^3.5.4",
    "urijs": "^1.19.2"
  },
  "browserslist": [
    "last 2 versions"
  ],
  "devDependencies": {
    "gulp-imagemin": "^7.1.0"
  }
}

#追記2
・npm i minimatch -Dをしました
をしたら脆弱性に関するメッセージが表示されました

npm WARN bootstrap@4.5.0 requires a peer of popper.js@^1.16.0 but none is installed. You must install peer dependencies yourself.

+ minimatch@3.0.4
updated 1 package and audited 2082 packages in 13.391s

43 packages are looking for funding
  run `npm fund` for details

found 13 vulnerabilities (8 low, 4 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

・npm audit fixしました。
をしてみても手動で直さないといけないパッケージがあるらしく
ここで詰まってしましました。

・npm auditしてhighのもの

┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Insufficient Entropy                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ cryptiles                                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=4.1.2                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ gulp-pleeease                                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ gulp-pleeease > pleeease > less > request > hawk > cryptiles │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/1464                            │
└───────────────┴──────────────────────────────────────────────────────────────┘

・npm ls cryptilesしてでたもの

eccube@4.0.0 /Users/tom/dev/app
└─┬ gulp-pleeease@2.0.2
  └─┬ pleeease@4.3.0
    └─┬ less@2.7.3
      └─┬ request@2.81.0
        └─┬ hawk@3.1.3
          └── cryptiles@2.0.5

cryptilesを削除しても変化起こらず、、、、、、

Answer 1

FrontEnd_Japanさんの指摘通り、gulpfileの設定ができていないのが原因のようです。

私の方は、gulpfileの例を貼っておきます。
私の場合は、pug/typescript/sass+bootsrapとやっていることが多いのでgulpで管理しています。
gulpは適切に書くと所々の作業を整理つつ自動化できて便利です。

このコードはsassの指定なんですけど、scssに書き換えてそのまま動くと思います。あと、coffeeで書いて申し訳ないです。自分用のスクリプトの流用なんで。。。
（https://github.com/iwamoto-takaaki/invoice_sheet/blob/master/gulpfile.coffee）

{src, dest, watch, parallel} = require 'gulp'
sass = require 'gulp-sass'
autoprefixer = require 'gulp-autoprefixer'

css = -> 
  src './src/sass/*.sass'
  .pipe autoprefixer()　   # ベンダープレフィックスの付与
  .pipe sass { outputStyle: 'expanded' }
  # .pipe sass { ououtputStyle: 'compact' }
  .pipe dest './dist/css/'

watcher = (cb) ->
  watch './src/', (cb) ->
    css()
  cb()

exports.default = parallel [watcher]

gulpfile scss当たりで検索すればもっとわかりやすい説明に当たるかもです。

Comments

[shoco]

ありがとうございます。参考にさせていただきました。
少しいじったら無事ビルドできました！

Answer 2

gulp-sassはgulpfile.jsにてビルドの設定を記述する必要があります。
npmscriptsでビルドをしたい場合は、node-sassをインストールする必要があります。

ビルド設定は下記でできます

"watch:sass": "node-sass --include-path scss src/scss/style.scss dist/css/style.css --output-style expanded –source-map -w"

Comments

[FrontEnd_Japan]

監視するscssファイルは任意に変更してください。

Answer 3

npm run buildやnpm run watchを行っているのですが

編集したscssやsassがブラウザ上で反映されません。

npm run buildやnpm run watch自体に意味はないので、
もし解決しなければそこからの情報開示をお願いします。

npm run xxxはnpm-scriptsと呼ばれ
package.json内のscriptsキー内に実行コマンドを名前付きで保存しておき、
開発者が素早く実行出来るようにしただけのものです。
参考記事: Node.jsユーザーなら押さえておきたい
npm-scriptsのタスク実行方法まとめ

なのでコマンド自体、そしてその結果何が実行されたのか
ログが無ければかなり回答しづらいですね。

出来る事ならpackage.jsonを載せた方が良いのですが、
これはプロジェクトの大事な情報もまぁまぁ載っているので
勘所がわからないと編集が難しいと思います。

---

原因としてよくあるやつはこんな感じです

• ブラウザ側のキャッシュの問題(ブラウザのキャッシュクリアを試す)
• VagrantやDocker for Macで共有フォルダ設定していると、Apache等がファイルの変更を検知出来ないのでCSSやJSファイルの変更を察知してくれない
• 単なる勘違いでファイルが生成されてないだけ
• LiveReload機能の組み込み忘れ

---

その他細々した謎

最初はgemでsassがインストールされなかったことに気づいて

インストールしたのですがそれでも反映されません。

SassはRuby用とNode.js用という風に個別に実装が存在しているので、
Node.js下で使う以上、gemでSassライブラリをインストールしても意味がないでしょう。
参考記事: Sass(Node-sass)の環境構築を行ってみる

itermの通知が出るはずなんですが

デフォのitermで通知は出せません。
terminal-notifierかなんかのツールを別途で組み込むのを忘れてるのかもしれません。
参考記事: Macのターミナルで時間がかかるコマンドが終了したら通知を受け取る

Comments

[shoco]

ありがとうございます。
ちょうどDocker for Macで開発しています。
LiveReload機能は必須なのでしょうか？

package.jsonを公開可能な情報のみ取捨選択して追記しました。
よろしくお願いいたします。<(_ _)>

[miyabi-sun]

通知部分はGulpからgulp-notifyで通知を実現しているのですね。
GitHubのプロジェクト説明を見る限り、Macでは10.8(Mountain Lion)以降は何もインストールする必要なしと書かれていますね。

> LiveReload機能は必須なのでしょうか？
なんでGulpとParcelが共存しているんでしょうか？
それはさておき、Parcelには「ホットモジュールリプレイスメント」なる機能がついており、
勝手にHTMLやCSS等のファイルを生成して、更新反映の機能も備わっているように見受けられます。
なのでライブリロードは不要ですね。
https://ja.parceljs.org/

これってなんかの過渡期なんですか？
そもそもGulpってタスク作る時の動作が微妙で、ラッパー的なライブラリを噛ませないとろくに動作しないんですよね。
それが原因で現在はまぁまぁ廃れてオワコン化しています。

だからParcelに乗り換えたんじゃないかと推測されるわけですが……
プロジェクトを作った人に問い合わせて一元管理した方が良いんじゃないかと思います。

とりあえずもう一度開発者用の`npm install -D`でインストールしてみてはどうでしょうか？

[shoco]

ひとまず`npm install -D`をしてみました。
脆弱性の警告があったので`npm audit fix`を何回かやってみたところ
最終的に下記のメッセージに終着しました。

```
found 13 vulnerabilities (8 low, 4 moderate, 1 high)
run `npm audit fix` to fix them, or `npm audit` for details
```

npm auditしてみたら一つだけhighなものがあったのですが
これに対して何かする必要はありますでしょうか？？（また追記しました。）