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

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

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

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

JSON

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

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

解決済

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

roronoazoro
roronoazoro

総合スコア113

npm

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

JSON

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

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

1回答

0リアクション

0クリップ

2302閲覧

投稿2019/02/25 23:56

編集2019/02/26 23:30

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

Gulp + Browsersyncを使ったブラウザ自動リロードでコーディング効率化を目指す

サックっとbrowser-syncを設定

Gulp で Browser-Sync を動かしてブラウザにリアルタイムに変更を反映させる

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

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

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

イメージ説明

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

npm run gulpを行ったエラー文

sh

[plusers_wp] npm run gulp 22:28:42 ☁ master ☂ ✭ > plusers_wp@1.0.0 gulp /Applications/MAMP/htdocs/webDevelopment/WordPress/Sakura/portfolio_nasio7/work/WordPress/plusers_wp > gulp assert.js:42 throw new errors.AssertionError({ ^ AssertionError [ERR_ASSERTION]: Task function must be specified 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) at Gulp.task (/Applications/MAMP/htdocs/webDevelopment/WordPress/Sakura/portfolio_nasio7/work/WordPress/plusers_wp/node_modules/undertaker/lib/task.js:13:8) at Object.<anonymous> (/Applications/MAMP/htdocs/webDevelopment/WordPress/Sakura/portfolio_nasio7/work/WordPress/plusers_wp/gulpfile.js:4:6) at Module._compile (module.js:660:30) at Object.Module._extensions..js (module.js:671:10) at Module.load (module.js:573:32) at tryModuleLoad (module.js:513:12) at Function.Module._load (module.js:505:3) at Module.require (module.js:604:17) at require (internal/module.js:11:18) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! plusers_wp@1.0.0 gulp: `gulp` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the plusers_wp@1.0.0 gulp 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/2019-02-26T13_28_51_943Z-debug.log

debug.log

sh

0 info it worked if it ends with ok 1 verbose cli [ '/Users/ユーザー名/.nodebrew/node/v9.4.0/bin/node', 1 verbose cli '/Users/ユーザー名/.nodebrew/current/bin/npm', 1 verbose cli 'run', 1 verbose cli 'gulp' ] 2 info using npm@5.6.0 3 info using node@v9.4.0 4 verbose run-script [ 'pregulp', 'gulp', 'postgulp' ] 5 info lifecycle plusers_wp@1.0.0~pregulp: plusers_wp@1.0.0 6 info lifecycle plusers_wp@1.0.0~gulp: plusers_wp@1.0.0 7 verbose lifecycle plusers_wp@1.0.0~gulp: unsafe-perm in lifecycle true 8 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 9 verbose lifecycle plusers_wp@1.0.0~gulp: CWD: /Applications/MAMP/htdocs/webDevelopment/WordPress/Sakura/portfolio_nasio7/work/WordPress/plusers_wp 10 silly lifecycle plusers_wp@1.0.0~gulp: Args: [ '-c', 'gulp' ] 11 silly lifecycle plusers_wp@1.0.0~gulp: Returned: code: 1 signal: null 12 info lifecycle plusers_wp@1.0.0~gulp: Failed to exec gulp script 13 verbose stack Error: plusers_wp@1.0.0 gulp: `gulp` 13 verbose stack Exit status 1 13 verbose stack at EventEmitter.<anonymous> (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16) 13 verbose stack at EventEmitter.emit (events.js:160:13) 13 verbose stack at ChildProcess.<anonymous> (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:160:13) 13 verbose stack at maybeClose (internal/child_process.js:943:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5) 14 verbose pkgid plusers_wp@1.0.0 15 verbose cwd /Applications/MAMP/htdocs/webDevelopment/WordPress/Sakura/portfolio_nasio7/work/WordPress/plusers_wp 16 verbose Darwin 18.2.0 17 verbose argv "/Users/ユーザー名/.nodebrew/node/v9.4.0/bin/node" "/Users/ユーザー名/.nodebrew/current/bin/npm" "run" "gulp" 18 verbose node v9.4.0 19 verbose npm v5.6.0 20 error code ELIFECYCLE 21 error errno 1 22 error plusers_wp@1.0.0 gulp: `gulp` 22 error Exit status 1 23 error Failed at the plusers_wp@1.0.0 gulp script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 1, true ]

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

2/27追記

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

sh

$ npm rm -g gulp $ npm install -g gulp-cli $ npm uninstall --save-dev gulp $ npm install --save-dev gulp@next

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

sh

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

debug.log

sh

0 info it worked if it ends with ok 1 verbose cli [ '/Users/ユーザー名/.nodebrew/node/v9.4.0/bin/node', 1 verbose cli '/Users/ユーザー名/.nodebrew/current/bin/npm', 1 verbose cli 'install', 1 verbose cli '--save-dev', 1 verbose cli 'gulp@next' ] 2 info using npm@5.6.0 3 info using node@v9.4.0 4 verbose npm-session cf3c474c4236b685 5 silly install loadCurrentTree 6 silly install readLocalPackageData 7 http fetch GET 304 https://registry.npmjs.org/gulp 235ms (from cache) 8 silly registry:manifest no matching version for gulp@next in the cache. Forcing revalidation 9 http fetch GET 304 https://registry.npmjs.org/gulp 60ms (from cache) 10 silly fetchPackageMetaData error for gulp@next No matching version found for gulp@next 11 verbose type tag 12 verbose stack gulp: No matching version found for gulp@next 12 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) 12 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) 12 verbose stack at tryCatcher (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23) 12 verbose stack at Promise._settlePromiseFromHandler (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:512:31) 12 verbose stack at Promise._settlePromise (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:569:18) 12 verbose stack at Promise._settlePromise0 (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:614:10) 12 verbose stack at Promise._settlePromises (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:693:18) 12 verbose stack at Async._drainQueue (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:133:16) 12 verbose stack at Async._drainQueues (/Users/ユーザー名/.nodebrew/node/v9.4.0/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:143:10) 12 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) 12 verbose stack at runCallback (timers.js:756:18) 12 verbose stack at tryOnImmediate (timers.js:717:5) 12 verbose stack at processImmediate [as _immediateCallback] (timers.js:697:5) 13 verbose cwd /Applications/MAMP/htdocs/webDevelopment/WordPress/Sakura/portfolio_nasio7/work/WordPress/plusers_wp 14 verbose Darwin 18.2.0 15 verbose argv "/Users/ユーザー名/.nodebrew/node/v9.4.0/bin/node" "/Users/ユーザー名/.nodebrew/current/bin/npm" "install" "--save-dev" "gulp@next" 16 verbose node v9.4.0 17 verbose npm v5.6.0 18 error code ETARGET 19 error notarget No matching version found for gulp@next 20 error notarget In most cases you or one of your dependencies are requesting 20 error notarget a package version that doesn't exist. 21 verbose exit [ 1, true ]

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

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

適切な質問に修正を依頼しましょう。

まだ回答がついていません

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

npm

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

JSON

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

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。