Обработка наборов файлов в Gulp

Какое-то время думал, как лучше назвать этот пост, но ничего лучше в голову так и не пришло. Столкнулся с некоторым неудобством при работе с Gulp. В некоторых проектах мне необходимо получить несколько разных файлов из разных наборов файлов (и да, я слышал про WebPack и даже его использую, но не в старых проектах). И как же быть в такой ситуации, писать для каждого набора файлов свою обработку или есть способ лучше?

Чтобы было понятно, что я имею ввиду, распишу немного подробнее. Например, для проекта у нас может быть простой набор JS файлов для главной (включает в себя минифицированные и объединенные jquery.js и jquery.form.js) и другой набор JS файлов, для галереи (включает в себя минифицированные и объединенные jquery.js, jquery.form.js, jquery.gallery.js). Конечно, можно не заморачиваться и слить все в один большой файл и использовать его на всех страницах. Но, это не наш путь, так как на больших проектах этот файл может раздуваться до огромных размеров. Ну и отдавать лишний контент пользователям, особенно в эру мобильного интернета, это моветон.

Написав пару раз один и тот же код для разных наборов, вспомнив про DRY принцип, решил эту досадное неудобство устранить. Думаю, тем, кто еще пока остался на gulp оно точно пригодится. Идея простая, мы создаем объект, в котором в виде названий свойств используем название файла, в который все хотим слить, если быть точнее сконкатенировать. После чего пробегаемся по свойствам этого объекта и применяем к набору цепочку инструкций:

var inScripts = {
	'main' : ['js/jquey.js', 'js/jquery.form.js'],
	'gallery' : ['js/jquey.js', 'js/jquery.form.js', 'js/jquery.gallery.js']
};

Object.keys(inScripts).forEach(function(key) {
	gulp.src(inScripts[key])
		.pipe(jshint())
		.pipe(jshint.reporter('default'))
		.pipe(concat(key+'.min.js'))
		.pipe(jsmin().on('error', function(e) {console.log(e);}))
		.pipe(gulp.dest('_min/'));
});

Небольшие пояснения по коду. В объекте inScripts мы создали тот набор, о котором говорили, со свойствами main и gallery. В виде значения свойств используем массивы, в которых храним наборы нужных нам файлов. После чего проходим по этому объекту через метод forEach внутри каждой итерации применяя нужный нам набор. На выходе в папке _min/ мы получим два файла main.js и gallery.js.

Интересно, что в массиве можно использовать подстановочные (wildcard) символы доступные в Gulp, например, мы хотим добавить в файл все polyfills, которые лежат у нас в отдельной папке, для этого достаточно будет указать: ['js/polyfills/*', 'js/jquey.js', 'js/jquery.form.js'] и все, мы автоматически добавим все файлы из папки в обработку. На этом все :)