Карта gulp.task над многомерным массивом

1

Информация о проекте

Я разрабатываю более сложный веб-сайт, который требует нескольких таблиц стилей для интерфейса и бэкэнд, которые загружаются только в случае определенных конкретных условий.

Я разрабатываю scss и компилирую файлы с помощью gulp.

В моем gulpfile я объявляю массив со всеми таблицами стилей интерфейса и другим массивом, содержащим бэкэнд. Вот как это выглядит в настоящее время. Это еще не закончилось.

const cssFront     = [ 'style.scss' ];
const cssBack      = [ 'admin.scss', 'settings.admin.scss' ];
let cssFiles       = [ cssFront, cssBack ];

Что должен делать код

Теперь Gulp должен отображать все файлы в cssFiles и компилировать код css этих файлов.

Что я сделал

Однако map -functions работает только одномерно, поэтому я попытался уменьшить двумерный массив до одномерного, а затем отобразить его.

const sass         = require( 'gulp-sass' );
const autoprefixer = require( 'gulp-autoprefixer' );

const styleSRC     = './src/scss/';
const cssFront     = [ 'style.scss' ];
const cssBack      = [ 'admin.scss', 'settings.admin.scss' ];
let cssFiles       = [ cssFront, cssBack ];
const styleURL     = './assets/css/';
const mapURL       = './';

gulp.task( 'scss', function() {
    cssFiles = cssFiles.reduce(function(a, b){
        return a.concat(b);
    });

    cssFiles.map( function( file ) {
        return gulp.src( styleSRC + file )
        .pipe( sourcemaps.init() )
        .pipe( sass({
            errLogToConsole: true,
            outputStyle: 'compressed'
        }) )
        .on( 'error', console.error.bind( console ) )
        .pipe( autoprefixer({ browsers: [ 'last 2 versions', '> 5%', 'Firefox ESR' ] }) )
        .pipe( rename( { suffix: '.min' } ) )
        .pipe( sourcemaps.write( mapURL ) )
        .pipe( gulp.dest( styleURL ) )
        .pipe( browserSync.stream() );
    });
});

Эта проблема

reduce -function работает хорошо. Я сделал console.log и результат был:

['style.scss', 'admin.scss', 'settings.admin.scss']

Если вы запускаете задачу напрямую ($ gulp scss), этот код работает отлично, все файлы скомпилированы и сохранены в файле assets/css/, однако, если я запустил $ gulp watch, я получаю сообщение об ошибке

cssFiles.map не является функцией

Из-за этого сообщения об ошибке я предполагаю, что есть лучший способ записи этой gulp.task. Я был бы очень доволен, если бы кто-нибудь мог помочь мне в этом.

Теги:
arrays
multidimensional-array
gulp
build-automation

1 ответ

1
Лучший ответ

Проблема в задаче наблюдения.
Когда вы сначала запускаете задачу - вы reduce для cssFiles (несколько массивов [ cssFront, cssBack ])

Этот результат сохраняется в переменной cssFiles с новым значением ['style.scss', 'admin.scss', 'settings.admin.scss']

Когда в следующий раз ['style.scss', 'admin.scss', 'settings.admin.scss'] просмотра запустится, он уменьшит уже приведенный массив ['style.scss', 'admin.scss', 'settings.admin.scss'] а новый результат - строка "style.scssadmin.scsssettings.admin.scss" и сохранить в переменной cssFiles

после этого вы получите ошибку cssFiles.map is not a function
потому что "style.scssadmin.scsssettings.admin.scss".map() → is not a function

Вам нужно сделать reduce вне функции с вами задачей

cssFiles = cssFiles.reduce(function(a, b){
    return a.concat(b);
});

gulp.task( 'scss', function() {
    cssFiles.map( function( file ) {
        // ...
    });
});
  • 0
    Другой способ, без сокращения и более простой let cssFiles = cssFront.concat(cssBack); // create new array ['style.scss', 'admin.scss', 'settings.admin.scss']

Ещё вопросы

Сообщество Overcoder
Наверх
Меню