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

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

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

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

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

gulp

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

Q&A

解決済

1回答

2327閲覧

gulpでSASSを自動コンパイルする際のエラーについて

MeB

総合スコア104

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

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

gulp

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

0グッド

1クリップ

投稿2018/01/18 01:38

編集2018/01/18 02:24

gulp watchを実行した後に
実際にsassファイルを編集すると

Starting 'sass_legacy'...
'sass_ex' errored after 23 μs
TypeError: Cannot read property 'split' of undefined

とエラーがでてコンパイルができないのですが、
調べても原因が全くわからず・・・
ご教示よろしくお願い致します。

package.json

{ "name": "test", "version": "1.0.0", "devDependencies": { "gulp": "^3.9.1", "gulp-autoprefixer": "^4.1.0", "gulp-compass": "^2.1.0", "gulp-concat": "^2.6.1", "gulp-consolidate": "^0.1.2", "gulp-iconfont": "^8.0.1", "gulp-plumber": "^1.2.0", "gulp-rename": "^1.2.2", "gulp-sass": "^3.1.0", "gulp-uglify": "^1.5.4", "lodash": "^4.17.2" } }

gulpfile.js

gulp.task('sass', function(){ var path = event_obj.path; if(path.indexOf('\') >= 0) { path = path.split('www.test.com\')[1]; dir = path.split('scss\')[0]; } else { path = path.split('www.test.com/')[1]; dir = path.split('scss/')[0]; } gulp.src('htdocs/assets/scss/**/*.scss') .pipe(plumber()) .pipe(sass({ outputStyle: 'compressed', // outputStyle: 'expand', // css: dir + '/css/', // image: dir + '/images', // sass: dir + '/scss/' })) .pipe(gulp.dest(dir + '/css/'));; }); gulp.task('watch', function(){ // scssファイルを監視し、sassコンパイルを実行 gulp.watch('htdocs/common/scss/**/*.scss', ['sass_legacy']) .on('change', function(event) { event_obj = event; });

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

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

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

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

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

sii_side

2018/01/18 02:17

モジュール不足→じゃあインストール、みたいな単純なエラーではない場合、これだけでは何とも言えないので、取り急ぎ本文にpackage.jsonとgulpfile.jsの内容を追記していただけないでしょうか。
MeB

2018/01/18 02:24

訂正いたしました
miyabi-sun

2018/01/18 07:06

エラー文読む限り「sass_legacyタスクを開始します... sass_exタスク内でエラーが発生しました」と読み取れますが、gulpfile.jsにはsassとwatchだけ…sass_legacyやsass_exタスクが存在するのでは?もし存在するのであればお願いします。
guest

回答1

0

ベストアンサー

断片的な情報しか無い状態ですので、推測しかできませんが、

JavaScript

1var path = event_obj.path; 2if(path.indexOf('\') >= 0) { 3 path = path.split('www.test.com\')[1]; 4 dir = path.split('scss\')[0]; 5} else { 6 path = path.split('www.test.com/')[1]; 7 dir = path.split('scss/')[0]; 8}

エラーの内容から察するに、怪しいのはこのあたりではないかと思います。

例えばpath.split('www.test.com\')[1]の結果がundefinedなら、次にそれをsplitするとエラーになります。

何行目でエラーが出ているかエラーメッセージに出ているはずですが、このあたりなのではないでしょうか。

JavaScript

1if (path.indexOf('\') >= 0) { 2 console.log(path) 3 path = path.split('www.test.com\')[1] 4 console.log(path) 5 dir = path.split('scss\')[0] 6} else { 7 console.log(path) 8 path = path.split('www.test.com/')[1] 9 console.log(path) 10 dir = path.split('scss/')[0] 11}

まずはconsole.logを使って、元のpathsplitした後のpathがどうなっていのか確認して、目的に合った処理になるよう修正を施す、ということになるのではないかと思います。

投稿2018/01/18 03:12

sii_side

総合スコア849

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問