grunt continues to the next task before finishing sass task

Question

this is my grunt file:

'use strict';

var path = require('path');

module.exports = function (grunt) {

  require('load-grunt-tasks')(grunt);

  require('time-grunt')(grunt);
  console.log(path.basename());
  grunt.initConfig({
      yeoman: {
          app: require('./bower.json').appPath || 'app',
          build: 'dist',
          name: require('./bower.json').name
      },
      html2js: {
          options: {
              module: '<%= yeoman.name %>-templates',
              base: 'app'
          },
          main: {
              src: ['<%= yeoman.app %>/**/*.tpl.html'],
              dest: '<%= yeoman.build %>/templates.js'
          }
      },
      sass: {
          dist: {
              src: '<%= yeoman.build %>/<%= yeoman.name %>.scss',
              dest: '<%= yeoman.build %>/<%= yeoman.name %>.css'
          }
      },
      imageEmbed: {
          dist: {
              files: [{
                  expand: true,
                  cwd: '<%= yeoman.app %>/styles/',
                  src: ['*.{scss,css}'],
                  dest: '.tmp/'
              }]
          }
      },
      cssmin: {
          dist: {
              src: '<%= yeoman.build %>/<%= yeoman.name %>.css',
              dest: '<%= yeoman.build %>/<%= yeoman.name %>.min.css'
          }
      },
      concat: {
          css: {
              src: ['.tmp/**/*.scss', '.tmp/**/*.css'],
              dest: '<%= yeoman.build %>/<%= yeoman.name %>.scss'
          },
          js: {
              src: ['<%= yeoman.build %>/templates.js', '<%= yeoman.app     %>/scripts/app.js', '<%= yeoman.app %>/scripts/**/*.js'],
              dest: '<%= yeoman.build %>/<%= yeoman.name %>.js'
          }
      },
      uglify: {
          complete: {
              src: '<%= yeoman.build %>/<%= yeoman.name %>.js',
              dest: '<%= yeoman.build %>/<%= yeoman.name %>.min.js'
          }
      },
      karma: {
          options: {
              configFile: 'karma.conf.js'
          },
          unit: {
              singleRun: true
          }
      }
  });


  grunt.registerTask('build', [
      'html2js',
      'imageEmbed',
      'concat:css',
      'sass',
      'cssmin'
      'concat:js',
      'uglify',
  ]);
  grunt.registerTask('test', [
      'karma:unit'
  ]);
};

When running grunt build, I get the following error:

Running "sass:dist" (sass) task

Running "cssmin:dist" (cssmin) task

Destination not written because minified CSS was empty.

When I run every task separately, there is no error. I think the sass task is not finished before the next task starts. Does anyone knows why this is happening?

Thank you.

Answer 1

This is likely due to the sass task being run asynchronously, I've encountered similar problems with livereload.

Try something like this and register it between the two tasks:

  grunt.registerTask('wait', function () {
    grunt.log.ok('Waiting for server reload...');
    var done = this.async();
    setTimeout(function () {
      grunt.log.writeln('Done waiting!');
      done();
    }, 1500);
  });

http://gruntjs.com/api/inside-tasks