Does not work with gulp-autoprefixer and gulp-sourcemaps

[medifle]

OS X El [email protected] [email protected] [email protected] (For versions info, see this package.json)

TL;DR

I am considering managing all my assets through HTML build blocks. gulp-useref is ideal, taking assets in HTML as a stream that can be piped to other plugins rather than use gulp.src() to define assets path, especially for multiple HTML files.

Here is the major issue I struggled with. See '@ THE ISSUE' in code below:

├── app
│   ├── index.html
│   ├── scripts
│   │   └── main.js
│   └── styles
│       ├── main.scss
│       └── src
├── gulpfile.babel.js
└── package.json

gulp.task('html', () => {
  return gulp.src('app/index.html')

  .pipe($.useref({},

    // after assets in HTML is searched out,
    // transform them before concat
    lazypipe()
    .pipe($.sourcemaps.init)
    .pipe(function() {
      return $.if(/\.scss$/, $.sass({
        precision: 10
      }).on('error', $.sass.logError));
    })

    //# @THE ISSUE
    //# it seems gulp-autoprefixer changed the value of "sources" entry in main.css.map,
    //# which in turn cannot be identified by Chrome.
    .pipe(function() {
      return $.if(/\.css$/, $.autoprefixer());
    })
  ))

  .pipe($.if(/\.css$/, $.sourcemaps.write('.')))

  .pipe($.size({
      title: 'html',
      showFiles: true
    }))
    .pipe(gulp.dest('dist'))
});

I've tested some cases:

• With gulp-autoprefixer as above, main.css.map cannot be identified by Chrome. The value of "source" entry in main.css.map only included main.css. The rest of values seemed to be stripped off by gulp-autoprefixer.
• Without gulp-autoprefixer, gulp-sourcemaps works as expected and Chrome found the sourcemap successfully. The value of "source" entry in main.css.map included all Sass partials in main.scss.
• Only using gulp-useref's noconcat option with gulp-autoprefixer so there was no need to use lazypipe. Sourcemap breaked still. lazypipe might not be the culprit.
• Using gulp.src() to define the same main.scss path and added 'index.html' path in 'html' task without using gulp-useref, and keep the gulp-sass and gulp-autoprefixer code unchanged. gulp-sourcemaps works as expected. The value of "source" entry included all Sass partials in main.scss.
• Having tested JS assets, both gulp-uglify and gulp-sourcemaps worked with gulp-useref. The result was consistent with the one without using gulp-useref.
• Without gulp-useref, gulp-autoprefixer and gulp-sourcemaps works correctly. See the 'styles' task.

Conclusion: gulp-useref seems cannot co-exist with gulp-autoprefixer and gulp-sourcemaps.

Does the stream that gulp-useref emits differ from the one that gulp.src() does?

Details

Here is a reduced test case with a test HTML file, a gulpfile.babel.js and a package.json included. Feel free to clone and try.

The Purpose

To manage all assets, generally including Scss, JS, CSS(from bower), through HTML build blocks. The workflow would be simple and effective, especially for the scenario we have multiple HTML files including different assets. So we do not need to change assets path manually in gulpfile.js for another HTML file including assets different from previous ones.

To manage 'Scss' files directly from HTML, this might be the ideal workflow:

1. put the relative 'Scss' path in HTML, like this

     <!-- build:css styles/main.css -->
     <link rel="stylesheet" href="styles/main.scss">
     <!-- endbuild -->
   

2. allow gulp-useref to analyze 'Scss' assets to be transformed, and use

3. gulp-sass to compile 'Scss' files

4. gulp-autoprefixer to process the vendor prefixes of CSS files

5. gulp-sourcemaps to generate sourmaps.

However the sourcemaps issue is probably at Step 2, 4 or 5.

For now, I use a workaround that yeoman does:

• leaving the Scss files to be handled by 'styles' task and use CSS path in HTML.
• handle JS assets in HTML build blocks by gulp-useref