build:css NOT working #130

imfaisalkh · 2015-08-22T18:51:06Z

I'm using following code in my source HTML file:

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

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

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

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

<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->

</body></html>`

The text was updated successfully, but these errors were encountered:

imfaisalkh · 2015-08-22T18:53:05Z

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}));
});

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');
});
`

jonkemp · 2015-08-23T02:59:35Z

My guess is the link tags in the head each need to be on a new line.

imfaisalkh · 2015-08-23T03:41:36Z

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.

imfaisalkh · 2015-08-23T03:57:04Z

I've updated the original post with contents of my header.html and footer.html, plz take a look.

royscheepens · 2015-09-21T09:41:57Z

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.

TuckerCowie · 2015-11-23T17:45:57Z

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.

ghost · 2015-11-26T07:06:25Z

+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">

boyfunky · 2016-01-05T03:26:01Z

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

DanielPintilei · 2016-01-20T21:59:00Z

@royscheepens 👍

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.

neilhem · 2016-03-07T05:22:29Z

Changing LF to CRLF also helped me on windows.

ibunubi · 2016-12-05T23:03:03Z

<link rel="stylesheet" type="text/css" href="./css/style.css">

remove type="text/css" help me to solve problem like this

philgruneich · 2016-12-20T17:56:17Z

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 :/

Origame · 2017-06-11T12:48:44Z

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

equiman · 2019-04-05T01:15:54Z

+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.

markushausammann · 2019-05-29T20:30:26Z

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');

jonaswitt · 2019-12-03T15:20:40Z

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.

markushausammann mentioned this issue May 31, 2019

gulp-useref only works with CLRF line endings #258

Open

snyk-bot mentioned this issue Mar 23, 2021

[Snyk] Security upgrade gulp-util from 2.2.20 to 3.0.8 dmitriz/gulp-useref#4

Open

snyk-bot mentioned this issue May 30, 2021

[Snyk] Security upgrade gulp-util from 2.2.20 to 3.0.8 dmitriz/gulp-useref#5

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

build:css NOT working #130

build:css NOT working #130

imfaisalkh commented Aug 22, 2015

imfaisalkh commented Aug 22, 2015

jonkemp commented Aug 23, 2015

imfaisalkh commented Aug 23, 2015

imfaisalkh commented Aug 23, 2015

royscheepens commented Sep 21, 2015

TuckerCowie commented Nov 23, 2015

ghost commented Nov 26, 2015

boyfunky commented Jan 5, 2016

DanielPintilei commented Jan 20, 2016

neilhem commented Mar 7, 2016

ibunubi commented Dec 5, 2016

philgruneich commented Dec 20, 2016

Origame commented Jun 11, 2017

equiman commented Apr 5, 2019

markushausammann commented May 29, 2019

jonaswitt commented Dec 3, 2019

build:css NOT working #130

build:css NOT working #130

Comments

imfaisalkh commented Aug 22, 2015

imfaisalkh commented Aug 22, 2015

jonkemp commented Aug 23, 2015

imfaisalkh commented Aug 23, 2015

imfaisalkh commented Aug 23, 2015

royscheepens commented Sep 21, 2015

TuckerCowie commented Nov 23, 2015

ghost commented Nov 26, 2015

boyfunky commented Jan 5, 2016

DanielPintilei commented Jan 20, 2016

neilhem commented Mar 7, 2016

ibunubi commented Dec 5, 2016

philgruneich commented Dec 20, 2016

Origame commented Jun 11, 2017

equiman commented Apr 5, 2019

markushausammann commented May 29, 2019

jonaswitt commented Dec 3, 2019