質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

6082閲覧

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

donut4

総合スコア150

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/07/16 04:27

編集2020/07/16 12:58

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を削除しても変化起こらず、、、、、、

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

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

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

coffee

1{src, dest, watch, parallel} = require 'gulp' 2sass = require 'gulp-sass' 3autoprefixer = require 'gulp-autoprefixer' 4 5css = -> 6 src './src/sass/*.sass' 7 .pipe autoprefixer()  # ベンダープレフィックスの付与 8 .pipe sass { outputStyle: 'expanded' } 9 # .pipe sass { ououtputStyle: 'compact' } 10 .pipe dest './dist/css/' 11 12watcher = (cb) -> 13 watch './src/', (cb) -> 14 css() 15 cb() 16 17exports.default = parallel [watcher]

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

投稿2020/07/21 02:35

iwamoto_takaaki

総合スコア2883

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

donut4

2020/07/28 10:17

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

0

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"

投稿2020/07/17 03:30

FrontEnd_Japan

総合スコア271

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

FrontEnd_Japan

2020/07/17 03:31

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

0

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

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

npm run buildnpm 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のターミナルで時間がかかるコマンドが終了したら通知を受け取る

投稿2020/07/16 05:22

miyabi-sun

総合スコア21170

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

donut4

2020/07/16 06:07 編集

ありがとうございます。 ちょうどDocker for Macで開発しています。 LiveReload機能は必須なのでしょうか? package.jsonを公開可能な情報のみ取捨選択して追記しました。 よろしくお願いいたします。<(_ _)>
miyabi-sun

2020/07/16 07:21

通知部分はGulpからgulp-notifyで通知を実現しているのですね。 GitHubのプロジェクト説明を見る限り、Macでは10.8(Mountain Lion)以降は何もインストールする必要なしと書かれていますね。 > LiveReload機能は必須なのでしょうか? なんでGulpとParcelが共存しているんでしょうか? それはさておき、Parcelには「ホットモジュールリプレイスメント」なる機能がついており、 勝手にHTMLやCSS等のファイルを生成して、更新反映の機能も備わっているように見受けられます。 なのでライブリロードは不要ですね。 https://ja.parceljs.org/ これってなんかの過渡期なんですか? そもそもGulpってタスク作る時の動作が微妙で、ラッパー的なライブラリを噛ませないとろくに動作しないんですよね。 それが原因で現在はまぁまぁ廃れてオワコン化しています。 だからParcelに乗り換えたんじゃないかと推測されるわけですが…… プロジェクトを作った人に問い合わせて一元管理した方が良いんじゃないかと思います。 とりあえずもう一度開発者用の`npm install -D`でインストールしてみてはどうでしょうか?
donut4

2020/07/16 09:29

ひとまず`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なものがあったのですが これに対して何かする必要はありますでしょうか??(また追記しました。)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問