gulpを用いたpug＆sassコンパイルのエラー： SyntaxError in plugin "gulp-pug"

前提・実現したいこと

コマンドプロンプトにエラーが出ていて、どうやらコンパイルができずに止まっているようです。
ネットで同様の記事等も見てみましたが、それでもどうしたらよいのか分かりません。
原因として思い当たる節とすれば、コンポーネント化を取り入れたくてReactを入れたりしたのでその時にいままでとディレクトリが変わってしまったりして、以前のディレクトリの指定では「そこにgulpはない」ってことになっているのかなと考えています。
ちなみに以前まではコンパイルできていたので、必要なインストールなどができていないなどの可能性は極めて低いかと考えております。

どうかご教授よろしくお願いいたします。

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

[14:44:23] Using gulpfile ~\（ファイル名）\gulpfile.js
[14:44:23] Starting 'default'...
[14:46:49] Starting 'compilePug'...
[14:46:49] 'compilePug' errored after 94 ms
[14:46:49] SyntaxError in plugin "gulp-pug"
Message:
    Unexpected token (43:16)
Details:
    pos: 1256
    loc: [object Object]
    raisedAt: 1257
    domainEmitter: [object Object]
    domainThrown: false

試したこと

過去の似た質問の閲覧

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

OS:Windows
エディタ:VScode
使用ツール:sass/pug/react(入れただけで使い方分かっていないので今回は使わないことにしました)
ブラウザ:クローム

runnynose

2021/06/22 09:01

react開発の中でpugを使用したいですか？それもpugはhtmlで出力できれば良いですか？前者であれば、gulpじゃなくてwebpackがいいかもしれないのですが。。。

mitrasi

2021/06/22 23:34

コンポーネントしたかったので、リアクト導入まではしてみたもののどこに何を書けばいいかわからないしし、取り入れるのは難しそうだなと思ってあきらめて普通にpugでhtml出力しようかと考えているところです。

runnynose

2021/06/23 07:58

> コンポーネント化を取り入れたくてReact まず、コンポーネントとは何か？を理解したほうが良いかもしれないです。 PugでHTMLをコンポーネント管理したいのであれば、mixinを使いましょう。そして次にReactは何のためのフレームワークかも理解したほうが良いかもしれないです。 Reactは基本、SPAを作るためのフレームワークです。また、ReactはデフォルトだとjsxというXML記法を用いて開発していきます。その記法をPug記法に変えたいということであれば、Gulpでなくwebpackでカスタマイズするのが一般的ですね。また、Reactを使って、Pugのように静的にHTMLを出力するようなこともできますが、ある程度Reactを理解した人がやることでしょうね。ごちゃごちゃ書きましたが、まずはReactを単体で触ってみてSPAというものがどいうものかを理解したほうが良いかもしれないです^^ Reactアプリをサクッと準備するならcreate-react-appを使用するとよいでしょう！ (ちなみに私はVue.jsしか知らないのですが。。。)