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

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

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

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

gulp

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

Q&A

解決済

1回答

8162閲覧

gulp.taskを実行しwebpackでjsファイルをビルドさせたい

y_aka

総合スコア11

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

gulp

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

1グッド

1クリップ

投稿2019/02/16 11:28

編集2019/02/16 11:31

現在Reactの勉強を始めた初学者です。
標題の通り、jsファイルをビルドさせたいのですが下記エラーで詰まっています。
原因が分かる方がいましたらご教示願います。
宜しくお願いします。

エラー内容

PS C:\Users\ak198\Desktop\react_redux> gulp [20:16:40] Using gulpfile ~\Desktop\react_redux\gulpfile.js [20:16:40] Starting 'default'... [20:16:40] Starting 'compile'... [20:16:40] Starting 'browser-sync'... [20:16:40] Starting 'watch'... [20:16:41] 'compile' errored after 1.13 s [20:16:41] Error: File not found with singular glob: C:/Users/ak198/Desktop/react_redux/.src/js/app.js (if this was purposeful, use `allowEmpty` option) at Glob.<anonymous> (C:\Users\ak198\Desktop\react_redux\node_modules\glob-stream\readable.js:84:17) at Object.onceWrapper (events.js:315:30) at emitOne (events.js:116:13) at Glob.emit (events.js:211:7) at Glob._finish (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:197:8) at done (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:182:14) at Glob._processSimple2 (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:688:12) at C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:676:10 at Glob._stat2 (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:772:12) at lstatcb_ (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:764:12) at RES (C:\Users\ak198\Desktop\react_redux\node_modules\inflight\inflight.js:31:16) at f (C:\Users\ak198\Desktop\react_redux\node_modules\once\once.js:25:25) at FSReqWrap.oncomplete (fs.js:152:21) [20:16:41] 'default' errored after 1.14 s [20:16:41] The following tasks did not complete: browser-sync, watch [20:16:41] Did you forget to signal async completion?

glupfile.js

const gulp = require("gulp"); const watch = require("gulp-watch"); const plumber = require("gulp-plumber"); const notify = require("gulp-notify"); const browserSync = require("browser-sync").create(); const webpackStream = require("webpack-stream"); const webpackConfig = require("./webpack.config.js"); gulp.task("compile", function () { return gulp.src([ ".src/js/app.js", ]) .pipe(plumber({errorHandler: notify.onError("<%= error.message %>")})) .pipe(webpackStream(webpackConfig), null, function(err, stats) { if (stats.compilation.errors.length > 0) { notify({ title: "webpack error", message: stats.compilation.errors[0].error }); } }) .pipe(gulp.dest("js")) }); gulp.task("browser-sync", function () { browserSync.init({ server: { baseDir: "./" } }); }); gulp.task("watch", function () { watch(["./src/js/**/**.js"], function () { gulp.setMaxListeners(["compile"]); }) watch(["./**/*.html", "./js/**.*js"], function () { browserSync.reload(); }) }) gulp.task("default", gulp.series(gulp.parallel("compile", "browser-sync", "watch")));

webpack.config.js

module.exports = { /* ビルドの起点となるファイルの設定 */ entry: './src/js/index.js', /* 出力されるファイルの設定 */ output: { path: '/js', // 出力先のパス filename: 'bundle.js' // 出力先のファイル名 }, module: { /* loaderの設定 */ rules: [ { test: /.(js|jsx)$/, // 対象となるファイルの拡張子(正規表現可) exclude: /node_modules/, // 除外するファイル/ディレクトリ(正規表現可) loader: 'babel-loader', // 使用するloader query: { presets: ['es2015', 'react'] } } ] } };
SomaTakuya👍を押しています

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

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

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

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

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

guest

回答1

1

ベストアンサー

src/js/app.js は実在するファイルですか?
index.jsではないでしょうか。

<追記>
エラーメッセージのnot foundなパスに/.src/js/app.jsが含まれているのがおかしいと思いgulpfileをみたら、

return gulp.src([ ".src/js/app.js", ])

こうなっていますね。

return gulp.src([ "./src/js/app.js", ])

これで動くのでは。

投稿2019/02/16 12:04

編集2019/02/16 13:07
yu-smc

総合スコア610

y_aka👍を押しています

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

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

y_aka

2019/02/16 12:30 編集

yu-smc様 回答ありがとうございます。 app.js は存在します。 webpack.config.jsの entry: './src/js/index.js',を entry: './src/js/app.jsに変更しましたが エラー内容は同様でした。 PS C:\Users\ak198\Desktop\react_redux> gulp [21:18:37] Using gulpfile ~\Desktop\react_redux\gulpfile.js [21:18:37] Starting 'default'... [21:18:37] Starting 'compile'... [21:18:37] Starting 'browser-sync'... [21:18:37] Starting 'watch'... [21:18:38] 'compile' errored after 1.07 s [21:18:38] Error: File not found with singular glob: C:/Users/ak198/Desktop/react_redux/.src/js/app.js (if this was purposeful, use `allowEmpty` option) at Glob.<anonymous> (C:\Users\ak198\Desktop\react_redux\node_modules\glob-stream\readable.js:84:17) at Object.onceWrapper (events.js:315:30) at emitOne (events.js:116:13) at Glob.emit (events.js:211:7) at Glob._finish (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:197:8) at done (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:182:14) at Glob._processSimple2 (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:688:12) at C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:676:10 at Glob._stat2 (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:772:12) at lstatcb_ (C:\Users\ak198\Desktop\react_redux\node_modules\glob\glob.js:764:12) at RES (C:\Users\ak198\Desktop\react_redux\node_modules\inflight\inflight.js:31:16) at f (C:\Users\ak198\Desktop\react_redux\node_modules\once\once.js:25:25) at FSReqWrap.oncomplete (fs.js:152:21) [21:18:38] 'default' errored after 1.07 s [21:18:38] The following tasks did not complete: browser-sync, watch [21:18:38] Did you forget to signal async completion?
yu-smc

2019/02/16 13:01

それは失礼しました。 ではどこでエラーとなっているのか特定するところからですね。 plumberの1行を消してみるのは試しましたか?
yu-smc

2019/02/16 13:08 編集

あ、おそらく原因わかりました! 回答に追記しました。
y_aka

2019/02/16 13:14

ありがとうございます!その通りでした! エラー解消しました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

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

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

gulp

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