Watch crashes on compass with interrupt option

[Anahkiasen]

When I use the interrup option on grunt-contrib-watch it oftens crashes on Compass giving the following error :

/usr/local/node_modules/grunt-contrib-compass/node_modules/tmp/lib/tmp.js:261
  throw err;
        ^
RangeError: Maximum call stack size exceeded

Any idea where it might comes from ?

[sindresorhus]

// @shama

[shama]

@Anahkiasen Could you post your Gruntfile? and node.js version?

[Anahkiasen]

➜  Sites  node --version
v0.10.22
➜  Sites  grunt --version
grunt-cli v0.1.11

module.exports = function(grunt) {

  // Load modules
  grunt.loadNpmTasks('grunt-bower-task');
  grunt.loadNpmTasks('grunt-concat-sourcemap');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-csslint');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-phpunit');

  // Project configuration.
  grunt.initConfig({

    //////////////////////////////////////////////////////////////////
    /////////////////////////////// PATHS ////////////////////////////
    //////////////////////////////////////////////////////////////////

    app        : 'public/app',
    builds     : 'public/builds',
    components : 'public/components',

    paths: {
      original: {
        css  : '<%= app %>/css',
        js   : '<%= app %>/js',
        sass : '<%= app %>/sass',
        img  : '<%= app %>/img',
      },
      compiled: {
        css : '<%= builds %>/css',
        js  : '<%= builds %>/js',
        img : '<%= builds %>/img',
      },
    },

    //////////////////////////////////////////////////////////////////
    /////////////////////////////// TASKS ////////////////////////////
    //////////////////////////////////////////////////////////////////

    // Development
    //////////////////////////////////////////////////////////////////

    phpunit: {
      options: {
        followOutput: true,
        stopOnFailure: grunt.option('sof') === true,
      },

      core: {
        options: {
          excludeGroup: 'Routes',
        }
      },
      coverage: {
        options: {
          excludeGroup: 'Routes',
          coverageText: 'app/tests/_coverage.txt',
          coverageHtml: 'app/tests/_coverage'
        }
      },
      all: {
      },
    },

    watch: {
      options: {
        livereload : true,
        interrupt  : true,
      },

      grunt: {
        files: 'Gruntfile.js',
        tasks: 'default',
      },
      scripts: {
        files: '<%= paths.original.js %>/**/*',
        tasks: 'js',
      },
      stylesheets: {
        files: '<%= paths.original.sass %>/**/*',
        tasks: 'css',
      },
      phpunit: {
        files: 'app/**/*.php',
        tasks: 'phpunit:core',
      },
    },

    clean: ['<%= builds %>'],

    // Assets
    //////////////////////////////////////////////////////////////////

    bower: {
      install: {
        options: {
          targetDir: '<%= components %>'
        }
      }
    },

    concat_sourcemap: {
      options: {
        sourcesContent: true
      },

      stylesheets: {
        files: {
          '<%= paths.compiled.css %>/styles.css': [
            '<%= components %>/bootstrap/dist/css/bootstrap.min.css',
            '<%= paths.original.css %>/*'
          ],
        },
      },
      javascript: {
        files: {
          '<%= paths.compiled.js %>/scripts.js': [
            '<%= components %>/jquery/jquery.min.js',
            '<%= components %>/bootstrap/js/transition.js',
            '<%= components %>/bootstrap/js/modal.js',
            '<%= components %>/bootstrap/js/dropdown.js',
            '<%= components %>/bootstrap/js/tooltip.js',
            '<%= components %>/bootstrap/js/popover.js',
            '<%= components %>/jquery.uniform/jquery.uniform.min.js',
            '<%= components %>/lodash/dist/lodash.underscore.min.js',
            '<%= components %>/backbone/backbone-min.js',

            '<%= paths.original.js %>/components/*.js',

            '<%= paths.original.js %>/Application.js',
            '<%= paths.original.js %>/**/*.js',
            '<%= paths.original.js %>/app.js',
          ],
        },
      }
    },

    copy: {
      dist: {
        files: [
          {
            expand : true,
            src    : ['**'],
            cwd    : '<%= components %>/bootstrap/dist/fonts',
            dest   : '<%= builds %>/fonts/'
          },
          {
            expand : true,
            src    : ['**'],
            cwd    : '<%= paths.original.img %>',
            dest   : '<%= paths.compiled.img %>'
          }
        ]
      }
    },

    cssmin: {
      minify: {
        expand : true,
        cwd    : '<%= paths.compiled.css %>',
        src    : '*.css',
        dest   : '<%= paths.compiled.css %>',
        ext    : '.min.css'
      }
    },

    uglify: {
      dest: {
        files: [{
          expand : true,
          cwd    : '<%= paths.compiled.js %>',
          src    : ['*.js'],
          dest   : '<%= paths.compiled.js %>',
          ext    : '.min.js',
        }],
      }
    },

    // Linting
    //////////////////////////////////////////////////////////////////

    csslint: {
      dist: {
        options: {
          'adjoining-classes'          : false,
          'unique-headings'            : false,
          'qualified-headings'         : false,
          'star-property-hack'         : false,
          'floats'                     : false,
          'display-property-grouping'  : false,
          'duplicate-properties'       : false,
          'text-indent'                : false,
          'known-properties'           : false,
          'font-sizes'                 : false,
          'box-model'                  : false,
          'gradients'                  : false,
          'box-sizing'                 : false,
          'compatible-vendor-prefixes' : false,
        },
        src: ['<%= paths.original.css %>/*']
      },
    },

    jshint: {
      options: {
        force   : true,

        boss    : true,
        browser : true,
        bitwise : true,
        curly   : true,
        devel   : true,
        eqeqeq  : true,
        eqnull  : true,
        immed   : true,
        indent  : 2,
        latedef : true,
        newcap  : true,
        noarg   : true,
        noempty : true,
        sub     : true,
        undef   : true,
        unused  : true,
        predef  : [
          "openModal",
        ],
        globals : {
          $           : false,
          _           : true,
          app         : true,
          Application : true,
          Backbone    : false,
          jQuery      : true,
        }
      },

      all: ['<%= paths.original.js %>/*'],
    },

    // Preprocessors
    //////////////////////////////////////////////////////////////////

    compass: {
      options: {
        appDir             : "public/app/",
        cssDir             : "css",
        generatedImagesDir : "img/sprite/generated",
        imagesDir          : "img",
        outputStyle        : 'nested',
        noLineComments     : true,
        relativeAssets     : true,
        require            : ['susy', 'sassy-strings'],
      },

      clean: {
        options: {
          clean: true,
        }
      },
      compile: {},
    }

  });

  ////////////////////////////////////////////////////////////////////
  /////////////////////////////// COMMANDS ///////////////////////////
  ////////////////////////////////////////////////////////////////////

  grunt.registerTask('default', 'Build assets for local', [
    'css', 'js',
    'copy',
  ]);

  grunt.registerTask('production', 'Build assets for production', [
    'copy',
    'concat_sourcemap',
    'minify',
  ]);

  grunt.registerTask('rebuild', 'Build assets from scratch', [
    'compass',
    'clean',
    'default',
  ]);

  // Flow
  ////////////////////////////////////////////////////////////////////

  grunt.registerTask('minify', 'Minify assets', [
    'cssmin',
    'uglify',
  ]);

  // By filetype
  ////////////////////////////////////////////////////////////////////

  grunt.registerTask('js', 'Build scripts', [
    'jshint',
    'concat_sourcemap:javascript',
  ]);

  grunt.registerTask('css', 'Build stylesheets', [
    'compass:compile',
    'csslint',
    'concat_sourcemap:stylesheets'
  ]);
};

[shama]

Hmm sorry no idea. My guess is there is some kind of race condition tmp doesn't like.

[Anahkiasen]

Is it something to fix on my end or ?

[shama]

@Anahkiasen I would suggest not using the interrupt watch option with the compass task until this can be looked into further.