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

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

新規登録して質問してみよう
ただいま回答率
85.50%
コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

コンパイルエラー

コンパイルのフェーズで生成されるエラーです。よく無効なシンタックスやタイプが含まれているとき発生します。

Sass

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

gulp

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

Q&A

解決済

1回答

2444閲覧

GlupでSCSSのコンパイルと終了ができない

Kama

総合スコア11

コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

コンパイルエラー

コンパイルのフェーズで生成されるエラーです。よく無効なシンタックスやタイプが含まれているとき発生します。

Sass

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

gulp

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

0グッド

0クリップ

投稿2016/12/31 11:47

Gulpを利用してサイトを作成しているのですが、急にSCSSのコンパイルなどができなくなりました。
MacなのでTimeMachineを使って、問題が起きる前まで復元してみたのですが
解決できなかったため、どなたかご教示いだければと思います。

問題としては

1)SCSSがコンパイルされない
2)ターミナルでcontrol+cで終了もできない
3)watchされている様子もない

この問題が起こる前は、MAMPとbrowser_syncを併用してリアルタイムで確認が取れていました。

gulpfile.jsの内容は下記になります。

javascript

1module.exports = gulp 2var gulp = require('gulp'); 3var autoprefixer = require('gulp-autoprefixer'); 4var plumber = require('gulp-plumber'); 5var sass = require('gulp-sass'); 6var rename = require('gulp-rename'); 7var watch = require('gulp-watch'); 8var notify = require('gulp-notify'); 9var browser = require('browser-sync'); 10var sourcemaps = require('gulp-sourcemaps'); 11var reload = browser.reload; 12 13gulp.task('server', function(){ 14 browser({ 15 target: 'http://localhost:3000', 16 proxy: 'hogehoge.com' 17 }); 18 }); 19 20gulp.task('reload', function(){ 21 browser.reload(); 22 }); 23 24gulp.task('sass', function(){ 25 gulp.src('assets/sass/**/*.scss') 26 .pipe(plumber({ 27 errorHandler: notify.onError("SCSS: <%= error.message %>") 28 })) 29 .pipe(sourcemaps.init()) 30 .pipe(sass({ 31 outputStyle: 'expanded' 32 })) 33 .pipe(autoprefixer()) 34 .pipe(sourcemaps.write('./')) 35 .pipe(gulp.dest('assets/css')); 36 }); 37 38gulp.task('watch', ['server'], function(){ 39 40 gulp.watch( 41 'assets/sass/**/*.scss', 42 ['sass'] 43 ); 44 45 // Live reload 46 gulp.watch( 47 [ 48 'assets/sass/**/*.scss', 49 '**/*.php' 50 ], 51 ['reload']); 52 53 }); 54 55// Gulp Start Default Task 56gulp.task('default', [ 'sass', 'watch' ]);

pack.jsの内容は下記になります。

json

1{ 2 "name": "hogehoge.com", 3 "version": "1.0.0", 4 "description": "", 5 "main": "gulpfile.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "author": "", 10 "license": "ISC", 11 "devDependencies": { 12 "browser-sync": "2.17.0", 13 "gulp": "3.9.1", 14 "gulp-autoprefixer": "3.1.1", 15 "gulp-jsmin": "0.1.5", 16 "gulp-notify": "2.2.0", 17 "gulp-plumber": "1.1.0", 18 "gulp-rename": "1.2.2", 19 "gulp-sass": "2.3.2", 20 "gulp-sourcemaps": "1.6.0", 21 "gulp-watch": "4.3.10" 22 } 23}

どなたか原因がわかるかたはいらっしゃいますでしょうか?
その他に確認(掲載)しなければならないことがあれば、併せてご教示いただけますよう宜しくお願い致します。

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

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

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

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

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

guest

回答1

0

自己解決

自己解決です。

SCSS内のコメントアウトなどの中にある
日本語を削除しましたらコンパイルされるようになりました。

原因はわかりませんが、コメントアウトは必要なので
どうかできるよう続けて確認してみます。

投稿2017/01/01 12:25

Kama

総合スコア11

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

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

gin

2017/01/06 03:04

ものすごく今更ですけど、文字コードが合ってなくてコンパイルしたときに文字化けを起こしてるんじゃないですかね?
Kama

2017/01/06 06:53

ご返信ありがとうございます。 日本語(マルチバイト)があることで、コンパイルできない、という事は 仰る通り、文字コードが原因なのかな、と思いました。 色々なscss(文字コードはutf-8)をインクルードしているので、すべてに「@charset 'UTF-8';」宣言をしなければならないのでしょか? 今までは問題なく動いていましたが、一応今回から入れるようにはしました。 またフォント指定にも日本語が入ってるのですが、これはスルー(問題なくコンパイル)されるので、まだまだ確認の必要はありそうです。 もう少し調べてみたいと思います。 ご教示ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問