jonkemp / jonkemp/gulp-useref

Does not work with gulp-autoprefixer and gulp-sourcemaps

Open
#159 0 comments 1 reaction 0 assignees View on GitHub
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.


## 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

``` 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.