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

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

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

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

gulp

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

Q&A

解決済

1回答

1591閲覧

gulpでsassのコンパイル設定がうまくいかない件について

roronoazoro

総合スコア113

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

gulp

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

0グッド

0クリップ

投稿2019/06/03 12:08

編集2019/06/07 03:54

タイトルの通り、gulpでsassのコンパイル設定がうまくいかなくて悩んでいます。

gulpfile.jsとpackage.jsonの設定は下記です。

下記の設定でbrowserSyncのみうまく機能しページが表示されます。

※6/7追記しました。
下記参考サイトを参考にコンパイルエラーの設定をやってみましたがそれでもでませんでした。
というより、エラーもでないのでコンパイルに成功しているように思えます。。

SCSSコンパイルのエラー時にデスクトップ通知を出す方法

js

1var gulp = require('gulp'); 2var browserSync = require('browser-sync'); 3var sass = require('gulp-sass'); 4var plumber = require('gulp-plumber'); 5var sourcemaps = require('gulp-sourcemaps'); 6var notify = require("gulp-notify"); 7 8gulp.task('browser-sync', function (done) { 9 browserSync({ 10 port: 2222, 11 proxy: "ドメイン", 12 }); 13 done(); 14}); 15 16gulp.task('reload', function (done) { 17 browserSync.reload(); 18 done(); 19}); 20 21gulp.task('sass', function (done) { 22 gulp.src('html/common/scss/**/*.scss') 23 .pipe(plumber()) 24 .pipe(sourcemaps.init()) 25 .pipe(sass({ outputStyle: 'compressed', errLogToConsole: false })) 26 .pipe(sourcemaps.write('../css/')) 27 .pipe(gulp.dest('html/common/css/')); 28 errorHandler: notify.onError({ 29 title: "失敗してるよ!", // 任意のタイトルを表示させる 30 message: "<%= error.message %>" // エラー内容を表示させる 31 }) 32 done(); 33}); 34 35gulp.task('watch', function (done) { 36 gulp.watch("html/common/scss/**/*.scss", gulp.parallel('sass')); 37 gulp.watch("../html/**/*", gulp.parallel('reload')); 38 done(); 39}); 40 41gulp.task('default', gulp.parallel('browser-sync', 'watch', 'sass'));

npm run gulpで動かしてみると下記のようにでて成功しているように思えます。
ただ、試しにsassファイルをコンパイルしてくれません。

下記は試しに適当な.scssを保存した時にターミナルに表示される文面です。
成功しているようですが、やっぱり.cssに吐き出してくれません。

[12:50:59] Starting 'reload'... [12:50:59] Finished 'reload' after 1.32 ms [Browsersync] Reloading Browsers...

なにかアドバイスいただけると助かります。
のちほど情報追記していきます。

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

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

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

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

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

wa_

2019/06/06 01:28

gulp-notifyを追加インストールして、 plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }) と書くとsassのエラーメッセージが出るのでそれで原因が分かるのではないでしょうか?
roronoazoro

2019/06/07 03:55

コメントありがとうございます。 本文に上記の設定追加したものでためしてみましたが、エラーがでてきませんでした。。
roronoazoro

2019/06/07 04:00

すみません、パスのミスで吐き出しされていなかったようでした。。 ありがとうございました、!
guest

回答1

0

自己解決

ディレクトリ階層のミスでコンパイルが通ってなかっただけだったようです。
ありがとうございました。

投稿2019/06/07 04:00

roronoazoro

総合スコア113

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問