0

Gulp : How to create a task that compiles multiple SASS files? のように、複数の scss ファイルを 1 つに結合しようとしています。; ただし、私のファイルの 1 つは私の gulpfile の上にあります。

/project_root/
    fe/
        common/
            app/src/main/styles/main.scss
            gulpfile.js
        module/src/foo/styles/main.scss

私のgulpfileは次のようになります：

gulp.task('styles', function() {
    return gulp
        .src(
            [
                './app/src/**/main.scss',    // included
                '../module/src/**/main.scss' // NOT included
            ],
            { base: '.'} // this doesn't seem to matter
        )
        .pipe( plumber() )
        .pipe(
            sass({
                errLogToConsole: true,
                sourceComments : 'normal'
            })
        )
        // …
        .pipe(rename('app.css'))
        .pipe(gulp.dest('../build/'));
});

私は（*.jsの代わりにmain.scss）私のjsで基本的に同じことをします、そしてそれはうまく動作します:/

更新: 上記の名前変更を削除すると、2 番目の main.scss が処理され、dest ディレクトリではなく同じディレクトリに main.css が作成されることに気付きました。

更新: ソース パスを共通の祖先から開始するようにしてみました'../{common,module}/**/main.scss'(これはパフォーマンスに大きな影響を与えました)。今では 2 番目のソース ファイルの 2 つのコピーを取得しています。

4

1 に答える 1

0

gulp-sass が期待どおりにファイルを連結しているようには見えません。

すべての依存関係をインポートする単一のファイルを使用して、すべての .scss ファイルを自分で 1 つに結合できます。

# app.scss
@import 'main.scss';
@import '../../../module/src/**/*.scss';

次に、現在のタスクですべてを処理します (名前を変更することはありません)。

gulp.task('styles', function() {
    return gulp
        .src('./app/src/**/site.scss')
        .pipe( plumber() )
        .pipe(
            sass({
                errLogToConsole: true,
                sourceComments : 'normal'
            })
        )
        // …
        .pipe(gulp.dest('../build/'));
});

これにより、sass はこれら 2 つのファイルを自動的に 1 つに結合します。ただし、独自のソースコード内から、モジュールディレクトリの下の依存関係であると私が想定しているものを管理するのは、ちょっと面倒です。

代わりに、次のように現在のタスクで gulp-concat を使用できます。

最初に でインストールしてからnpm install gulp-concat --save、タスクを次のように変更します。

var concat = require('gulp-concat');

gulp.task('styles', function() {
    return gulp
        .src(
            [
                './app/src/**/main.scss',    // included
                '../module/src/**/main.scss' // NOT included
            ],
            { base: '.'} // this doesn't seem to matter
        )
        .pipe( plumber() )
        .pipe(
            sass({
                errLogToConsole: true,
                sourceComments : 'normal'
            })
        )
        .pipe(gulp.dest('../build/css'))
        .pipe(concat('app.css'))
        .pipe(gulp.dest('../build/'));
});

これは、あなたがやろうとしていることを達成するはずですrename('app.css')。gulp-sass が複数のファイルを生成しているため、名前の変更は機能しません。スタイルの依存関係をソース コードのスタイルにインポートするのではなく、gulp タスクから管理できるため、この方法の方が私には良いように思えます。

于 2015-04-15T18:38:24.330 に答える