adding the UNCSS task in my gulpfile.js

[carmolim]

Hello, I'm starting to use the foundationpress, and I have no experience with Gulp.
I'm finishing my first site using it and I want to run uncss to get a smaller css file.

I added this task:

gulp.task('uncss', function() {
  return gulp.src('assets/stylesheets/foundation.css')
    .pipe(uncss({
      html: [
          'http://192.168.1.90/e-leeze/',
          'http://192.168.1.90/e-leeze/saude',
          'http://192.168.1.90/e-leeze/arquivo',
          'http://192.168.1.90/e-leeze/mais-visualizadas/'
      ]
    }))
    .pipe(gulp.dest('assets/stylesheets'));
});

changed the build task:

// Build task
// Runs copy then runs sass & javascript in parallel
gulp.task('build', ['clean'], function(done) {
  sequence('copy',
          ['sass', 'uncss', 'javascript', 'lint'],
          done);
});

than I changed the watch function:

  // Sass Watch
  gulp.watch(['assets/scss/**/*.scss'], ['clean:css', 'sass', 'uncss'])
    .on('change', function(event) {
      logFileChange(event);
    });

when I run npm run watch it run ok, but when I change some scss file it crashes generating this error:

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: ENOENT: no such file or directory, open '/Applications/MAMP/htdocs/e-leeze/wp-content/themes/eleeze/assets/stylesheets/foundation.css'
    at Error (native)
npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "watch"
npm ERR! node v4.2.6
npm ERR! npm  v2.14.12
npm ERR! code ELIFECYCLE
npm ERR! [email protected] watch: `gulp`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] watch script 'gulp'.
npm ERR! This is most likely a problem with the foundationpress package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp
npm ERR! You can get their info via:
npm ERR!     npm owner ls foundationpress
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR!     /Applications/MAMP/htdocs/e-leeze/wp-content/themes/eleeze/npm-debug.log

but I can't see the file /Applications/MAMP/htdocs/e-leeze/wp-content/themes/eleeze/npm-debug.log

Someone could help me?

Thanks!

[colin-marshall]

You would want to make the sass task a dependency of uncss so that uncss runs after the Sass task is complete. I belive you are getting that error because the sass task has not completed compilation of the CSS file.

gulp.task('uncss', ['sass'], function() {
  return gulp.src('assets/stylesheets/foundation.css')
    .pipe(uncss({
      html: [
          'http://192.168.1.90/e-leeze/',
          'http://192.168.1.90/e-leeze/saude',
          'http://192.168.1.90/e-leeze/arquivo',
          'http://192.168.1.90/e-leeze/mais-visualizadas/'
      ]
    }))
    .pipe(gulp.dest('assets/stylesheets'));
});

After you change that, get rid of the sass task from the watch task and the build task and you should be good to. The sass task will run prior to every call of the uncss task so you don't need to call the sass task anymore.

[carmolim]

thanks @colin-marshall !

my task now looks like this:

gulp.task('uncss', ['sass'], function() {
  // Minify CSS if run wtih --production flag
  var minifycss = $.if(isProduction, $.minifyCss());
  var uncss = $.if(isProduction, $.uncss({
    html: [
        'http:\/\/192.168.1.90\/e-leeze\/',
        'http:\/\/192.168.1.90\/e-leeze\/saude\/',
        'http:\/\/192.168.1.90\/e-leeze\/mais-visualizadas\/',
        'http:\/\/192.168.1.90\/e-leeze\/bem-estar\/post-4\/',
    ]
  }));

  return gulp.src('assets/stylesheets/foundation.css')
    .pipe(uncss)
    .pipe(minifycss)
    .pipe(gulp.dest('assets/stylesheets'));
});

[colin-marshall]

Nice, did that work for you?

[carmolim]

It is working, I don't know if is the best solution. There is a better way to skip this from the watch when I'm not using the flag --production?

[colin-marshall]

You could probably combine the uncss task into the Sass task, but I wouldn't necessarily say it's a better approach. Just a different way of accomplishing the same thing.

On a side note you should look at the Foundation Zurb Template's gulpfile. It has some ignore rules for uncss that you should add so that classes that are added to the page after pageload are not removed from your CSS.

https://github.com/zurb/foundation-zurb-template/blob/b3326dd41afd390d47c31590ab3aa4c69897fd17/gulpfile.js#L107-L110

[carmolim]

I'll take a look on this!
Thanks!

[olefredrik]

I have discovered a ton of errors using uncss. I'm not saying that it is useless in all cases, but be aware that in some cases it can remove styling that you actually need. My approach is to comment out styling associated with the components that I do not use.

But having said that, was your problem solved? Can we close this issue?

[carmolim]

Thanks for the alert @olefredrik, I will use it with caution. And you can close the issue.