Не могу найти зацепку в ошибки, для дальнейшего исправление ее... Поможете?

Question

[Nikolay]

Есть такие таски) Выполнены в одно жанре но сложность в том что один из примера рабочий, а другие два не рабочие)

Два первые не рабочие.

gulp.task('libCss:build', function() {
	var res_css_arr = '';
	var res_css_count = pathsLibrary.libcss.libaray.length;
	for(var i_css = 0; res_css_count > i_css; i_css++) { res_css_arr += pathsLibrary.libcss.libaray[i_css] + '.css,'; }
	return gulp.src(res_css_arr.split(','))
		.pipe(concat(pathsLibrary.libcss.cssname + '.min.css'))
		.pipe(csso())
		.pipe(gulp.dest(pathsLibrary.libcss.pay_css));
});

gulp.task('libIe:build', function() {
	var res_ie_arr = '';
	var res_is_count = pathsLibrary.libjs.libIe.length;
	for(var i_ie = 0; res_is_count > i_ie; i_ie++) res_ie_arr += pathsLibrary.libjs.libIe[i_ie] + '.js,';
		return gulp.src(res_ie_arr.split(','))
		.pipe(concat(pathsLibrary.libjs.iename + '.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest(pathsLibrary.libjs.pay_js));
});

Но если сделаем так! То все работает?

gulp.task('libCss:build', function() {
	var res_css_arr = '';
	var res_css_count = pathsLibrary.libcss.libaray.length;
	for(var i_css = 0; res_css_count > i_css; i_css++) { res_css_arr += pathsLibrary.libcss.libaray[i_css] + '.css'; }
	return gulp.src(['source/asstes/libarays/normalize-css/normalize.css','source/asstes/libarays/fancybox/jquery.fancybox.css',])
		.pipe(concat(pathsLibrary.libcss.cssname + '.min.css'))
		.pipe(csso())
		.pipe(gulp.dest(pathsLibrary.libcss.pay_css));
});

gulp.task('libIe:build', function() {
	var res_ie_arr = '';
	var res_is_count = pathsLibrary.libjs.libIe.length;
	for(var i_ie = 0; res_is_count > i_ie; i_ie++) res_ie_arr += pathsLibrary.libjs.libIe[i_ie] + '.js,';
		return gulp.src('source/asstes/libarays/html5shiv/es5-shim.min.js','source/asstes/libarays/html5shiv/html5shiv.min.js','source/asstes/libarays/html5shiv/html5shiv-printshiv.min.js','source/asstes/libarays/respond/respond.min.js')
		.pipe(concat(pathsLibrary.libjs.iename + '.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest(pathsLibrary.libjs.pay_js));
});

А этот работает Мистика какая-то!)

gulp.task('libJs:build', gulp.parallel('libUser:build', 'libCss:build', 'libIe:build'), function() {
	var res_js_arr = '';
	var res_js_count = pathsLibrary.libjs.libaray.length;
	for(var i_js = 0; res_js_count > i_js; i_js++) res_js_arr += pathsLibrary.libjs.libaray[i_js] + '.js,';
		return gulp.src( res_js_arr.split(',') )
		.pipe(concat(pathsLibrary.libjs.jsname + '.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest(pathsLibrary.libjs.pay_js));
});

Что не так? С путями все порядке. Наверное дело все в функций split() ? В старой версии gulp такое у меня прокатывало)
Ошибку выдает такую.

Comments

[RAX7]

Что у вас лежит в pathsLibrary.libcss.libaray? массив строк? зачем вы его конкатите в строку, а затем разбиваете сплитом?

[Nikolay]

RAX7, Да в pathsLibrary.libcss.libaray массив строк. Там прохожу по циклу и добавляю разращение .css или .js.

[Nikolay]

Немного разобрался. Но все равно нуждаюсь в помощи! Не получается исправить ошибку.
Есть такой код (Исправленный).

gulp.task('libCss:build', function(done) {
	var res_css_arr = '';
	var res_css_cou = pathsLibrary.libcss.libaray.length;
	for(var css_i = 0; res_css_cou > css_i; css_i++) { res_css_arr += '\'' + pathsLibrary.libcss.libaray[css_i] + '.css\',' }
		res_css_arr = res_css_arr.split(',', res_css_cou);
		return gulp.src(res_css_arr)
			.pipe(concat(pathsLibrary.libcss.cssname + '.min.css'))
			.pipe(csso())
			.pipe(gulp.dest(pathsLibrary.libcss.pay_css));
		done();
});

На выходе после этапа res_css_arr = res_css_arr.split(',', res_css_cou);
Получаем массив:

[ C:/Users/Admin/screen/ 'source/asstes/libaray/normalize-css/normalize.css', ]

Все не плоха, но не получатся убрать - эту штуку C:/Users/Admin/screen/ она по не понятным своим внутренним соображение откуда-то берется?
А начинается все с переменной var res_css_arr = ''; Не чего не прокатывает чтобы ее избежать) var res_css_arr = null; не так var res_css_arr = {}; Может кто знает как быть?

[RAX7]

Nikolay, странные манипуляции с массивом у вас. Попробуйте использовать map.
Вот кусочек моего конфига:

paths.js

module.exports = {
  src: {
    root: 'src/',
    css:  'src/style/',
    cssEntry: ['style.scss'],
  },
  
  dev: {
    root: 'dist/dev/',
    css:  'dist/dev/css/',
  },
  
  prod: {
    root: 'dist/prod/',
    css:  'dist/prod/css/',
  },
}

styles.js

// Task css
const gulp = require('gulp');
const scss = require('gulp-sass');
const concat = require('gulp-concat');
const cssmin = require('gulp-cssmin');
const autoprefixer = require('gulp-autoprefixer');
const rename = require('gulp-rename');
const connect = require('gulp-connect');
const {src, dev, prod} = require('./paths.js');

const BUILD_TYPE = process.env.NODE_ENV;

let dist, task;
if (BUILD_TYPE === 'dev') {
  dist = dev;
  task = taskDev;
}
else if (BUILD_TYPE === 'prod') {
  dist = prod;
  task = taskProd;
}

function taskDev() {
  const entry = src.cssEntry.map(name => `${src.css}${name}`);
  return gulp.src(entry)
    .pipe(scss().on('error', scss.logError))
    .pipe(concat('style.css'))
    .pipe(gulp.dest(dist.css));
}

function taskProd() {
  const entry = src.cssEntry.map(name => `${src.css}${name}`);
  return gulp.src(entry)
    .pipe(scss().on('error', scss.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(concat('style.css'))
    .pipe(cssmin())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest(dist.css));
}

module.exports = task;

gulpfile.js

//gulp 4

const gulp = require('gulp');
const {src, dev, prod} = require('./gulp/paths');

gulp.task('css', require('./gulp/styles'));

gulp.task('build', gulp.series(gulp.parallel(['webpack', 'img', 'fonts']), ['css', 'html'], (done) => {
  console.log(`==> BUILD: ${process.env.NODE_ENV} <==`);
  done();
}));

gulp.task('serv', gulp.series(['build', 'connect', 'watch', 'reload'], (done) => {
  console.log(`==> SERV: ${process.env.NODE_ENV} <==`);
  done();
}));

gulp.task('default', gulp.series(['build']));

[RAX7]

Nikolay, скиньте что прописано в pathsLibrary, как будет проще понять откуда там что взялось

[Nikolay]

RAX7,

const SOURCE_DIR 			= 'source/'; // main directory source
const SOURCE_PAGES			= [SOURCE_DIR + 'pages/', SOURCE_DIR + 'blocks/**/*'];
const SOURCE_ASSTES 		        = SOURCE_DIR + 'asstes/';
const SOURCE_ASSETS_CATALOG	        = [SOURCE_ASSTES + 'libaray/', SOURCE_ASSTES + 'root/'];
const SOURCE_SCRIPTS		        = [SOURCE_PAGES[1], SOURCE_DIR + 'scripts/'];

const PUBLIC_DIR 			= 'public/';
const PUBLIC_CSS 			= PUBLIC_DIR + 'css/';
const PUBLIC_LIBS 			= PUBLIC_DIR + 'libs/';
const PUBLIC_JS				= PUBLIC_DIR + 'js/';

var pathsLibrary = {

	libcss : {
		cssname : 'libcss',
		libaray : [SOURCE_ASSETS_CATALOG[0] + 'normalize-css/normalize',
			SOURCE_ASSETS_CATALOG[0] + 'magnific-popup/dist/magnific-popup',
			SOURCE_ASSETS_CATALOG[0] + 'bootstrap/bootstrap-grid-3.3.1.min',
			//SOURCE_ASSETS_CATALOG[0] + 'font-awesome-4.2.0/css/font-awesome.min',
			//SOURCE_ASSETS_CATALOG[0] + 'fancybox/jquery.fancybox',
			//SOURCE_ASSETS_CATALOG[0] + 'owl-carousel/owl.carousel',
			//SOURCE_ASSETS_CATALOG[0] + 'countdown/jquery.countdown',
			],
		pay_css :  PUBLIC_LIBS + ''
	},

	libjs : {
		usname  : 'common',
		jsname  : 'libsJs',
		iename  : 'libsIe',
		libUser : [SOURCE_SCRIPTS[0] + '**/*.js', SOURCE_SCRIPTS[1]],
		libaray : [SOURCE_ASSETS_CATALOG[0] + 'jquery/jquery-1.11.2.min',
			//SOURCE_ASSETS_CATALOG[0] + 'magnific-popup/dist/jquery.magnific-popup.min',
			//SOURCE_ASSETS_CATALOG[0] + 'jquery-mousewheel/jquery.mousewheel.min',
			//SOURCE_ASSETS_CATALOG[0] + 'fancybox/jquery.fancybox.pack',
			//SOURCE_ASSETS_CATALOG[0] + 'waypoints/waypoints-1.6.2.min',
			//SOURCE_ASSETS_CATALOG[0] + 'scrollto/jquery.scrollTo.min',
			//SOURCE_ASSETS_CATALOG[0] + 'owl-carousel/owl.carousel.min',
			//SOURCE_ASSETS_CATALOG[0] + 'countdown/jquery.plugin',
			//SOURCE_ASSETS_CATALOG[0] + 'countdown/jquery.countdown.min',
			//SOURCE_ASSETS_CATALOG[0] + 'countdown/jquery.countdown-ru',
			//SOURCE_ASSETS_CATALOG[0] + 'landing-nav/navigation',
			//SOURCE_ASSETS_CATALOG[0] + 'bootstrap-toolkit/bootstrap-toolkit.min',
			//SOURCE_ASSETS_CATALOG[0] + 'maskedinput/jquery.maskedinput.min',
			//SOURCE_ASSETS_CATALOG[0] + 'equalheight/jquery.equalheight',
			//SOURCE_ASSETS_CATALOG[0] + 'stellar/jquery.stellar.min',
		], 									// There is prefix .js
		libIe : [
			SOURCE_ASSETS_CATALOG[0] + 'html5shiv/es5-shim.min',
			SOURCE_ASSETS_CATALOG[0] + 'html5shiv/html5shiv.min',
			SOURCE_ASSETS_CATALOG[0] + 'html5shiv/html5shiv-printshiv.min',
			SOURCE_ASSETS_CATALOG[0] + 'respond/respond.min',
		],
		pay_js : PUBLIC_LIBS + '',
		pay_us : PUBLIC_JS + ''
	}

};

[RAX7]

Nikolay, попробуйте так

gulp.task('libCss:build', function() {
  const res_css_arr = pathsLibrary.libcss.libaray.map(str => `${str}.css`);
  return gulp.src(res_css_arr)
    .pipe(concat(pathsLibrary.libcss.cssname + '.min.css'))
    .pipe(csso())
    .pipe(gulp.dest(pathsLibrary.libcss.pay_css));
});

в res_css_arr будет лежать массив:

[ 'source/asstes/libaray/normalize-css/normalize.css',
  'source/asstes/libaray/magnific-popup/dist/magnific-popup.css',
  'source/asstes/libaray/bootstrap/bootstrap-grid-3.3.1.min.css' ]

[RAX7]

Nikolay, и вместо pathsLibrary.libcss.cssname + '.min.css' используйте gulp-rename
.pipe(rename({suffix: '.min'}))

[Nikolay]

RAX7, Нужный массив получаем, но все равно что-то ему не нравится(

[RAX7]

Nikolay, проверяйте правильность путей, у меня этот таск в холостую отрабатывает

[Nikolay]

RAX7, Да вопрос решен спасибо! Вы правы все дело в путях. А оно работает без цикла?

const res_css_arr = pathsLibrary.libcss.libaray.map(str => `${str}.css`);

[RAX7]

Nikolay, ну если добавите .css к именам файлов, то map не нужен будет.

[Nikolay]

RAX7, Понял) Просто получается что-то наподобие тернарных выражении)