在多维数组上映射 gulp.task

Question

项目信息

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

我在 scss 中开发并使用 gulp.

编译文件

然后在我的 gulp 文件中声明一个包含所有前端样式表的数组和另一个包含后端样式表的数组。这是它目前的样子。不过还没完。

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 is not a function

由于这个错误消息，我假设有更好的写法 gulp.task。如果有人能帮我解决这个问题，我将非常高兴。

Answer 1

watch 任务出现问题。
当你第一次运行任务时 - 你为 cssFiles （几个数组 [ cssFront, cssBack ]）

做 reduce

此结果以新值 ['style.scss', 'admin.scss', 'settings.admin.scss']

保存在您的变量 cssFiles 中

下次观察任务运行时，它会减少已经得到的数组['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 ) {
        // ...
    });
});

在多维数组上映射 gulp.task

Map gulp.task over multidimensional array

javascript

arrays

build-automation

multidimensional-array

gulp

项目信息

代码应该做什么

我做了什么

问题