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

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

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

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

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

Q&A

解決済

1回答

2734閲覧

Gulpのsvgを読み込む際のエラーについて

kogari

総合スコア12

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

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

0グッド

0クリップ

投稿2021/04/28 03:32

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

gulpを導入して間もないのですが、imgフォルダの中にsvg画像を一緒に入れているのですが、ターミナルでエラーが発生してググっても解決できない状況です。
imgフォルダとは別にsvgフォルダを作成してそこから読み込ませるようにすれば良いのでしょうか?
いろいろググっても直接的に解決できるような内容がなくて考えても先に進めずなので質問させていただきました。
知っている方いたらお力添えお願い致します。

[11:44:24] 'imgImagemin' errored after 35 ms [11:44:24] Error in plugin "gulp-imagemin" Message: Plugin name should be specified

gulpfile.js

const gulp = require('gulp'); const del = require('del'); //scss const sass = require('gulp-dart-sass'); //Dart Sass はSass公式が推奨 @use構文などが使える const plumber = require("gulp-plumber"); // エラーが発生しても強制終了させない const notify = require("gulp-notify"); // エラー発生時のアラート出力 const browserSync = require("browser-sync"); //ブラウザリロード const autoprefixer = require('gulp-autoprefixer'); //ベンダープレフィックス自動付与 const postcss = require("gulp-postcss"); //css-mqpackerを使うために必要 const mqpacker = require('css-mqpacker'); //メディアクエリをまとめる const merge = require('merge-stream') //画像圧縮 const imagemin = require("gulp-imagemin"); const imageminMozjpeg = require("imagemin-mozjpeg"); const imageminPngquant = require("imagemin-pngquant"); const imageminSvgo = require("imagemin-svgo"); // 入出力するフォルダを指定 const srcBase = './_static/src'; const distBase = './_static/dist'; const srcPath = { 'scss': srcBase + '/scss/**/*.scss', 'html': srcBase + '/**/*.html', 'img': srcBase + '/img/**/*', 'svg': srcBase + '/svg/**/*.svg', 'js': srcBase + '/js/**/*.js', 'php': srcBase + '/**/*.php', 'font': srcBase + '/font/**/*', }; const distPath = { 'css': distBase + '/css/', 'html': distBase + '/', 'img': distBase + '/img/', 'svg': distBase + '/svg/', 'js': distBase + '/js/', 'php': distBase + '/', 'font': distBase + '/font/', }; /** * clean */ const clean = () => { return del(distBase + '/**'); } //ベンダープレフィックスを付与する条件 const TARGET_BROWSERS = [ 'last 2 versions', //各ブラウザの2世代前までのバージョンを担保 'ie >= 11' //IE11を担保 ]; /** * sass * */ const cssSass = () => { return gulp.src(srcPath.scss, { sourcemaps: true }) .pipe( //エラーが出ても処理を止めない plumber({ errorHandler: notify.onError('Error:<%= error.message %>') })) .pipe(sass({ outputStyle: 'expanded' })) //指定できるキー expanded compressed .pipe(autoprefixer(TARGET_BROWSERS)) .pipe(postcss([mqpacker()])) // メディアクエリをまとめる .pipe(gulp.dest(distPath.css, { sourcemaps: './' })) //コンパイル先 .pipe(browserSync.stream()) .pipe(notify({ message: 'Sassをコンパイルしました!', onLast: true })) } /** * 画像圧縮 */ const imgImagemin = () => { return gulp.src(srcPath.img) .pipe( imagemin( [ imageminMozjpeg({ quality: 80 }), imageminPngquant(), imageminSvgo({ plugins: [{ removeViewbox: false }] }) ], { verbose: true } ) ) .pipe(gulp.dest(distPath.img)) } /** * html */ const html = () => { return gulp.src(srcPath.html) .pipe(gulp.dest(distPath.html)) } /** * js */ const js = () => { return gulp.src(srcPath.js) .pipe(gulp.dest(distPath.js)) } /** * php */ const php = () => { return gulp.src(srcPath.php) .pipe(gulp.dest(distPath.php)) } /** * 独自fontをsrc配下に読み込む際の対応 */ const font = () => { return gulp.src(srcPath.font) .pipe(gulp.dest(distPath.font)) } /** * ローカルサーバー立ち上げ */ const browserSyncFunc = () => { browserSync.init(browserSyncOption); } const browserSyncOption = { server: "./_static/dist/" } /** * リロード */ const browserSyncReload = (done) => { browserSync.reload(); done(); } /** * * ファイル監視 ファイルの変更を検知したら、browserSyncReloadでreloadメソッドを呼び出す * series 順番に実行 * watch('監視するファイル',処理) */ const watchFiles = () => { gulp.watch(srcPath.scss, gulp.series(cssSass)) gulp.watch(srcPath.html, gulp.series(html, browserSyncReload)) gulp.watch(srcPath.js, gulp.series(js, browserSyncReload)) gulp.watch(srcPath.img, gulp.series(imgImagemin, browserSyncReload)) gulp.watch(srcPath.php, gulp.series(php, browserSyncReload)) gulp.watch(srcPath.font, gulp.series(font, browserSyncReload)) } /** * seriesは「順番」に実行 * parallelは並列で実行 * * 一度cleanでdistフォルダ内を削除し、最新のものをdistする */ exports.default = gulp.series( clean, gulp.parallel(html, cssSass, js, imgImagemin, php, font), gulp.parallel(watchFiles, browserSyncFunc) );

試したこと

ググったらこれを打ち込めば直ると記載ありましたが全く解決できず。。。
svgスプライト?で読み込むのかどうか全くわからずです。。

npm install mozjpeg

上記のエラー文はimgフォルダの中にsvgが入ってる状態でした。
今は写真のようにsvgに分けています。
分けている状態だとnpx gulpで正常に起動しますが、svg画像だけ読み込めないです。
イメージ説明

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

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

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

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

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

guest

回答1

0

ベストアンサー

プラグイン、gulp-imageminは、SVGファイルには対応していない、といったエラーです。
そもそも、SVGファイルは、テキストベースのファイルのため、
圧縮の必要はありません
(改行や、余計なスペースを削除すれば、容量を多少抑えられはするが、微々たる変化)
よって、.svgとつくファイルは回避して、gulp-imageminをかけない、という構文にする必要があります。

投稿2021/04/28 04:03

miyabi_takatsuk

総合スコア9555

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

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

kogari

2021/04/28 04:32

miyabiさん ありがとうございます! svgファイルを削除して、gulpfile.jsのimgImagemin関数の中でgulp-imageminをかけないようにするという事でしょうか?
miyabi_takatsuk

2021/04/28 04:36

違います。 gulpの構文の中で、 imgフォルダを参照している箇所にて、 .svgのファイルに対しては、処理をかけない、という構文にする必要があるということです。
kogari

2021/04/28 04:48

そういう事でしたか。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問