在多维数组

Question

有关项目的信息

我正在开发一个更复杂的网站，只需要在某些特定条件匹配时才需要为前端和后端添加多个样式表。

我在scss中开发并使用gulp编译文件。

在我的gulpfile中，我然后声明一个包含所有前端样式表的数组和另一个包含后端样式的数组。这是目前的样子。它虽然没有完成。

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

代码应该做什么

Gulp现在应映射cssFiles中的所有文件并编译这些文件的css代码。

我做了什么

然而map - 函数只能工作一维，所以我尝试将二维数组缩减为一维数组，然后映射到它上面。

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 - 功能运作良好。我做了一个console.log，输出是：

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

如果直接运行任务（$ gulp scss），此代码运行正常，文件全部编译并保存在assets/css/下，但是如果我运行$ gulp watch，则会收到错误消息

  

cssFiles.map不是函数

由于此错误消息，我认为有更好的方法来编写此gulp.task。如果有人能帮我解决这个问题，我会非常高兴。

Answer 1

观察任务中的问题。
首次运行任务时 - reduce cssFiles（多个数组[ cssFront, cssBack ]）

此结果将保存在变量cssFiles中，并带有新值['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 ) {
        // ...
    });
});