gulp-merge не может вывести gulp-main-bower-files после.pipe
У меня есть задача сборки CSS, которая объединяет ресурсы из зависимостей bower и моего собственного css.
Задача сборки является частью проекта, который использует управление исходным кодом git. Проект работает правильно уже более года.
До вчерашнего дня все работало правильно на моем ноутбуке с Windows, когда я переустанавливал свои npm-зависимости, которые запускали задачу сборки.
Ниже приведен упрощенный пример
gulpfile.js
var gulp = require('gulp'),
$ = require('gulp-load-plugins')();
gulp.task('default', function () {
return $.merge (
gulp.src('./bower.json')
.pipe($.mainBowerFiles('**/*.css', {
includeDev: 'exclusive',
group: 'css'
})
),
gulp.src(['./source/css/styles.css'])
)
.pipe($.plumber())
.pipe($.concat('stylesheet.css'))
.pipe(gulp.dest('./build/css'))
});
package.json
{
"name": "merge",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-load-plugins": "^1.5.0",
"gulp-main-bower-files": "^1.6.2",
"gulp-merge": "^0.1.1",
"gulp-plumber": "^1.1.0",
}
}
И bower.json
{
"name": "merge",
"description": "",
"main": "gulpfile.js",
"authors": [
""
],
"license": "ISC",
"homepage": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"devDependencies": {
"normalize-css": "^7.0.0",
"reset-css": "^2.2.1"
},
"group": {
"css": [
"reset-css",
"normalize-css"
]
}
}
До вчерашнего дня задача объединит оба источника, заявленные в $.merge(...)
, С вчерашнего дня npm install
Я обнаружил, что слияние будет выводить результат только для первого объявленного источника.
После некоторого тестирования я обнаружил, что если я переверну порядок источников слияния, то оба источника будут объединены с заданным назначением вывода.
var gulp = require('gulp'),
$ = require('gulp-load-plugins')();
// the order of the sources has been reversed
gulp.task('default', function () {
return $.merge (
gulp.src(['./source/css/styles.css']),
gulp.src('./bower.json')
.pipe($.mainBowerFiles('**/*.css', {
includeDev: 'exclusive',
group: 'css'
})
)
)
.pipe($.plumber())
.pipe($.concat('stylesheet.css'))
.pipe(gulp.dest('./build/css'))
});
Проблема этого решения заключается в том, что выходной контент перевернут, что может вызвать проблемы с наследованием стилей и т. Д. Это изменение в успешном выводе заставляет меня думать, что может быть проблема с тем, как и где .pipe($.mainBowerFiles(...)
объявлен
Я также попытался заменить установленные модули для gulp-merge и gulp-main-bower-files соответственно на merge2 и main-bower-files. Использование одного или обоих решений решило проблему, однако это не идеальный обходной путь, поскольку это означает обновление задачи gulp и установленных модулей.
Эта внезапная ошибка вывода задач слияния css (или js) в моем проекте имеет реальные проблемы для любого исторического коммита или ветки в проекте.
Могу ли я диагностировать неисправность оригинала? $.merge(...)
или способ, которым я могу задним числом заменить gulp-merge на merge2 для всех коммитов моего проекта git и любых веток?