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

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

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

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Node.js

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

Q&A

1回答

2377閲覧

npm-scriptsの構成

am_765

総合スコア7

npm

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Node.js

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

1グッド

1クリップ

投稿2018/05/16 11:48

編集2022/01/12 10:55

前提・実現したいこと

npm-scriptsでのタスクランナー作成。
下記のようなディレクトリ構成を目指しています。
srcで作成したものをdistに出力する形です。
ミニマムな環境だと出力されるのですが、このようなディレクトリ構造にすると上手くいかない状態です。
また、次の処理についての記述も分からずにいます。

  1. ejsをwatchする記述
  2. includeはdistに出力しない記述

上記の2つを加えて、どのようにpackage.jsonを記述すれば良いか助言をいただきたいです。
何卒よろしくお願いします。

ディレクトリ構成

site
├── .eslintrc.js
├── .stylelintrc
├── dist
│ ├── assets
│ │ ├── css
│ │ │ └── main.css
│ │ ├── images
│ │ │ └── .svg, .png, .jpg, .gif
│ │ └── js
│ │ ├── vendor
│ │ │ └── *
│ │ └── main.js
│ │
│ ├── css
│ │ └── style.css
│ │
│ ├── dir01
│ │ ├── index.html
│ │ ├── css
│ │ │ └── style.css
│ │ └── images
│ │ └── .svg, .png, .jpg, .gif
│ │
│ ├── images
│ │ └── .svg, .png, .jpg, .gif
│ │
│ └── index.html

├── src
│ ├── assets
│ │ ├── css
│ │ │ └── main.pcss
│ │ ├── images
│ │ │ └── .svg, .png, .jpg, .gif
│ │ └── js
│ │ ├── vendor
│ │ │ └── *
│ │ └── main.js
│ │
│ ├── css
│ │ └── style.pcss
│ │
│ ├── dir01
│ │ ├── index.ejs
│ │ ├── css
│ │ │ └── style.pcss
│ │ └── images
│ │ └── .svg,.png,.jpg,.gif
│ │
│ ├── images
│ │ └── .svg,.png,.jpg,.gif
│ │
│ ├── include
│ │ ├── _header.ejs
│ │ ├── _footer.ejs
│ │ └── _modules.ejs
│ │
│ └── index.ejs

├── package.json

└── postcss.config.js

発生している問題・エラーメッセージ

