Я разрабатываю более сложный веб-сайт, который требует нескольких таблиц стилей для интерфейса и бэкэнд, которые загружаются только в случае определенных конкретных условий.
Я разрабатываю 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
. Я был бы очень доволен, если бы кто-нибудь мог помочь мне в этом.
Проблема в задаче наблюдения.
Когда вы сначала запускаете задачу - вы 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 ) {
// ...
});
});
let cssFiles = cssFront.concat(cssBack); // create new array ['style.scss', 'admin.scss', 'settings.admin.scss']