Yeoman / Grunt not compiling Compass

Has anyone come across an issue using compass with yeoman and grunt where the stylesheets are not being compiled in their build. I’m new at this and trying to really understand whats going on behind the scenes. Any help would be appreciated.

Thanks!

  • gulp-filter filters out all files
  • Javascript build system to handle large objects
  • Installing NodeJS via Maven
  • Gulp fails on uglify() unhandled error event
  • Organization for source code and demos
  • Add generated files with gradle before WAR creation
  •   'use strict';
      var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
      var mountFolder = function (connect, dir) {
        return connect.static(require('path').resolve(dir));
      };
    
      module.exports = function (grunt) {
        // load all grunt tasks
        require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
    
        // configurable paths
        var yeomanConfig = {
          app: 'app',
          dist: 'dist'
        };
    
        try {
          yeomanConfig.app = require('./component.json').appPath || yeomanConfig.app;
        } catch (e) {}
    
        grunt.initConfig({
          yeoman: yeomanConfig,
          watch: {
            coffee: {
              files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
              tasks: ['coffee:dist']
            },
            coffeeTest: {
              files: ['test/spec/{,*/}*.coffee'],
              tasks: ['coffee:test']
            },
            compass: {
              files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
              tasks: ['compass']
            },
            livereload: {
              files: [
                '<%= yeoman.app %>/{,*/}*.html',
                '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
                '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
                'images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
              ],
              tasks: ['livereload']
            }
          },
          connect: {
            options: {
              port: 9000,
              // Change this to '0.0.0.0' to access the server from outside.
              hostname: 'localhost'
            },
            livereload: {
              options: {
                middleware: function (connect) {
                  return [
                    lrSnippet,
                    mountFolder(connect, '.tmp'),
                    mountFolder(connect, yeomanConfig.app)
                  ];
                }
              }
            },
            test: {
              options: {
                middleware: function (connect) {
                  return [
                    mountFolder(connect, '.tmp'),
                    mountFolder(connect, 'test')
                  ];
                }
              }
            }
          },
          open: {
            server: {
              url: 'http://localhost:<%= connect.options.port %>'
            }
          },
          clean: {
            dist: {
              files: [{
                dot: true,
                src: [
                  '.tmp',
                  '<%= yeoman.dist %>/*',
                  '!<%= yeoman.dist %>/.git*'
                ]
              }]
            },
            server: '.tmp'
          },
          jshint: {
            options: {
              jshintrc: '.jshintrc'
            },
            all: [
              'Gruntfile.js',
              '<%= yeoman.app %>/scripts/{,*/}*.js'
            ]
          },
          karma: {
            unit: {
              configFile: 'karma.conf.js',
              singleRun: true
            }
          },
          coffee: {
            dist: {
              files: [{
                expand: true,
                cwd: '<%= yeoman.app %>/scripts',
                src: '{,*/}*.coffee',
                dest: '.tmp/scripts',
                ext: '.js'
              }]
            },
            test: {
              files: [{
                expand: true,
                cwd: 'test/spec',
                src: '{,*/}*.coffee',
                dest: '.tmp/spec',
                ext: '.js'
              }]
            }
          },
          compass: {
            options: {
              sassDir: '<%= yeoman.app %>/styles',
              cssDir: '.tmp/styles',
              imagesDir: 'images',
              javascriptsDir: '<%= yeoman.app %>/scripts',
              fontsDir: '<%= yeoman.app %>/styles/fonts',
              importPath: '<%= yeoman.app %>/components',
              relativeAssets: true
            },
            dist: {},
            server: {
              options: {
                debugInfo: true
              }
            }
          },
          concat: {
            dist: {
              files: {
                '<%= yeoman.dist %>/scripts/scripts.js': [
                  '.tmp/scripts/{,*/}*.js',
                  '<%= yeoman.app %>/scripts/{,*/}*.js'
                ]
              }
            }
          },
          useminPrepare: {
            html: '<%= yeoman.app %>/index.html',
            options: {
              dest: '<%= yeoman.dist %>'
            }
          },
          usemin: {
            html: ['<%= yeoman.dist %>/{,*/}*.html'],
            css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
            options: {
              dirs: ['<%= yeoman.dist %>']
            }
          },
          imagemin: {
            dist: {
              files: [{
                expand: true,
                cwd: '<%= yeoman.app %>/images',
                src: '{,*/}*.{png,jpg,jpeg}',
                dest: '<%= yeoman.dist %>/images'
              }]
            }
          },
          cssmin: {
            dist: {
              files: {
                '<%= yeoman.dist %>/styles/main.css': [
                  '.tmp/styles/{,*/}*.css',
                  '<%= yeoman.app %>/styles/{,*/}*.css'
                ]
              }
            }
          },
          htmlmin: {
            dist: {
              options: {
                /*removeCommentsFromCDATA: true,
                // https://github.com/yeoman/grunt-usemin/issues/44
                //collapseWhitespace: true,
                collapseBooleanAttributes: true,
                removeAttributeQuotes: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeOptionalTags: true*/
              },
              files: [{
                expand: true,
                cwd: '<%= yeoman.app %>',
                src: ['*.html', 'views/*.html'],
                dest: '<%= yeoman.dist %>'
              }]
            }
          },
          cdnify: {
            dist: {
              html: ['<%= yeoman.dist %>/*.html']
            }
          },
          ngmin: {
            dist: {
              files: [{
                expand: true,
                cwd: '<%= yeoman.dist %>/scripts',
                src: '*.js',
                dest: '<%= yeoman.dist %>/scripts'
              }]
            }
          },
          uglify: {
            dist: {
              files: {
                '<%= yeoman.dist %>/scripts/scripts.js': [
                  '<%= yeoman.dist %>/scripts/scripts.js'
                ]
              }
            }
          },
          rev: {
            dist: {
              files: {
                src: [
                  '<%= yeoman.dist %>/scripts/{,*/}*.js',
                  '<%= yeoman.dist %>/styles/{,*/}*.css',
                  'images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
                  '<%= yeoman.dist %>/styles/fonts/*'
                ]
              }
            }
          },
          copy: {
            dist: {
              files: [{
                expand: true,
                dot: true,
                cwd: '<%= yeoman.app %>',
                dest: '<%= yeoman.dist %>',
                src: [
                  '*.{ico,txt}',
                  '.htaccess',
                  'components/**/*',
                  'images/{,*/}*.{gif,webp}',
                  'styles/fonts/*'
                ]
              }]
            }
          }
        });
    
        grunt.renameTask('regarde', 'watch');
    
        grunt.registerTask('server', [
          'clean:server',
          'coffee:dist',
          'compass:server',
          'livereload-start',
          'connect:livereload',
          'open',
          'watch'
        ]);
    
        grunt.registerTask('test', [
          'clean:server',
          'coffee',
          'compass',
          'connect:test',
          'karma'
        ]);
    
        grunt.registerTask('build', [
          'clean:dist',
          // 'jshint',
          // 'test',
          // 'coffee',
          'compass:dist',
          'useminPrepare',
          'imagemin',
          'cssmin',
          'htmlmin',
          'concat',
          'copy',
          // 'cdnify',
          'ngmin',
          'uglify',
          'rev',
          'usemin'
        ]);
    
        grunt.registerTask('default', ['build']);
      };
    

  • Gulp tasks from within other Gulp tasks?
  • generating files with gulp
  • Gulp task to delete empty files
  • Installing NodeJS via Maven
  • Managing JavaScript config files for different build environments (like QA, UAT, Production)
  • Using Grunt.js to Iterate Over Completely Unique but overlapping theme files
  • One Solution collect form web for “Yeoman / Grunt not compiling Compass”

    The solution of the provided github issue:

    I edited the grunt build task and moved 'concat' to before 'imagemin' and now grunt build works properly and main.css is properly generated.