Grunt,CSSComb和Watch针对所有文件,而不仅仅是新文件

时间:2016-05-03 12:15:52

标签: sass grunt-contrib-watch csscomb

我有csscomb正常运行,它会触发监视,但是有没有办法让csscomb对我正在处理的scss文件运行,而不是在我的项目中运行它们?

这是我的Gruntgile.js。 csscomb设置很奇怪,因为我有两个根文件夹中的sass文件。



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'
  ]);
};
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

使用grunt-newer

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

然后将css任务更改为

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