Does not work with gulp-autoprefixer and gulp-sourcemaps
- Dominant language
- JavaScript
- Stars
- 700
- Forks
- 89
- PR merge metrics
- No merged PRs in 30d
Description
OS X El Capitan@10.11.1
node@4.2.3
gulp-useref@3.0.0
(For versions info, see this [package.json](https://github.com/medifle/useref-workflow-sample/blob/master/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:
``` bash
├── app
│ ├── index.html
│ ├── scripts
│ │ └── main.js
│ └── styles
│ ├── main.scss
│ └── src
├── gulpfile.babel.js
└── package.json
```
``` js
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'`](https://github.com/medifle/useref-workflow-sample/blob/master/gulpfile.babel.js) 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](https://github.com/medifle/useref-workflow-sample)** with a test HTML file, a gulpfile.babel.js and a package.json included. Feel free to clone and try.
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
``` html
```
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](https://github.com/yeoman/generator-gulp-webapp/blob/master/app/templates/gulpfile.babel.js) 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`
Contributor guide
Assessment
This issue has not been assessed yet.