Search code examples
sassgrunt-contrib-watchcsscomb

Grunt, CSSComb and watch runing against all files, not just new


I have csscomb running fine, and it triggers with watch, but is there a way to only have csscomb run against the scss file i'm working on, rather than all of them within my project?

Here's my Gruntgile.js. The csscomb set up is odd since i have my sass files in two root folders.

module.exports = function (grunt) {
  'use strict';

  // load grunts tasks automatically
  require('load-grunt-tasks')(grunt);

  grunt.initConfig({
    pkg: this.file.readJSON('package.json'),

    info: {
      sourceDir: '.',
      stylesDir: '<%= info.sourceDir %>/styles',
      images: '<%= info.sourceDir %>/images',
      fonts: '<%= info.sourceDir %>/fonts',
      scripts: '<%= info.uiDir %>/scripts',
      svgDir: '<%= info.sourceDir %>/svg',
      configFiles: '<%= info.sourceDir%>/configFiles',

      sourceSass: '<%= info.src %>/<%= info.stylesDir %>',
      sourceImages: '<%= info.sourceDir%>/<%= info.images %>',
      sourceScripts: '<%= info.sourceDir%>/<%= info.scripts %>',
      sourceSVG: '<%= info.sourceDir%>/<%= info.svgDir %>',

      bowerDir: '<%= info.ui %>/bower_components'
    },
    clean: {
      options: {
        force: true
      },
      css: [
        '<%= info.sourceDir %>/*.css'
      ],
      js: [
        '<%= info.sourceDir %>/*.js',
        '<%= info.sourceDir %>/scripts/main.min.js'
      ],
      icons: [
        '<%= info.sourceDir %>/icons/'
      ]
    },
    grunticon: {
      all: {
        options: {
          enhanceSVG: true
        },
        files: [{
          expand: true,
          cwd: '<%= info.sourceSVG %>',
          src: ['*.svg', '*.png'],
          dest: "<%= info.ui %>/icons"
        }],
      }
    },
    compass: {
      options: {
        config: '<%= info.configFiles %>/config.rb'        
      },
      dev: {
        options: {
          sourcemap: true,
          environment: 'development',
          outputStyle: 'expanded'
        }
      },
      prod: {
        options: {
          environment: 'production',
          noLineComments: true,
          outputStyle: 'compressed'
        }
      }
    },
    csscomb: {
      options:{
        config: '<%= info.configFiles %>/.csscomb.json'
      },
      components:{
        expand: true,
        cwd: './components/',
        src: ['**/*.scss'],
        dest: './components/'
      },
      styles: {
        expand: true,
        cwd: '<%= info.stylesDir %>',
        src: ['**/*.scss'],
        dest: '<%= info.stylesDir %>'
      }      
    },
    uglify: {
      dev: {
        options: {
          sourceMap: true,
          sourceMapName: 'sourceMap.map',
          mangle: false,
          beautify: true,
          preserveComments: 'all',
          quoteStyle: 3
        },
        src: [
          'bower_components/foundation/js/vendor/fastclick.js',
          'bower_components/foundation/js/foundation.min.js',
          'scripts/global.js',
          'components/**/*.js'
          ],
        dest: 'scripts/main.min.js'

      },
      prod: {

      }
    },
    jshint: {
      options: {
        force: true,
        jshintrc: '<%= info.configFiles %>/.jshintrc'
      },
      all: [
        '<%= info.sourceDir %>/components/**/*.js',
        '<%= info.sourceDir %>/scripts/**/*.js',
        '!<%= info.sourceDir %>/scripts/modernizr*.js',
        '!<%= info.sourceDir %>/scripts/main.min.js'

      ]
    },
    jsbeautifier: {
      options: {
        config: '<%= info.configFiles %>/.jsbeautifyrc'
      },
      all: {
        src: [
          
          '<%= info.sourceDir %>/components/**/*.js'
        ]
      }
    },
    watch: {
      sass: {
        files: [
          'styles/**/*.scss',
          'components/**/*.scss'
        ],
        tasks: ['css']
      },
      js: {
        files: [
          '<%= info.sourceDir %>/components/**/*.js',
          '!<%= info.sourceDir %>/scripts/**/*.js'
        ],
        tasks: ['js']
      }

    }

  });

  grunt.registerTask('css', [
    'csscomb',
    'compass:dev'

  ]);
  grunt.registerTask('js', [
    'jsbeautifier:all',
    'jshint:all',
    'uglify:dev'
  ]);
  grunt.registerTask('jsDev', [
    'uglify:dev'
  ]);
  grunt.registerTask('src', [
    'grunticon',
    'css',
    'js'
  ]);
  grunt.registerTask('dev', [
    'clean:css',
    'clean:icons',
    'src',
    'watch'
  ]);
};


Solution

  • Use grunt-newer

    https://github.com/tschaub/grunt-newer

    Then change your css task to

    grunt.registerTask('css', [
       'newer:csscomb',
       'compass:dev'
    ]);