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

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

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

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

React.js

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

gulp

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

Q&A

解決済

1回答

823閲覧

gulpで自動コンパイルがされない

ryoheisato

総合スコア7

JavaScript

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

React.js

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

gulp

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

0グッド

0クリップ

投稿2020/01/31 02:41

前提・実現したいこと

gulpを利用してReactの勉強をしているのですが、gulpがうまく機能しません。
Reactのコンポーネントを更新・保存の度に自動コンパイルしたいです。

ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

症状としてはgulpを起動した時1度だけコンパイルされるのですが、その後保存しても自動コンパイルされません。
「src/js」の中のファイルを更新・保存ごとに「dist/js/build.js」に自動コンパイルしたいのですがgulpが動作しません。
エラーメッセージは出ておらず、更新・保存後にターミナルを確認しても動作した様子がありません。

よろしくお願いいたします。

ディレクトリ構成図です
todo_React/
├── dist/
├──css/
└──js/
└──build.js

├── node_modules/ (省略) ├── src/js/ └──app.js components/ ├── Task.js └── TodoList.js ├── gulpfile.babel.js ├── index.html ├── package.json └── webpack.config.js

こちらはpackage.jsonの中身です。
{
"name": "react_sample",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"gulp": "^4.0.2",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "7.1.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"browser-sync": "^2.18.13",
"browserify": "^14.5.0",
"classnames": "^2.2.5",
"gulp-notify": "^3.0.0",
"gulp-plumber": "^1.1.0",
"gulp-webpack": "^1.5.0",
"vinyl-source-stream": "^1.1.0",
"webpack": "^3.9.1",
"webpack-stream": "^4.0.0"
},
"babel": {
"presets": [
"env"
]
}
}

エラーメッセージ

該当のソースコード

javaScript

1import gulp from 'gulp'; 2import webpackConfig from './webpack.config.js'; 3import webpack from 'webpack-stream'; 4import browserSync from 'browser-sync'; 5import notify from 'gulp-notify'; 6import plumber from 'gulp-plumber'; 7import Task from './src/js/components/Task.js' 8import { TodoList } from './src/js/components/TodoList.js' 9 10 11gulp.task('build', function(done){ 12 gulp.src('src/js/app.js') 13 .pipe(plumber({ 14 errorHandler: notify.onError("Error: <%= error.message %>") 15 })) 16 .pipe(webpack(webpackConfig)) 17 .pipe(gulp.dest('dist/js/')); 18 done(); 19}); 20gulp.task('browser-sync', function(done) { 21 browserSync.init({ 22 server: { 23 baseDir: "./", 24 index: "index.html", 25 } 26 }); 27}); 28gulp.task('bs-reload', function (done) { 29 browserSync.reload(); 30 done(); 31}); 32 33// Gulpを使ったファイルの監視 34 35gulp.task('default', gulp.series( gulp.parallel('build', 'browser-sync'), function(done){ 36 gulp.watch('./src/*/*.js', gulp.task('build')); 37 gulp.watch('./src/*/*/*.js', gulp.task('build')); 38 gulp.watch("./*.html", gulp.task('bs-reload')); 39 gulp.watch("./dist/*/*.+(js|css)", gulp.task('bs-reload')); 40 gulp.watch("./dist/*/*/*.+(js|css)", gulp.task('bs-reload')); 41 done(); 42})); 43

試したこと

ここに問題に対して試したことを記載してください。

この記事を参考に引数にdone()を追加しました。
https://teratail.com/questions/168814
https://qiita.com/KKKarin/items/66fae426e0526c64c649

また、この記事を参考に配列の形式に変更してみました(変化がなかったので元に戻しました)
変更前 gulp.watch('./src//.js', gulp.task('build'));
変更後 gulp.watch(['./src//.js'], gulp.task('build'));

https://teratail.com/questions/58764

あるサイトを参考に一部コードの書き換えをしてみました。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

./src//.jsを./src/**/.jsにすると'./src///.js'も含まれますので、distの方も同じように直しましょう。
また、gulpfileの./を絶対パスにすることで余計なパスのずれを防ぐことができるため

var appRoot = path.join(__dirname,jsroot)のようなコードを入れるのがお勧めです。

また、慣れないうちはgithub上で同じような設定をしているユーザーを検索して参考にするのもお勧めです。

https://github.com/a-atalla/react-gulp/blob/master/gulpfile.js

投稿2020/01/31 03:07

編集2020/01/31 03:08
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

ryoheisato

2020/01/31 11:33

無事解決することが出来ました。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問