実行すると下記のエラーが出ます。 【コンソール】 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! sample@1.0.0 build:js: `browserify -t babelify src/**/*.js | uglifyjs -c -m > dist/**/*.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the sample@1.0.0 build:js script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. ⠋ Minifying images npm ERR! A complete log of this run can be found in: npm ERR! /Users/*/.npm/_logs/2018-05-22T09_17_27_184Z-debug.log (node:24881) ExperimentalWarning: The fs.promises API is experimental 0 images minified ERROR: "build:js" exited with 1. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! sample@1.0.0 build: `npm run clean & npm-run-all -p build:*` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the sample@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/*/.npm/_logs/2018-05-22T09_17_27_302Z-debug.log 【2018-05-22T09_17_27_184Z-debug.log】 0 info it worked if it ends with ok 1 verbose cli [ '/usr/local/bin/node', 1 verbose cli '/usr/local/lib/node_modules/npm/bin/npm-cli.js', 1 verbose cli 'run', 1 verbose cli 'build:js' ] 2 info using npm@5.6.0 3 info using node@v10.1.0 4 verbose run-script [ 'prebuild:js', 'build:js', 'postbuild:js' ] 5 info lifecycle sample@1.0.0~prebuild:js: sample@1.0.0 6 info lifecycle sample@1.0.0~build:js: sample@1.0.0 7 verbose lifecycle sample@1.0.0~build:js: unsafe-perm in lifecycle true 8 verbose lifecycle sample@1.0.0~build:js: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/npm-scripts/trial01/node_modules/.bin:/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/npm-scripts/trial01/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/*/shellscript/ 9 verbose lifecycle sample@1.0.0~build:js: CWD: /npm-scripts/trial01 10 silly lifecycle sample@1.0.0~build:js: Args: [ '-c', 10 silly lifecycle 'browserify -t babelify src/**/*.js | uglifyjs -c -m > dist/**/*.js' ] 11 silly lifecycle sample@1.0.0~build:js: Returned: code: 1 signal: null 12 info lifecycle sample@1.0.0~build:js: Failed to exec build:js script 13 verbose stack Error: sample@1.0.0 build:js: `browserify -t babelify src/**/*.js | uglifyjs -c -m > dist/**/*.js` 13 verbose stack Exit status 1 13 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16) 13 verbose stack at EventEmitter.emit (events.js:182:13) 13 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:182:13) 13 verbose stack at maybeClose (internal/child_process.js:957:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:246:5) 14 verbose pkgid sample@1.0.0 15 verbose cwd /npm-scripts/trial01 16 verbose Darwin 16.6.0 17 verbose argv "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/bin/npm-cli.js" "run" "build:js" 18 verbose node v10.1.0 19 verbose npm v5.6.0 20 error code ELIFECYCLE 21 error errno 1 22 error sample@1.0.0 build:js: `browserify -t babelify src/**/*.js | uglifyjs -c -m > dist/**/*.js` 22 error Exit status 1 23 error Failed at the sample@1.0.0 build:js script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 1, true ] 【2018-05-22T09_17_27_302Z-debug.log】 0 info it worked if it ends with ok 1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ] 2 info using npm@5.6.0 3 info using node@v10.1.0 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ] 5 info lifecycle sample@1.0.0~prebuild: sample@1.0.0 6 info lifecycle sample@1.0.0~build: sample@1.0.0 7 verbose lifecycle sample@1.0.0~build: unsafe-perm in lifecycle true 8 verbose lifecycle sample@1.0.0~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/npm-scripts/trial01/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/*/shellscript/ 9 verbose lifecycle sample@1.0.0~build: CWD: /npm-scripts/trial01 10 silly lifecycle sample@1.0.0~build: Args: [ '-c', 'npm run clean & npm-run-all -p build:*' ] 11 silly lifecycle sample@1.0.0~build: Returned: code: 1 signal: null 12 info lifecycle sample@1.0.0~build: Failed to exec build script 13 verbose stack Error: sample@1.0.0 build: `npm run clean & npm-run-all -p build:*` 13 verbose stack Exit status 1 13 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16) 13 verbose stack at EventEmitter.emit (events.js:182:13) 13 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:182:13) 13 verbose stack at maybeClose (internal/child_process.js:957:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:246:5) 14 verbose pkgid sample@1.0.0 15 verbose cwd /npm-scripts/trial01 16 verbose Darwin 16.6.0 17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build" 18 verbose node v10.1.0 19 verbose npm v5.6.0 20 error code ELIFECYCLE 21 error errno 1 22 error sample@1.0.0 build: `npm run clean & npm-run-all -p build:*` 22 error Exit status 1 23 error Failed at the sample@1.0.0 build script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 1, true ]

該当のソースコード

package.json

1{ 2 "name": "sample", 3 "version": "1.0.0", 4 "scripts": { 5 "clean": "rimraf dist/{css/*,js/*,images/*}", 6 "build:ejs": "ejs-cli --base-dir src/ \"**/*.ejs\" -o dist/", 7 "build:css": "postcss src/**/*.pcss -o dist/**/*.css --no-map", 8 "build:js": "browserify -t babelify src/**/*.js | uglifyjs -c -m > dist/**/*.js", 9 "build:images": "imagemin src/images/* -o dist/images", 10 "build:copy": "cpx \"src/assets/**/(*.js|*.css)\" ./dist", 11 "build": "npm run clean & npm-run-all -p build:*", 12 "watch:css": "postcss src/css/**.pcss -o dist/css/**.css -w", 13 "watch:js": "watchify -t babelify src/**/*.js -o 'uglifyjs -c -m > dist/**/*.js' -v", 14 "watch:images": "onchange 'src/**/images' -e '**/*.DS_Store' -- npm run build:images", 15 "watch:server": "browser-sync start -s -f 'dist, **/*.html, !node_modules/**/*'", 16 "watch": "npm-run-all -p watch:*", 17 "lint:css": "stylelint src/**/*.pcss", 18 "lint:js": "eslint src/**/*.js", 19 "postinstall": "npm run build && npm run watch" 20 }, 21 "devDependencies": { 22 "babelify": "^7.3.0", 23 "browser-sync": "^2.18.13", 24 "browserify": "^14.4.0", 25 "cpx": "^1.5.0", 26 "cssnano": "^3.10.0", 27 "ejs-cli": "^2.0.1", 28 "eslint": "^4.3.0", 29 "eslint-config-standard": "^10.2.1", 30 "eslint-plugin-import": "^2.7.0", 31 "eslint-plugin-node": "^5.1.1", 32 "eslint-plugin-promise": "^3.5.0", 33 "eslint-plugin-standard": "^3.0.1", 34 "imagemin-cli": "^3.0.0", 35 "mkdirp": "^0.5.1", 36 "npm-run-all": "^4.0.2", 37 "onchange": "^3.2.1", 38 "postcss-cli": "^4.1.0", 39 "postcss-cssnext": "^3.0.2", 40 "postcss-import": "^10.0.0", 41 "rimraf": "^2.6.1", 42 "stylelint": "^8.0.0", 43 "uglify-es": "^3.0.26", 44 "watchify": "^3.9.0" 45 } 46}

試したこと

・cpxを使用したりしたのですが、srcの構造通りに出力できませんでした。
・それぞれのオプションを調べて記述してみましたが、上手くいきませんでした。

set0gut1👍を押しています

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

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

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

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

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

guest

回答1

0

postcssのオプションが違くて、複数ファイルを処理するときは出力は -o ではなく -d で指定する必要があります。
正確な情報は公式マニュアルを
https://www.npmjs.com/package/postcss-cli

投稿2018/05/16 15:46

set0gut1

総合スコア2413

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

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

am_765

2018/05/17 03:15 編集

ご回答ありがとうございます。 "build:css": "postcss src/**/*.pcss -d dist/**/*.css --no-map", 上記で試したところ**/*.css/.pcss といった形でコンパイルされず、またワイルドカードが認識されずに出力されました。 また、構造をそのままコピーするという--baseオプションを使用した下記記述も試してみたのですが、エラーになってしまいました。 "build:css": "postcss src/**/ --base ./src/**/ -d dist", "build:css": "postcss src --base ./src -d dist", "build:css": "postcss src/**/.* --base ./src/**/.* -d dist", どのように記述するのが正しいのでしょうか。 ご教示いただければ幸いです。 よろしくお願いします。
set0gut1

2018/05/17 12:49

二番目の postcss src --base ./src -d dist で正しいはずですが、どのようなエラーが出ましたでしょうか
am_765

2018/05/18 02:24 編集

"build:css": "postcss src --base ./src -d dist", "watch:css": "postcss src --base ./src -d dist -w", cssの該当部分を上記の記述にしたところ下記のエラーが出ました。 【コンソール】 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! sample@1.0.0 build:css: `postcss src --base ./src -d dist` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the sample@1.0.0 build:css script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. ERROR: "build:css" exited with 1. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! sample@1.0.0 build: `npm run clean & npm-run-all -p build:*` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the sample@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 【デバックログ】 0 info it worked if it ends with ok 1 verbose cli [ '/usr/local/bin/node', 1 verbose cli '/usr/local/lib/node_modules/npm/bin/npm-cli.js', 1 verbose cli 'run', 1 verbose cli 'build:css' ] 2 info using npm@5.6.0 3 info using node@v10.1.0 4 verbose run-script [ 'prebuild:css', 'build:css', 'postbuild:css' ] 5 info lifecycle sample@1.0.0~prebuild:css: sample@1.0.0 6 info lifecycle sample@1.0.0~build:css: sample@1.0.0 7 verbose lifecycle sample@1.0.0~build:css: unsafe-perm in lifecycle true 8 verbose lifecycle sample@1.0.0~build:css: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Working Copy/mci/npm-scripts/npm-scripts-sample-master/node_modules/.bin:/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Working Copy/mci/npm-scripts/npm-scripts-sample-master/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/*/shellscript/ 9 verbose lifecycle sample@1.0.0~build:css: CWD: /Working Copy/mci/npm-scripts/npm-scripts-sample-master 10 silly lifecycle sample@1.0.0~build:css: Args: [ '-c', 'postcss src --base ./src -d dist' ] 11 silly lifecycle sample@1.0.0~build:css: Returned: code: 1 signal: null 12 info lifecycle sample@1.0.0~build:css: Failed to exec build:css script 13 verbose stack Error: sample@1.0.0 build:css: `postcss src --base ./src -d dist` 13 verbose stack Exit status 1 13 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16) 13 verbose stack at EventEmitter.emit (events.js:182:13) 13 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:182:13) 13 verbose stack at maybeClose (internal/child_process.js:957:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:246:5) 14 verbose pkgid sample@1.0.0 15 verbose cwd /Working Copy/mci/npm-scripts/npm-scripts-sample-master 16 verbose Darwin 16.6.0 17 verbose argv "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/bin/npm-cli.js" "run" "build:css" 18 verbose node v10.1.0 19 verbose npm v5.6.0 20 error code ELIFECYCLE 21 error errno 1 22 error sample@1.0.0 build:css: `postcss src --base ./src -d dist` 22 error Exit status 1 23 error Failed at the sample@1.0.0 build:css script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 1, true ] 0 info it worked if it ends with ok 1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ] 2 info using npm@5.6.0 3 info using node@v10.1.0 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ] 5 info lifecycle sample@1.0.0~prebuild: sample@1.0.0 6 info lifecycle sample@1.0.0~build: sample@1.0.0 7 verbose lifecycle sample@1.0.0~build: unsafe-perm in lifecycle true 8 verbose lifecycle sample@1.0.0~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Working Copy/mci/npm-scripts/npm-scripts-sample-master/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/*/shellscript/ 9 verbose lifecycle sample@1.0.0~build: CWD: /Working Copy/mci/npm-scripts/npm-scripts-sample-master 10 silly lifecycle sample@1.0.0~build: Args: [ '-c', 'npm run clean & npm-run-all -p build:*' ] 11 silly lifecycle sample@1.0.0~build: Returned: code: 1 signal: null 12 info lifecycle sample@1.0.0~build: Failed to exec build script 13 verbose stack Error: sample@1.0.0 build: `npm run clean & npm-run-all -p build:*` 13 verbose stack Exit status 1 13 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16) 13 verbose stack at EventEmitter.emit (events.js:182:13) 13 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:182:13) 13 verbose stack at maybeClose (internal/child_process.js:957:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:246:5) 14 verbose pkgid sample@1.0.0 15 verbose cwd /Working Copy/mci/npm-scripts/npm-scripts-sample-master 16 verbose Darwin 16.6.0 17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build" 18 verbose node v10.1.0 19 verbose npm v5.6.0 20 error code ELIFECYCLE 21 error errno 1 22 error sample@1.0.0 build: `npm run clean & npm-run-all -p build:*` 22 error Exit status 1 23 error Failed at the sample@1.0.0 build script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 1, true ]
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問