在多维数组上映射 gulp.task

Question

项目信息

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

我在 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-函数运行良好。我做了一个console.log，输出是：

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

如果直接运行任务 ($ gulp scss)，这段代码可以完美运行，文件全部编译并保存在assets/css/ 下，但是如果我运行$ gulp watch，我会收到一条错误消息

cssFiles.map 不是函数

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

Answer 1

监视任务中的问题。
当您第一次运行任务时 - 您为 cssFiles 执行 reduce（几个数组 [ 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 ) {
        // ...
    });
});