gulp-merge fails to output gulp-main-bower-files after .pipe

54 views Asked by At

I have a css build task that merges resources from bower dependencies and my own css.

The build task is part of project that uses git source control. The project has been running correctly for well over a year.

Up until yesterday, everything was working correctly on my windows laptop, when I reinstalled my npm dependencies that run the build task.

Below is a simplified example

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",
  }
}

And 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"
    ]
  }
}

Prior to yesterday the task would merge both sources declared in $.merge(...). Since yesterdays' npm install I am finding that the merge will only output the result for the first declared source.

After some testing I have found that if I reverse the order of the merge sources than both sources are merged to the set output destination.

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'))
});

The problem with this solution is that that output content reversed, which may cause issues with style inheritance etc. This change to a successful output makes me think there may be an issue with how and where .pipe($.mainBowerFiles(...) is declared.

I've also tried replacing installed modules for gulp-merge and gulp-main-bower-files respectively with merge2 and main-bower-files. Using either one or both solved the problem, however this isn't an ideal workaround as it means an update to the gulp task and installed modules.

This sudden failure to output tasks merge css ( or js ) in my project has real issues for any historic commit or branch in the project.

Is there away I can diagnose the failure of the original $.merge(...), or a way that I can retroactively replace gulp-merge with merge2 across all commits my git project and any branches?

0

There are 0 answers