OS X El Capitan@10.11.1
node@4.2.3
gulp-useref@3.0.0
(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:
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:
OS X El Capitan@10.11.1 node@4.2.3 gulp-useref@3.0.0 (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:
I've tested some cases:
gulp-autoprefixer
as above,main.css.map
cannot be identified by Chrome. The value of"source"
entry inmain.css.map
only includedmain.css
. The rest of values seemed to be stripped off bygulp-autoprefixer
.gulp-autoprefixer
,gulp-sourcemaps
works as expected and Chrome found the sourcemap successfully. The value of"source"
entry inmain.css.map
included all Sass partials in main.scss.gulp-useref
'snoconcat
option withgulp-autoprefixer
so there was no need to uselazypipe
. Sourcemap breaked still.lazypipe
might not be the culprit.main.scss
path and added 'index.html' path in'html'
task without usinggulp-useref
, and keep thegulp-sass
andgulp-autoprefixer
code unchanged.gulp-sourcemaps
works as expected. The value of"source"
entry included all Sass partials inmain.scss
.JS
assets, bothgulp-uglify
andgulp-sourcemaps
worked withgulp-useref
. The result was consistent with the one without usinggulp-useref
.gulp-useref
,gulp-autoprefixer
andgulp-sourcemaps
works correctly. See the'styles'
task.Conclusion:
gulp-useref
seems cannot co-exist withgulp-autoprefixer
andgulp-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 ingulpfile.js
for another HTML file including assets different from previous ones.To manage 'Scss' files directly from HTML, this might be the ideal workflow:
put the relative 'Scss' path in HTML, like this
gulp-useref
to analyze 'Scss' assets to be transformed, and usegulp-sass
to compile 'Scss' filesgulp-autoprefixer
to process the vendor prefixes ofCSS
filesgulp-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:
Scss
files to be handled by'styles'
task and use CSS path in HTML.JS
assets in HTML build blocks bygulp-useref