gulp-useref
gulp-useref copied to clipboard
jonkemp
build:css NOT working
I'm using following code in my source HTML file:
<!-- build:css styles/vendor.css -->
<link rel="stylesheet" href="styles/lib/stylesheet-1.css">
<link rel="stylesheet" href="styles/lib/stylesheet-2.css">
<link rel="stylesheet" href="styles/lib/stylesheet-3.css">
<!-- endbuild -->
But after compiling it is not concatenating, it creates vendor.css file but links to css files remains same instead of pointing to vendor.css, what could be the issue.
On the other hand build:js working just as expected. I'm using Gulp Web App Generator with 1.3.0 version of useref.
UPDATE: My header.html which contains this links to css files is not located in root app folder but it is in app/partials/ folder.
UPDATE#2: On second try it doesn't seems to be subfolder issue either. I tried embedding these links in footer.html file which is located in same app/partials/ folder. But now in this file it's working just fine. What could be the problem with header.html file? I tried stripping this file code to minimum to isolate any issue but in vain.
UPDATE#3: Here are contents of my app/partials/header.html and app/partials/footer.html, <link> and <script> tags work in footer.html but not in header.html.
header.html
`
<head>
<title>pageTitle</title>
<!-- build:css styles/vendor.css -->
<link rel="stylesheet" href="styles/lib/royalslider.css">
<link rel="stylesheet" href="styles/lib/rs-default.css">
<link rel="stylesheet" href="styles/lib/rs-minimal-white.css">
<link rel="stylesheet" href="styles/lib/font-awesome.min.css">
<link rel="stylesheet" href="/bower_components/slidebars/dist/slidebars.css">
<link rel="stylesheet" href="/bower_components/magnific-popup/dist/magnific-popup.css">
<!-- endbuild -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="/bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
`
footer.html
<!-- build:js scripts/plugins.js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/foundation/js/foundation.js"></script>
<script src="/bower_components/superfish/dist/js/superfish.js"></script>
<script src="/bower_components/masonry/dist/masonry.pkgd.js"></script>
<script src="/bower_components/magnific-popup/dist/jquery.magnific-popup.js"></script>
<script src="/bower_components/backgroundCheck/background-check.js"></script>
<script src="/bower_components/imagesloaded/imagesloaded.pkgd.js"></script>
<script src="/bower_components/jquery-validate/dist/jquery.validate.js"></script>
<script src="/bower_components/slidebars/dist/slidebars.js"></script>
<script src="scripts/lib/royalslider.min.js"></script>
<script src="scripts/lib/smoothscroll.js"></script>
<!-- endbuild -->
<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
</body></html>`
Following is my gulp.babel.js file:
` import gulp from 'gulp'; import gulpLoadPlugins from 'gulp-load-plugins'; import browserSync from 'browser-sync'; import del from 'del'; import {stream as wiredep} from 'wiredep';
const $ = gulpLoadPlugins(); const reload = browserSync.reload;
gulp.task('styles', () => { return gulp.src('app/styles/*.scss') .pipe($.plumber()) .pipe($.sourcemaps.init()) .pipe($.sass.sync({ outputStyle: 'expanded', precision: 10, includePaths: ['.'] }).on('error', $.sass.logError)) .pipe($.autoprefixer({browsers: ['last 1 version']})) .pipe($.sourcemaps.write()) .pipe(gulp.dest('.tmp/styles')) .pipe(reload({stream: true})); });
function lint(files, options) { return () => { return gulp.src(files) .pipe(reload({stream: true, once: true})) .pipe($.eslint(options)) .pipe($.eslint.format()) .pipe($.if(!browserSync.active, $.eslint.failAfterError())); }; } const testLintOptions = { env: { mocha: true } };
gulp.task('lint', lint('app/scripts//*.js')); gulp.task('lint:test', lint('test/spec//*.js', testLintOptions));
gulp.task('views', function () { return gulp.src('app/*.html') .pipe($.fileInclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest('.tmp')) .pipe(reload({stream: true})); });
gulp.task('html', ['views', 'styles'], () => { const assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});
return gulp.src(['app/.html', '.tmp/.html']) .pipe(assets) .pipe($.if('.js', $.uglify())) .pipe($.if('.css', $.minifyCss({compatibility: ''}))) .pipe(assets.restore()) .pipe($.useref()) // .pipe($.if('.html', $.minifyHtml({conditionals: true, loose: true}))) .pipe(gulp.dest('dist')); });
gulp.task('images', () => { return gulp.src('app/images/*/') .pipe($.if($.if.isFile, $.cache($.imagemin({ progressive: true, interlaced: true, // don't remove IDs from SVGs, they are often used // as hooks for embedding and styling svgoPlugins: [{cleanupIDs: false}] })) .on('error', function (err) { console.log(err); this.end(); }))) .pipe(gulp.dest('dist/images')); });
gulp.task('fonts', () => { return gulp.src(require('main-bower-files')({ filter: '/*.{eot,svg,ttf,woff,woff2}' }).concat('app/fonts//*')) .pipe(gulp.dest('.tmp/fonts')) .pipe(gulp.dest('dist/fonts')); });
gulp.task('extras', () => { return gulp.src([ 'app/.', '!app/.html', '!app/partials/.html' ], { dot: true }).pipe(gulp.dest('dist')); });
gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
gulp.task('serve', ['views', 'styles', 'fonts'], () => { browserSync({ notify: false, port: 9000, server: { baseDir: ['.tmp', 'app'], routes: { '/bower_components': 'bower_components' } } });
gulp.watch([ 'app/.html', '.tmp/.html', 'app/scripts//*.js', 'app/images//', '.tmp/fonts/__/' ]).on('change', reload);
gulp.watch('app//*.html', ['views']); gulp.watch('app/styles//.scss', ['styles']); gulp.watch('app/fonts/__/', ['fonts']); gulp.watch('bower.json', ['wiredep', 'fonts']); });
gulp.task('serve:dist', () => { browserSync({ notify: false, port: 9000, server: { baseDir: ['dist'] } }); });
gulp.task('serve:test', () => { browserSync({ notify: false, port: 9000, ui: false, server: { baseDir: 'test', routes: { '/bower_components': 'bower_components' } } });
gulp.watch('test/spec//*.js').on('change', reload); gulp.watch('test/spec//*.js', ['lint:test']); });
// inject bower components gulp.task('wiredep', () => { gulp.src('app/styles/*.scss') .pipe(wiredep({ ignorePath: /^(../)+/ })) .pipe(gulp.dest('app/styles'));
gulp.src('app/partials/.html') .pipe(wiredep({ ignorePath: /^(../)../ })) .pipe(gulp.dest('app')); });
gulp.task('build', ['html', 'images', 'fonts', 'extras'], () => { return gulp.src('dist/*/').pipe($.size({title: 'build', gzip: true})); });
gulp.task('default', ['clean'], () => { gulp.start('build'); }); `
Each link is on seperate line in my source code. It is just some formatting issue here. Further, If i paste my script tags from app/partials/footer.html to app/partials/header.html they don't concatnate either. So, it means this issue is not specific to build:css, there is something special about app/partials/header.html which I'm unable to understand. In header.html file even build:css and build:js comments remains same.
I've updated the original post with contents of my header.html and footer.html, plz take a look.
I was having the exact same issue described as above, and found out it was caused by Unix style line endings on my header.html file. Changing header.html to Windows style (CRLF) line endings fixed the issue.
I am also having an issue with this. Using the Node REPL, I was able to manually change my line endings and ensure that the link tags where on new lines. I successfully achieved this once, but cannot achieve it again. I am rendering index.jade into ./.tmp for development purposes, then in my build process, useref grabs the dependencies from the compiled ./.tmp/index.html. All other instances of useref in the same file are working correctly.
Jade
<!-- build:css vendor.css -->
//- bower:css
link(rel='stylesheet', href='../bower_components/animate.css/animate.css')
link(rel='stylesheet', href='../bower_components/jquery-colorbox/example3/colorbox.css')
//- endbower
<!-- endbuild -->
<!-- build:css styles.css -->
//- inject:css
link(rel="stylesheet", href="/styles.css")
//- endinject
<!-- endbuild -->
Rendered HTML (./tmp)
<!-- build:css vendor.css -->
<link rel="stylesheet" href="../bower_components/animate.css/animate.css"/>
<link rel="stylesheet" href="../bower_components/jquery-colorbox/example3/colorbox.css"/><!-- endbuild -->
<!-- build:css styles.css -->
<link rel="stylesheet" href="/styles.css"/><!-- endbuild -->
Notice that Jade doesn't line break the comments here. Any thoughts on this? My thought is to create a pull request to support jade comments so I don't have to compile to read the dependencies.
Final HTML (./dist)
<link rel="stylesheet" href="vendor.css">
Notice that there is an empty line where the styles.css should be included. Also, styles.css is not getting created in ./dist. However, all other dependencies are getting included and created in ./dist.
+1 the link tag was being separated onto two lines by my editor.
bad
<link rel="stylesheet"
href="style.css">
good
<link rel="stylesheet" href="style.css">
i am having the same issue. i created an issue #165 can someone figure out why i am having this issue as well? i cant seem to find a solution
@royscheepens :+1:
I was having the exact same issue described as above, and found out it was caused by Unix style line endings on my header.html file. Changing header.html to Windows style (CRLF) line endings fixed the issue.
Changing LF to CRLF line nedings fixed my problem.
Fixing this would be nice. Atom-beautify changes my endings to LF.
<link rel="stylesheet" type="text/css" href="./css/style.css">
remove type="text/css" help me to solve problem like this
Same, yet the opposite, I'm also using partials, but it concatenates the CSS files from the header.html file and ignores the JS files from the footer.html :/
Same here, setting CRLF to true fixed the issue of an empty CSS file after minification, when Js file was working as expected. command line to do so is : $ git config core.autocrlf true
+1 the link tag was being separated onto two lines by my editor.
bad
<link rel="stylesheet" href="style.css">good
<link rel="stylesheet" href="style.css">
That's really annoying and hard to see. It' will be considered as a bug.
It's strange that nobody has addressed this issue. This is clearly a bug in gulp-useref. The plugin should be able to deal with any kind of line ending. Also strange that nobody has suggested a workaround for the actual gulp pipeline, as if automated deployments would have room for people to go manually change line endings.
Here's my workaround as long as the bug in this package isn't fixed:
gulp.task('line-ending-fixer', function () {
return gulp
.src([
paths.src.html.files,
paths.src.tmp.files,
paths.src.partials.files
])
.pipe(lec({eolc: 'CRLF'}))
.pipe(gulp.dest(paths.src.base.dir));
});
Where const lec = require('gulp-line-ending-corrector');
The workaround provided by @markushausammann was extremely helpful to me. Thank you! 👏
I built a website using a template (https://landkit.goodthemes.co) where the template's authors apparently used an unfortunate combination of gulp plugins. It took me quite a while to figure out that LF line ending files were the cause of the issue.
I debugged around https://github.com/jonkemp/useref/blob/master/lib/transformReferences.js#L11 and my best guess is that a pipeline step before gulp-useref was producing mixed-line-ending output (suspect: https://github.com/haoxins/gulp-file-include). That is tripping up the relatively simple line ending logic in transformReferences.js.
As a result of that, even
.pipe(lec({eolc: 'LF'}))
will work, if you prefer that. It just needs to be a consistent line ending.
