2

共通の sass モジュールを共有する複数のプロジェクトを含む、かなり大きなコード ベースがあります。

また、多数のタスクを実行するモジュールごとにかなり複雑な gulpfile をセットアップしています。

私が直面している問題の 1 つは、単一の共有 sass モジュールが更新されたときに、複数のプロジェクトで sass タスクを実行できることです。

例えば：

Project 1 file.scss
   @import "shared-child.scss"

Project 2 file.scss
   @import "shared-child.scss"

Project 3 file.scss
       @import "shared-child.scss"

このシナリオはよく発生します。また、 shared-child.scssを更新するときに、 shared-child.scssを含むすべてのプロジェクト ファイルを再コンパイルする必要があります。

したがって、 shared-child.scssで gulp sass タスクを実行すると、さまざまなプロジェクト (つまり、プロジェクト 1、プロジェクト 2、プロジェクト 3) のどこに含まれているかがわかり、適切な gulp タスクを実行して、変更を含めます。共有子.scss .

右の時点で、プロジェクト gulp.watching に親ファイルがあり、含まれているすべてのファイルの変更を監視していますが、その逆は問題の場所です。子を更新し、親を再コンパイルします。

これをどのように達成できるかについての情報をいただければ幸いです。

4

1 に答える 1

5

正確にはあなたが望むものではありませんが、パーシャル/インクルード/子が個別に解析されるのを避けるためにこれを使用しています。

var gulp = require('gulp');
var filter = require('gulp-filter');
var sass = require('gulp-sass');

gulp.task('styles', function () {
    return gulp.src('app/css/**/*.scss')
        .pipe(filter(noPartials))//avoid compiling SCSS partials
        .pipe(sass())
        .pipe(gulp.dest('dist'));
});

部分ファイルを含むすべてのファイルを監視して、ファイルが変更されたときにタスクがトリガーされるようにする必要があります。

gulp.task('watch', function() {
  gulp.watch('app/css/**/*.scss', ['styles']); //watch ALL the SCSS files
});

_パーシャルは、ファイル名またはそれを含むフォルダー名の先頭にあるによって認識されます。

var noPartials = function (file) {
    var path         = require('path');
    var dirSeparator = path.sep.replace('\\', '\\\\');
    var relativePath = path.relative(process.cwd(), file.path);
    return !new RegExp('(^|'+dirSeparator+')_').test(relativePath);
};

これの唯一の欠点は、 SCSS ファイルが変更されたときにすべての非部分ファイルがレンダリングされることです。

補足として、私はあなたが求めたものとまったく同じものを作成しましたが、依存関係ツリー/グラフを把握するプラグインを使用して、Jade (html テンプレート言語) を作成しました。誰かがSASSファイルのツリーを構築する方法を見つけた場合、可能です

于 2014-11-23T13:17:26.930 に答える