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

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

ただいまの
回答率

90.75%

  • Node.js

    1735questions

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

  • JSON

    1064questions

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

  • npm

    245questions

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

npm-scriptsの構成

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 181

am_765

score 1

 前提・実現したいこと

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.log2018-05-22T09_17_27_184Z-debug.log0 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.log0 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 ]

 該当のソースコード

{
  "name": "sample",
  "version": "1.0.0",
  "scripts": {
    "clean": "rimraf dist/{css/*,js/*,images/*}",
    "build:ejs": "ejs-cli --base-dir src/ \"**/*.ejs\" -o dist/",
    "build:css": "postcss src/**/*.pcss -o dist/**/*.css --no-map",
    "build:js": "browserify -t babelify src/**/*.js | uglifyjs -c -m > dist/**/*.js",
    "build:images": "imagemin src/images/* -o dist/images",
    "build:copy": "cpx \"src/assets/**/(*.js|*.css)\" ./dist",
    "build": "npm run clean & npm-run-all -p build:*",
    "watch:css": "postcss src/css/**.pcss -o dist/css/**.css -w",
    "watch:js": "watchify -t babelify src/**/*.js -o 'uglifyjs -c -m > dist/**/*.js' -v",
    "watch:images": "onchange 'src/**/images' -e '**/*.DS_Store' -- npm run build:images",
    "watch:server": "browser-sync start -s -f 'dist, **/*.html, !node_modules/**/*'",
    "watch": "npm-run-all -p watch:*",
    "lint:css": "stylelint src/**/*.pcss",
    "lint:js": "eslint src/**/*.js",
    "postinstall": "npm run build && npm run watch"
  },
  "devDependencies": {
    "babelify": "^7.3.0",
    "browser-sync": "^2.18.13",
    "browserify": "^14.4.0",
    "cpx": "^1.5.0",
    "cssnano": "^3.10.0",
    "ejs-cli": "^2.0.1",
    "eslint": "^4.3.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^3.0.1",
    "imagemin-cli": "^3.0.0",
    "mkdirp": "^0.5.1",
    "npm-run-all": "^4.0.2",
    "onchange": "^3.2.1",
    "postcss-cli": "^4.1.0",
    "postcss-cssnext": "^3.0.2",
    "postcss-import": "^10.0.0",
    "rimraf": "^2.6.1",
    "stylelint": "^8.0.0",
    "uglify-es": "^3.0.26",
    "watchify": "^3.9.0"
  }
}

 試したこと

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/17 12: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",

    どのように記述するのが正しいのでしょうか。
    ご教示いただければ幸いです。
    よろしくお願いします。

    キャンセル

  • 2018/05/17 21:49

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

    キャンセル

  • 2018/05/18 10:54 編集

    "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 ]

    キャンセル

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

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Node.js

    1735questions

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

  • JSON

    1064questions

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

  • npm

    245questions

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