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

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

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

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

gulp

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

Q&A

0回答

1623閲覧

gulpにてsvgスプライトを自動化したい

ruuusaamarki

総合スコア468

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

gulp

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

0グッド

0クリップ

投稿2016/10/18 07:18

###前提・実現したいこと
gulpにてsvgスプライトを自動化したいのですが
エラーが発生しています。

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

SyntaxError: Unexpected token = at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:373:25) at Object.Module._extensions..js (module.js:416:10) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Object.<anonymous> (/var/www/html/hogegege.co.jp/node_modules/gulp-svg2png/index.js:18:15) at Module._compile (module.js:409:26) at Object.Module._extensions..js (module.js:416:10)

###該当のソースコード

javascript

1var gulp = require('gulp'); 2var $ = require('gulp-load-plugins')(); 3 4 5gulp.task('svg', function () { 6 gulp.src('images/svg/*.svg') 7 //.pipe($.svgmin()) 8 .pipe($.svgstore({ inlineSvg: true })) 9 .pipe($.cheerio({ 10 run: function ($, file) { 11 $('svg').addClass('hide'); 12 $('[fill]').removeAttr('fill'); 13 }, 14 parserOptions: { xmlMode: true } 15 })) 16 .pipe(gulp.dest('dist/images/svg')); 17}); 18 19 20gulp.task('svg2png', function () { 21 gulp.src('images/svg/*.svg') 22 .pipe($.svg2png(3)) 23 .pipe($.rename({ prefix: "svg.svg." })) 24 .pipe($.imagemin()) 25 .pipe(gulp.dest('dist/images/svg/png')); 26});

###試したこと
gulp svgは実行できました。
svgの部分をコメントアウトしてgulp svg2pngを実行してみましたが
エラーは同じでした。

###補足情報(言語/FW/ツール等のバージョンなど)
以下参考にさせていただいたサイトになります。お世話になっております。
ttp://parashuto.com/rriver/development/easiest-svg-sprite-icon-system

なおpackage.jsonにはその他のプラグインなども入っておりますがこのあたりでコンフリクトするという可能性はあるのでしょうか。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問