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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

gulp

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

受付中

gulpのエラーを解決したい

rpf6r5dn
rpf6r5dn

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

gulp

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

1回答

0評価

0クリップ

201閲覧

投稿2022/01/07 05:13

前提・実現したいこと

現在、WordPress化のオリジナルサイトを製作中です。
gulpを使用しており、製作中に以下のエラーメッセージが発生しました。

gulpfile.jsに、何かしら原因があるかとは思いますが、どの部分が原因か特定できていません。
ご教授いただけますと幸いです。
よろしくお願いします。

エラー内容

ターミナル

ma@maMacBook-Pro themes % gulp [13:52:17] Using gulpfile ~/Local Sites/wp/app/public/wp-content/themes/gulpfile.js [13:52:17] Starting 'default'... [13:52:17] Starting 'cssSass'... [13:52:17] 'cssSass' errored after 357 ms [13:52:17] Error: @media missing '}' near line 2355:1 at error (/Users/ma/Local Sites/wp/app/public/wp-content/themes/node_modules/css-parse/index.js:57:15) at atmedia (/Users/ma/Local Sites/wp/app/public/wp-content/themes/node_modules/css-parse/index.js:347:26) at atrule (/Users/ma/Local Sites/wp/app/public/wp-content/themes/node_modules/css-parse/index.js:457:10) at rules (/Users/ma/Local Sites/wp/app/public/wp-content/themes/node_modules/css-parse/index.js:103:44) at stylesheet (/Users/ma/Local Sites/wp/app/public/wp-content/themes/node_modules/css-parse/index.js:73:16) at module.exports (/Users/ma/Local Sites/wp/app/public/wp-content/themes/node_modules/css-parse/index.js:485:10) at Transform.transform [as _transform] (/Users/ma/Local Sites/wp/app/public/wp-content/themes/node_modules/gulp-merge-media-queries/index.js:133:19) at Transform._read (/Users/ma/Local Sites/wp/app/public/wp-content/themes/node_modules/gulp-merge-media-queries/node_modules/readable-stream/lib/_stream_transform.js:184:10) at Transform._write (/Users/ma/Local Sites/wp/app/public/wp-content/themes/node_modules/gulp-merge-media-queries/node_modules/readable-stream/lib/_stream_transform.js:172:12) at doWrite (/Users/ma/Local Sites/wp/app/public/wp-content/themes/node_modules/gulp-merge-media-queries/node_modules/readable-stream/lib/_stream_writable.js:237:10) [13:52:17] 'default' errored after 361 ms

glupfile.js

* package */ const { src, dest, watch, series, parallel } = require("gulp"); // const gulp = require("gulp"); const sass = require("gulp-sass"); const plumber = require("gulp-plumber"); const notify = require("gulp-notify"); const sassGlob = require("gulp-sass-glob"); const mmq = require("gulp-merge-media-queries"); const postcss = require("gulp-postcss"); const autoprefixer = require("autoprefixer"); const cssdeclsort = require("css-declaration-sorter"); const cleanCSS = require("gulp-clean-css"); const cssnext = require("postcss-cssnext") const rename = require("gulp-rename"); const sourcemaps = require("gulp-sourcemaps"); const themeName = "WordPressTheme"; // WordPress theme name const srcPath = { css: './sass/**/*.scss', } const destPath = { css: `./${themeName}/assets/css`, } /* compile sass */ // gulp.task("sass", function() { // return gulp const cssSass = () => { return src(srcPath.css) .pipe(sourcemaps.init()) .pipe( plumber({ errorHandler: notify.onError('Error:<%= error.message %>') })) .pipe(sassGlob()) .pipe(sass({ outputStyle: 'expanded' })) //指定できるキー expanded compressed .pipe(postcss([autoprefixer({ // autoprefixer grid: true })])) .pipe(postcss([cssdeclsort({ // sort order: "alphabetical" })])) .pipe(mmq()) // media query mapper .pipe(dest(destPath.css)) .pipe(cleanCSS()) .pipe(rename({ extname: '.min.css' })) .pipe(sourcemaps.write('./map')) .pipe(dest(destPath.css)) .pipe(notify({ message: 'Sassをコンパイルしました!', onLast: true })) } const watchFiles = () => { watch(srcPath.css, series(cssSass)) // watch(srcPath.img, series(imgImagemin)) } exports.default = series(series(cssSass), parallel(watchFiles));

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

gulp

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