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

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

ただいまの
回答率

87.92%

gulpでsassを依存関係を解決してコンパイルしたい

受付中

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,766

score 17

 前提・実現したいこと

下記のようなファイル構成で、indexとaboutは_commonを@importしているとします。
・_common.scss
・index.scss
・about.scss
しかし_commonを変更してもindexやaboutは書き出されないため、
各ファイルを個別にコンパイルするか、
ターミナル上でgulp sassのようにコマンドを実行をするしかありません。

理想としては、_commonを変更したら、
index.scssとabout.scssを一気にコンパイルしたいです。

gulp-progenyというのを見つけて試してみたのですが、
エラーが出てしまいダメでした。
よろしくお願いいたします。

 試したこと

・gulp-progeny
参考:gulpでCSSの差分ビルド(https://qiita.com/73cha/items/270e2dc33c63292dd184)

 該当のソースコード

■gulpfile.babel.js

// 使用しているプラグイン
import gulp from 'gulp';
import browserify from 'browserify';
import babelRegister from 'babel-register';
import babelify from 'babelify';
import watchify from 'watchify';
import browserSync from 'browser-sync';
import progeny from "gulp-progeny";
// gulp-**** 系のプラグインを一気に読み込む
import gulpLoadPlugins from 'gulp-load-plugins';
// gulp-**** 系のプラグインを$.****で呼び出せるように
const $ = gulpLoadPlugins();

gulp.task('sass', () => {
// ↓もともとは読み込み専用(_*.scss)は除外してました
// gulp.src(['src/scss/**/*.scss','!src/scss/**/_*.scss'])
  gulp.src(['src/scss/**/*.scss'])
  .pipe($.cached('sass'))
// ↓を試してみたけどエラーがでます
  .pipe($.progeny())
/*
Users/username/works/html/clientname/app/dev/node_modules/progeny/index.js:106
          return val.match(last)[1];
                     ^
TypeError: Cannot read property 'match' of null
*/
  .pipe($.plumber({
    handleError: function(err) {
      console.log(err);
      this.emit('end');
    }
  }))
  .pipe($.sass())
  .pipe($.pleeease({
      sass: true
  }))
  .pipe($.rename({
    suffix: '.min',
    extname: '.css'
  }))
  .pipe(gulp.dest('./dest/css'));
});

/////////////////////////////
// watch
/////////////////////////////

// brower sync
gulp.task('browser-sync', () => {
  browserSync.init({
    port: 9000,
    server: {
        baseDir: "./dest/",
      index  : "index.html"      //インデックスファイル
    }
      });
});

gulp.task('bs-reload', () => {
    browserSync.reload();
});

// default
gulp.task('default', ['browser-sync'], () => {
//gulp.task('default', () => {
    $.watch('src/scss/**/*.scss', () => { return gulp.start(['sass','bs-reload'])});
});

 補足情報(FW/ツールのバージョンなど)

■package.json

{
  "name": "dev",
  "version": "1.0.0",
  "description": "gulp template",
  "main": "gulpfile.babel.js",
  "author": "author name",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.3.1",
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-register": "^6.26.0",
    "babelify": "^8.0.0",
    "bootstrap": "^4.1.2",
    "browser-sync": "^2.24.5",
    "browserify": "^16.2.2",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.1",
    "gulp-browserify": "^0.5.1",
    "gulp-cached": "^1.1.1",
    "gulp-changed": "^3.2.0",
    "gulp-connect-php": "^1.0.3",
    "gulp-ejs": "^3.1.3",
    "gulp-imagemin": "^4.1.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-notify": "^3.2.0",
    "gulp-pleeease": "^2.0.2",
    "gulp-plumber": "^1.2.0",
    "gulp-progeny": "^0.4.1",
    "gulp-rename": "^1.3.0",
    "gulp-sass": "^4.0.1",
    "gulp-uglify": "^3.0.0",
    "gulp-useref": "^3.1.5",
    "gulp-watch": "^5.0.0",
    "imagemin-pngquant": "^5.1.0",
    "jquery": "^3.3.1",
    "npm": "^6.1.0",
    "watchify": "^3.11.0"
  },
  "devDependencies": {
    "slick-carousel": "^1.8.1"
  }
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

babelの記法がわからないので読み替えて下さい。

「sass-module-importer」をインストールして、「sass-module-importer」をgulpfileに読み込む。

const moduleimporter = require('sass-module-importer');

あとは、

.pipe(sass())
   
   ↓

.pipe(sass({
      importer: moduleimporter()
}))

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

同じタグがついた質問を見る