Error by combining CSS - please, help

[burkanov]

Hello, I was trying out gulp-useref according to the tutorial [https://css-tricks.com/gulp-for-beginners/] and got stuck with useref throwing an error when I try to make it to combine 2 CSS files and transfer them from 'app' to 'dist' directory. It works perfectly with JS, but strangely fails with CSS.

Terminal says: Starting 'useref'... events.js:141 throw er; // Unhandled 'error' event"

The demo is on GitHub: https://github.com/burkanov/ll24

Here is my HTML: `

<title></title>

<!-- build:css css/styles.min.js -->
  <link rel="stylesheet" href="css/test.css">
  <link rel="stylesheet" href="css/more.css">
<!-- endbuild -->

hi there ` **And that's Gulp:** `// Reqs var gulp = require('gulp'); var sass = require('gulp-sass'); var browserSync = require('browser-sync').create(); var useref = require('gulp-useref'); var uglify = require('gulp-uglify'); var gulpIf = require('gulp-if'); var cssnano = require('gulp-cssnano'); // Tasks gulp.task('useref', function(){ return gulp.src('app/*_/_.html') .pipe(useref()) .pipe(gulpIf('_.js', uglify())) .pipe(gulpIf('_.css', cssnano())) .pipe(gulp.dest('dist')) }); gulp.task('sass', function() { return gulp.src('app/sass/*.sass') .pipe(sass()) .pipe(gulp.dest('app/css')) .pipe(browserSync.reload({ stream: true })) }); gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: 'dist' }, }); }); gulp.task('watch', ['browserSync', 'sass', 'useref'], function(){ gulp.watch('app/sass/_.sass', ['sass']); gulp.watch('app/js/__/_.js', browserSync.reload); gulp.watch('app/*_/_.html', browserSync.reload); }); ` Will be very thankful if someone could have a look in my issue... Thank you!

[eddiemonge]

test.css is empty. that might explain it

[jonkemp]

The problem is in your css build block.

<!-- build:css css/styles.min.js -->
  <link rel="stylesheet" href="css/test.css">
  <link rel="stylesheet" href="css/more.css">
<!-- endbuild -->

Because you are telling useref to save your css file with a .js extension, gulpif tries to run the css file through uglify-js and fails. Changing the .js extension to a .css extension looks to me like it solves the issue.