Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fix Unhandled 'error' event. Broken @import declaration of "A" while using Gulp?

Tags:

node.js

gulp

I've been happily compiling using gulp.js but this afternoon I started getting this error:

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: Broken @import declaration of "A"

My gulpfile.js looks like this:

var gulp = require('gulp'),
    minifyCSS = require('gulp-minify-css'),
    sass = require('gulp-ruby-sass'),
    imagemin = require('gulp-imagemin')
    minifyHTML = require('gulp-minify-html'),
    uglify = require('gulp-uglify'),
    fileinclude = require('gulp-file-include');

gulp.task('sass', function() {
    return sass('node_modules/foundation/scss/') 
    .on('error', function (err) {
      console.error('Error!', err.message);
   })
    .pipe(gulp.dest('publish/css'));
});

gulp.task('image', function(){
    gulp.src('images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('publish/images'));
});

gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./html/'));
});

gulp.task('minify-css', function() {
  gulp.src('publish/css/*.css')
    .pipe(minifyCSS({keepBreaks:false}))
    .pipe(gulp.dest('publish/css'));
});

gulp.task('compress', function() {
  return gulp.src(['./node_modules/foundation/js/foundation/*.js','./node_modules/foundation/js/vendor/*.js'])
    .pipe(uglify())
    .pipe(gulp.dest('publish/js'));
});

gulp.task('minify-html', function() {
  var opts = {
    conditionals: true,
    spare:true
  };

  return gulp.src('./html/*.html')
    .pipe(minifyHTML(opts))
    .pipe(gulp.dest('./publish/'));
});


gulp.task('watch', function(){
    gulp.watch('node_modules/foundation/scss/', ['sass']);
    gulp.watch('publish/css/*', ['minify-css']);
    gulp.watch('publish/images/*', ['image']);
});

gulp.task('alpha', [ 'sass','fileinclude','minify-css','image','compress' ]);

gulp.task('omega', ['minify-html']);

gulp.task('build', ['alpha', 'omega']);

gulp.task('default', ['build']);

I've restarted, tried checking ports for conflicts and Googled this exhaustively.

Can anyone see an obvious issue that could be causing this?

edit: I should add, I'm using the Foundation framework.

like image 914
friendly_llama Avatar asked Apr 24 '15 14:04

friendly_llama


1 Answers

The gulp-minify-css package was the culprit in this for me. I added this parameter to my gulpfile.js file and it fixed it:

processImport: false

For example:

.pipe(plugins.minifyCss({ keepSpecialComments: 1, processImport: false }))
like image 79
Carey Estes Avatar answered Nov 20 '22 14:11

Carey Estes