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

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

ただいまの
回答率

89.21%

gulp4で_*.scssがコンパイルされない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,354

Unite-east

score 12

基本的なことですいません。

scssディレクトリに「_*.scss」と「style.scss」があり、
「style.scss」に「_*.scss」をインポートさせています。

「style.scss」を編集し、保存すると正常にコンパイルされるのですが、

「_*.scss」を編集し、保存するとコンパイルされません。
ですが、再び「style.scss」を編集し、保存すると「_*.scss」の編集した箇所もコンパイルされています。

「_*.scss」を編集し保存した時にもコンパイルされるようにするにはどうしたら良いでしょうか?

該当のソースコード

var gulp = require('gulp');
var cache = require('gulp-cached'); //変更のあったもの(scss)
var plumber = require('gulp-plumber'); //watch中にエラー防止
var csscomb = require('gulp-csscomb'); //cssプロパティ順序
var sass = require('gulp-sass');//cssコンパイル
var postcss = require('gulp-postcss'); //autoprefixerとセット
var autoprefixer = require('autoprefixer'); //ベンダープレフィックス付与
var cssdeclsort = require('css-declaration-sorter'); //css並べ替え
var gcmq = require('gulp-group-css-media-queries'); //CSSメディアクエリー整理
var notify = require('gulp-notify'); //エラーを通知
var browserSync = require('browser-sync'); //ブラウザ反映


/// cssコンパイル ////////////////////////////////////////////
// scssのコンパイル
gulp.task('sass', function () {
  return gulp.src('scss/*scss')
    .pipe(cache('sass'))
    .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))//エラーチェック
    .pipe(sass({
      outputStyle: 'expanded' //expanded, nested, campact, compressedから選択
    }))
    .pipe(postcss([autoprefixer(
      {
        // ☆IEは11以上、Androidは4.4以上
        // その他は最新2バージョンで必要なベンダープレフィックスを付与する
        browsers: ["last 2 versions", "ie >= 11", "Android >= 4"],
        cascade: false
      }
    )]))
    .pipe(postcss([cssdeclsort({ order: 'smacss' })]))//プロパティをソートし直す(アルファベット順)
    .pipe(gcmq())
    .pipe(gulp.dest('./'))//コンパイル後の出力先
    .pipe(notify({
      title: 'Sassをコンパイルしました。',
      message: new Date(),
      sound: 'Tink'
    }));
});

gulp.task('bs-reload', function (done) {
  browserSync.reload();
  done();
});

// 保存時のリロード
gulp.task('browser-sync', function (done) {
  browserSync.init({

    //ローカル開発
    server: {
      baseDir: "./"
    }
  });
  done();
});

gulp.task('bs-reload', function (done) {
  browserSync.reload();
  done();
});


// 監視
gulp.task('watch', function (done) {
  gulp.watch('../*/*.html', gulp.task('bs-reload'));
  gulp.watch('scss/*.scss', gulp.task('sass')); //sassが更新されたらgulp sassを実行
  gulp.watch('scss/*.scss', gulp.task('bs-reload')); //sassが更新されたらbs-reloadを実行
  gulp.watch('../**/*.css', gulp.task('bs-reload')); //cssが更新されたらbs-reloadを実行
  gulp.watch('js/*.js', gulp.task('bs-reload')); //jsが更新されたらbs-relaodを実行
});

// default
gulp.task('default', gulp.series(gulp.parallel('browser-sync', 'watch')));

試したこと

「_*.scss」はcssファイルにコンパイルしたくないので、アンダーバーをつけています。
アンダーバーをつけずに試したところ結果は同じでした。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

gulp-progenyというものを使うと
@import "_a"
パーシャルファイルを更新した時にもリロードがかかります。

参考
gulp-progeny
gulpでCSSの差分ビルド

それを踏まえた上でgulpfile.jsを書き直しました。

var gulp = require('gulp');
var cache = require('gulp-cached'); //変更のあったもの(scss)
var progeny = require('gulp-progeny');//依存関係を解決して差分ビルド
var plumber = require('gulp-plumber'); //watch中にエラー防止
var csscomb = require('gulp-csscomb'); //cssプロパティ順序
var sass = require('gulp-sass'); //cssコンパイル
var postcss = require('gulp-postcss'); //autoprefixerとセット
var autoprefixer = require('autoprefixer'); //ベンダープレフィックス付与
var cssdeclsort = require('css-declaration-sorter'); //css並べ替え
var gcmq = require('gulp-group-css-media-queries'); //CSSメディアクエリー整理
var notify = require('gulp-notify'); //エラーを通知
var browserSync = require('browser-sync'); //ブラウザ反映

/// cssコンパイル ////////////////////////////////////////////
// scssのコンパイル
gulp.task('sass', function() {
  return gulp
    .src('scss/*.scss')
    .pipe(cache('style'))
    .pipe(progeny())
    .pipe(
      plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })
    ) //エラーチェック
    .pipe(
      sass({
        outputStyle: 'expanded' //expanded, nested, campact, compressedから選択
      })
    )
    .pipe(
      postcss([
        autoprefixer({
          // ☆IEは11以上、Androidは4.4以上
          // その他は最新2バージョンで必要なベンダープレフィックスを付与する
          browsers: ['last 2 versions', 'ie >= 11', 'Android >= 4'],
          cascade: false
        })
      ])
    )
    .pipe(postcss([cssdeclsort({ order: 'smacss' })])) //プロパティをソートし直す(アルファベット順)
    .pipe(gcmq())
    .pipe(gulp.dest('./')) //コンパイル後の出力先
    .pipe(
      notify({
        title: 'Sassをコンパイルしました。',
        message: new Date(),
        sound: 'Tink'
      })
    );
});

gulp.task('bs-reload', function(done) {
  browserSync.reload();
  done();
});

// 保存時のリロード
gulp.task('browser-sync', function(done) {
  browserSync.init({
    //ローカル開発
    server: {
      baseDir: './'
    }
  });
  done();
});

gulp.task('bs-reload', function(done) {
  browserSync.reload();
  done();
});

// 監視
gulp.task('watch', function(done) {
  gulp.watch('../*/*.html', gulp.task('bs-reload'));
  gulp.watch('scss/*.scss', gulp.task('sass')); //sassが更新されたらgulp sassを実行
  gulp.watch('scss/*.scss', gulp.task('bs-reload')); //sassが更新されたらbs-reloadを実行
  gulp.watch('../**/*.css', gulp.task('bs-reload')); //cssが更新されたらbs-reloadを実行
  gulp.watch('js/*.js', gulp.task('bs-reload')); //jsが更新されたらbs-relaodを実行
  done();
});

// default
gulp.task('default', gulp.series(gulp.parallel('browser-sync', 'watch')));

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/30 09:16

    できました!gulpfile.jsの書き換えもして頂き、ありがとうございます!

    キャンセル

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

  • ただいまの回答率 89.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる