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

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

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

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

コンパイル

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

Sass

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

gulp

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

Q&A

解決済

1回答

914閲覧

gulp4 sassコンパイルが動かない

popc

総合スコア32

Node.js

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

コンパイル

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

Sass

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

gulp

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

0グッド

2クリップ

投稿2020/11/25 01:22

編集2022/09/29 18:07

gulp 4.0.2を使用していますが、sassコンパイル+リロードができるときとできない時があり、困っています。

gulpfile.js

javascript

1const gulp = require('gulp'); 2 3const gulpSass = require('gulp-sass'); // sassコンパイル 4const sassGlob = require('gulp-sass-glob'); 5const autoprefixer = require('gulp-autoprefixer'); // ベンダープレフィックス自動付与 6const plumber = require('gulp-plumber'); // コンパイルエラー時にコネクト解除しない 7const notify = require('gulp-notify'); // エラー時にデスクトップに通知 8const browserSync = require('browser-sync'); // ブラウザー自動リロード 9const gcmq = require('gulp-group-css-media-queries'); //メディアクエリをまとめる 10const webpackStream = require('webpack-stream'); 11const webpack = require('webpack'); 12const webpackConfig = require('./webpack.config'); 13 14const baseDir = './resource'; 15const dist = './public'; 16 17// browserSync sync 18gulp.task('browser-sync', () => { 19 return browserSync.init({ 20 server: { 21 baseDir: dist, // 対象ディレクトリ 22 index: 'index.html', // インデックスファイル 23 }, 24 reloadOnRestart: true, 25 }); 26}); 27 28//HTML PHP リロード自動更新 29const reload = (done) => { 30 browserSync.reload(); 31 done(); 32}; 33 34//webpack 35const webpackRun = (done) => { 36 webpackStream(webpackConfig, webpack) 37 .on('error', function (e) { 38 this.emit('end'); 39 }) 40 .pipe(gulp.dest(dist + '/js/')); 41 done(); 42}; 43 44//sassコンパイル、ベンダープレフィックス自動付与 45const sass = (done) => { 46 gulp 47 .src(baseDir + '/sass/**/*.scss', { sourcemaps: true }) 48 .pipe(sassGlob()) // Sassの@importにおけるglobを有効にする 49 .pipe( 50 plumber({ 51 errorHandler: notify.onError('<%= error.message %>'), 52 }) 53 ) 54 .pipe(gulpSass({ outputStyle: 'expanded' })) 55 .pipe(autoprefixer({ grid: true })) 56 .pipe(gcmq()) 57 .pipe(gulp.dest(dist + '/css'), { sourcemaps: './maps' }) 58 .pipe(browserSync.stream()); 59 done(); 60}; 61 62// watch 63const watch = () => { 64 gulp.watch(baseDir + '/sass/**/*.scss', gulp.series('sass')); 65 gulp.watch(baseDir + '/js/**/*.js', gulp.series('webpack', 'reload')); 66 gulp.watch(baseDir + '/vue/**/*.vue', gulp.series('webpack', 'reload')); 67 gulp.watch(dist + '/*.{html,php}', gulp.series('reload')); 68}; 69 70gulp.task('reload', reload); 71gulp.task('webpack', webpackRun); 72gulp.task('sass', sass); 73gulp.task('watch', watch); 74 75//デフォルトタスク 76exports.default = gulp.parallel('watch', 'browser-sync'); 77

npm run gulp で処理を走らせています。
このようになって、監視状態には入っていますが、

[10:03:01] Using gulpfile /Volumes/web/gulpfile.js [10:03:01] Starting 'default'... [10:03:01] Starting 'watch'... [10:03:01] Starting 'browser-sync'... [Browsersync] Access URLs: ---------------------------- Local: http://localhost:3000 ---------------------------- UI: http://localhost:3001 ---------------------------- [Browsersync] Serving files from: ./public

その後scssファイルを保存しても何も起こらない・・といった感じです。
もう一度gulpし直すと、できることもあり、

ディレクトリは、下記のようになっています。
public/css/style.css
resource/sass/_global.scss
resource/sass/_reset.scss
resource/sass/_variable.scss
resource/sass/common/(以下いろんなファイル名のscssファイル)
resource/sass/component/(以下いろんなファイル名のscssファイル)
resource/sass/pages/(以下いろんなファイル名のscssファイル)
resource/sass/style.scss
できる時もあるので、ディレクトリは間違ってはいないと思います。

関係あるかわかりませんが、下記部分をコメントアウトすると

javascript

1.pipe(gulp.dest(dist + '/css'), { sourcemaps: './maps' })

下記のように動きはする(というか、成功率があがる)ようです
当然このままだと保存されませんが・・

[10:17:20] Starting 'sass'... [10:17:20] Finished 'sass' after 5.53 ms [Browsersync] 1 file changed (style.css)

よろしくお願いいたします。

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

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

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

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

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

miyabi_takatsuk

2020/11/25 03:58

他の監視などは動いておりますか?
popc

2020/11/25 04:16

webpackとhtmlリロードもsassと同じような状況です。(vueは今確認できていませんが、おそらく同じだと思います…) ちなみになのですが、一度動いた時は、2回め以降も動きます(webpackなども同様)。1度目で動かなかったらその後もgulpし直すまで動かないといった状況です。
guest

回答1

0

自己解決

かなり時間がかかりましたが、自己解決しました。

watchのところに{ usePolling: true }をつけたすことで
確実に動作するようになりました。

javascript

1gulp.watch(baseDir + '/sass/**/*.scss',{ usePolling: true }, gulp.series('sass'));

投稿2022/09/29 09:07

popc

総合スコア32

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問