Macでgulpを用いてbrowser-syncを使えるように設定したいがnpm run gulpでエラーになってしまう

下記参考サイトあたりを例に環境構築を進めているのですが、npm run gulp、npm startがうまくいきません。

エラー文も出ているのですが、なかなか検討がつかないのでアドバイスいただけると助かります。

ちなみに、package.jsonの"scripts"の箇所の"gulp": "gulp","start": "gulp"は追加で付け足してあります。

ディレクトリの構成は下記です。

インストールしたものはローカルでbrowser-syncとgulpをインストールしました。

npm run gulpを行ったエラー文

sh
1[plusers_wp] npm run gulp                                                                                                                               22:28:42  ☁  master ☂ ✭
2
3> plusers_wp@1.0.0 gulp /Applications/MAMP/htdocs/webDevelopment/WordPress/Sakura/portfolio_nasio7/work/WordPress/plusers_wp
4> gulp
5
6assert.js:42
7  throw new errors.AssertionError({
8  ^
9
10AssertionError [ERR_ASSERTION]: Task function must be specified
11    at Gulp.set [as _setTask] (/Applications/MAMP/htdocs/webDevelopment/WordPress/Sakura/portfolio_nasio7/work/WordPress/plusers_wp/node_modules/undertaker/lib/set-task.js:10:3)
12    at Gulp.task (/Applications/MAMP/htdocs/webDevelopment/WordPress/Sakura/portfolio_nasio7/work/WordPress/plusers_wp/node_modules/undertaker/lib/task.js:13:8)
13    at Object.<anonymous> (/Applications/MAMP/htdocs/webDevelopment/WordPress/Sakura/portfolio_nasio7/work/WordPress/plusers_wp/gulpfile.js:4:6)
14    at Module._compile (module.js:660:30)
15    at Object.Module._extensions..js (module.js:671:10)
16    at Module.load (module.js:573:32)
17    at tryModuleLoad (module.js:513:12)
18    at Function.Module._load (module.js:505:3)
19    at Module.require (module.js:604:17)
20    at require (internal/module.js:11:18)
21npm ERR! code ELIFECYCLE
22npm ERR! errno 1
23npm ERR! plusers_wp@1.0.0 gulp: `gulp`
24npm ERR! Exit status 1
25npm ERR! 
26npm ERR! Failed at the plusers_wp@1.0.0 gulp script.
27npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
28
29npm ERR! A complete log of this run can be found in:
30npm ERR!     /Users/ユーザー名/.npm/_logs/2019-02-26T13_28_51_943Z-debug.log

debug.log

sh
10 info it worked if it ends with ok
21 verbose cli [ '/Users/ユーザー名/.nodebrew/node/v9.4.0/bin/node',
31 verbose cli   '/Users/ユーザー名/.nodebrew/current/bin/npm',
41 verbose cli   'run',
51 verbose cli   'gulp' ]
62 info using npm@5.6.0
73 info using node@v9.4.0
84 verbose run-script [ 'pregulp', 'gulp', 'postgulp' ]
95 info lifecycle plusers_wp@1.0.0~pregulp: plusers_wp@1.0.0
106 info lifecycle plusers_wp@1.0.0~gulp: plusers_wp@1.0.0
117 verbose lifecycle plusers_wp@1.0.0~gulp: unsafe-perm in lifecycle true
128 verbose lifecycle plusers_wp@1.0.0~gulp: PATH: /Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Applications/MAMP/htdocs/webDevelopment/WordPress/Sakura/portfolio_nasio7/work/WordPress/plusers_wp/node_modules/.bin:/Users/ユーザー名/.nodebrew/current/bin:/Users/ユーザー名/.zplug/bin:/usr/local/bin:/usr/local/sbin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/ユーザー名/.nodebrew/current/bin
139 verbose lifecycle plusers_wp@1.0.0~gulp: CWD: /Applications/MAMP/htdocs/webDevelopment/WordPress/Sakura/portfolio_nasio7/work/WordPress/plusers_wp
1410 silly lifecycle plusers_wp@1.0.0~gulp: Args: [ '-c', 'gulp' ]
1511 silly lifecycle plusers_wp@1.0.0~gulp: Returned: code: 1  signal: null
1612 info lifecycle plusers_wp@1.0.0~gulp: Failed to exec gulp script
1713 verbose stack Error: plusers_wp@1.0.0 gulp: `gulp`
1813 verbose stack Exit status 1
1913 verbose stack     at EventEmitter.<anonymous> (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16)
2013 verbose stack     at EventEmitter.emit (events.js:160:13)
2113 verbose stack     at ChildProcess.<anonymous> (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
2213 verbose stack     at ChildProcess.emit (events.js:160:13)
2313 verbose stack     at maybeClose (internal/child_process.js:943:16)
2413 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)
2514 verbose pkgid plusers_wp@1.0.0
2615 verbose cwd /Applications/MAMP/htdocs/webDevelopment/WordPress/Sakura/portfolio_nasio7/work/WordPress/plusers_wp
2716 verbose Darwin 18.2.0
2817 verbose argv "/Users/ユーザー名/.nodebrew/node/v9.4.0/bin/node" "/Users/ユーザー名/.nodebrew/current/bin/npm" "run" "gulp"
2918 verbose node v9.4.0
3019 verbose npm  v5.6.0
3120 error code ELIFECYCLE
3221 error errno 1
3322 error plusers_wp@1.0.0 gulp: `gulp`
3422 error Exit status 1
3523 error Failed at the plusers_wp@1.0.0 gulp script.
3623 error This is probably not a problem with npm. There is likely additional logging output above.
3724 verbose exit [ 1, true ]

何かアドバイスいただけると助かります。
よろしくお願いします。

2/27追記

gulp4の参考サイトを教えていただきありがとうございます。
下記の流れでコマンドを打つと$ npm install --save-dev gulp@nextのところでエラーになってしまいます。

sh
1$ npm rm -g gulp
2$ npm install -g gulp-cli
3
4$ npm uninstall --save-dev gulp
5$ npm install --save-dev gulp@next

`npm install --save-dev gulp@next`実行のコマンドエラー

sh
1[plusers_wp] npm install --save-dev gulp@next                                                                                                            8:21:19  ☁  master ☂ ✭
2npm ERR! code ETARGET
3npm ERR! notarget No matching version found for gulp@next
4npm ERR! notarget In most cases you or one of your dependencies are requesting
5npm ERR! notarget a package version that doesn't exist.
6
7npm ERR! A complete log of this run can be found in:
8npm ERR!     /Users/takanashikazuma/.npm/_logs/2019-02-26T23_21_30_921Z-debug.log

debug.log

sh
10 info it worked if it ends with ok
21 verbose cli [ '/Users/ユーザー名/.nodebrew/node/v9.4.0/bin/node',
31 verbose cli   '/Users/ユーザー名/.nodebrew/current/bin/npm',
41 verbose cli   'install',
51 verbose cli   '--save-dev',
61 verbose cli   'gulp@next' ]
72 info using npm@5.6.0
83 info using node@v9.4.0
94 verbose npm-session cf3c474c4236b685
105 silly install loadCurrentTree
116 silly install readLocalPackageData
127 http fetch GET 304 https://registry.npmjs.org/gulp 235ms (from cache)
138 silly registry:manifest no matching version for gulp@next in the cache. Forcing revalidation
149 http fetch GET 304 https://registry.npmjs.org/gulp 60ms (from cache)
1510 silly fetchPackageMetaData error for gulp@next No matching version found for gulp@next
1611 verbose type tag
1712 verbose stack gulp: No matching version found for gulp@next
1812 verbose stack     at pickManifest (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/pacote/node_modules/npm-pick-manifest/index.js:65:11)
1912 verbose stack     at fetchPackument.then.packument (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/pacote/lib/fetchers/registry/manifest.js:52:18)
2012 verbose stack     at tryCatcher (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23)
2112 verbose stack     at Promise._settlePromiseFromHandler (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:512:31)
2212 verbose stack     at Promise._settlePromise (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:569:18)
2312 verbose stack     at Promise._settlePromise0 (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:614:10)
2412 verbose stack     at Promise._settlePromises (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:693:18)
2512 verbose stack     at Async._drainQueue (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:133:16)
2612 verbose stack     at Async._drainQueues (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:143:10)
2712 verbose stack     at Immediate.Async.drainQueues [as _onImmediate] (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:17:14)
2812 verbose stack     at runCallback (timers.js:756:18)
2912 verbose stack     at tryOnImmediate (timers.js:717:5)
3012 verbose stack     at processImmediate [as _immediateCallback] (timers.js:697:5)
3113 verbose cwd /Applications/MAMP/htdocs/webDevelopment/WordPress/Sakura/portfolio_nasio7/work/WordPress/plusers_wp
3214 verbose Darwin 18.2.0
3315 verbose argv "/Users/ユーザー名/.nodebrew/node/v9.4.0/bin/node" "/Users/ユーザー名/.nodebrew/current/bin/npm" "install" "--save-dev" "gulp@next"
3416 verbose node v9.4.0
3517 verbose npm  v5.6.0
3618 error code ETARGET
3719 error notarget No matching version found for gulp@next
3820 error notarget In most cases you or one of your dependencies are requesting
3920 error notarget a package version that doesn't exist.
4021 verbose exit [ 1, true ]

何かアドバイスいただけると助かります。。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

ご提示のpackage.jsonの内容は、本当にエラーが出力されたもののままでしょうか？

npm ERR! Unexpected token / in JSON at position 168 while parsing near '...ed\" && exit 1"
npm ERR!     // "gulp": "gulp",
npm ERR!  ...'

npm ERR! Unexpected token s in JSON at position 164 while parsing near '...cified\" && exit 1",ss
npm ERR!     "gulp": "gulp...'

上記エラーでは、「//」や「ss」など不要な文字があるためにエラーとなっている旨が出力されています。

追記:

gulpfile.js:4:6でエラーが出ていることが読み取れます。

以下の行ですね。

JavaScript
1gulp.task('default', ['browser-sync']);

参考にされたページの情報が古いです。
gulpはバージョン3と4でタスクの記載方法が変わっています。

https://satoyan419.com/gulp-v4/

投稿2019/02/26 01:07

編集2019/02/26 14:11

kazto

総合スコア7196

roronoazoro

2019/02/26 13:38

回答ありがとうございます。 package.jsonの内容が違っていたようでした。。失礼しました。今度こそ、いまいまの設定でnpm run gulpを試したエラー、debug.logを本文に上書きしました。

roronoazoro

2019/02/26 23:32

エラーの出ている箇所も教えていただきありがとうございます。参考サイトで進めてみて詰まったところを本文2/27追記として記載しましたのでご確認お願いできますでしょうか。。

kazto

2019/02/27 02:11

gulp@next という指定はV3だった時の指定方法です。すでにV4がインストールされている状態だったので、インストール作業は不要です。

roronoazoro

2019/03/05 14:25

遅くなりましたが、browser-syncのV4のやり方は載ってなさそうだったのでV4の記載の仕方を調べながら取り組んでみたいと思います。ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.31%

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

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

質問する

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

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

Macでgulpを用いてbrowser-syncを使えるように設定したいがnpm run gulpでエラーになってしまう

2/27追記

`npm install --save-dev gulp@next`実行のコマンドエラー

debug.log

関連した質問

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

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

2/27追記

npm install --save-dev gulp@next実行のコマンドエラー

debug.log

関連した質問

`npm install --save-dev gulp@next`実行のコマンドエラー