Как скомпилировать файлы SASS в разных каталогах, используя Gulp?

Я использую gulp-ruby-sass для компиляции js и sass.

Я столкнулся с этой ошибкой сначала TypeError: Arguments to path.join must be strings

Нашел этот ответ, и это потому, что я использовал исходные карты с gulp -sass и вместо этого рекомендовал использовать gulp-ruby-sass.

Затем я попытался скомпилировать все мои файлы SASS, используя этот синтаксис:

gulp.task('sass', function () {
    return sass('public/_sources/sass/**/*.scss', { style: 'compressed' })
        .pipe(sourcemaps.init())
        .pipe(concat('bitage_public.css'))
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('public/_assets/css'))
        .pipe(livereload());
});

Который произвел эту ошибку:gulp-ruby-sass stderr: Errno::ENOENT: No such file or directory - public/_sources/sass/**/*.scss

Я тогда заметил, в ответе я нашел, что автор написал, что глобусы ** пока не поддерживаются:

Также имейте в виду, что на момент написания этой статьи при использовании gulp-ruby-sass 1.0.0-alpha глобусы еще не поддерживаются.

Я больше копался и нашел способ использовать массив для указания путей к моим файлам SASS, поэтому я попробовал следующее:

gulp.task('sass', function () {
    return sass(['public/_sources/sass/*.scss',
             'public/_sources/sass/layouts/*.scss',
             'public/_sources/sass/modules/*.scss',
             'public/_sources/sass/vendors/*.scss'], { style: 'compressed' })
    // return sass('public/_sources/sass/**/*.scss', { style: 'compressed' })
    .pipe(sourcemaps.init())
    .pipe(concat('bitage_public.css'))
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('public/_assets/css'))
    .pipe(livereload());
});

Но все же я получаю Errno::ENOENT: No such file or directory и в нем перечислены все каталоги, которые я положил в этот массив.

Как вы компилируете SASS в нескольких каталогах с gulp?

Структура исходной папки SASS:

_sources
    layouts
        ...scss
    modules
        ...scss
    vendors
        ...scss
    main.scss
Источник

2 ответа

Решение

Догадаться!

Ну, не 100%, все еще не уверен, почему массив с несколькими путями не работал.

В любом случае, я забыл, что в моем главном файле web.scss у меня уже была настроена множественная инструкция импорта:

@import "vendors/normalize";    // Normalize stylesheet
@import "modules/reset";        // Reset stylesheet
@import "modules/base";         // Load base files
@import "modules/defaults";     // Defaults
@import "modules/inputs";       // Inputs & Selects
@import "modules/buttons";      // Buttons
@import "modules/layout";       // Load Layouts
@import "modules/svg";          // Load SVG
@import "modules/queries";      // Media Queries

Так что мне не нужно было пытаться использовать Gulp так, как я пытался, мне просто нужно было нацелиться на это 1 .scss файл напрямую. Итак, я сделал это здесь:

// Compile public SASS
gulp.task('sass', function () {
return sass('public/_sources/sass/bitage_web.scss', { style: 'compressed' })
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('public/_assets/css'))
    .pipe(livereload());
});

Теперь он работает, потому что видит целевой файл и компилирует

Источник

У меня тоже были проблемы с использованием *.scss

В документации git ( https://github.com/sindresorhus/gulp-ruby-sass) они используют этот синтаксис:

gulp.task('sass', function(){
   return sass('public/_sources/sass/',
   { style: 'compressed'})
.pipe(sourcemaps.init())
});

Я проверил это, и он работает, он компилирует все файлы в папке.

На всякий случай у кого-то такая же проблема

Источник
Другие вопросы по тегам