Компас-плагин с Grunt

Question

Это вопрос о том, как использовать Compass with Grunt. Что-то не так на этапе заполнения данных. Я заметил на консоли, что, когда я изменяю только файл .scss, компас заполняет один и тот же файл несколько раз (четыре, пять или десять). На ваш взгляд, на что это зависит? Вот мой gruntfile.js. Благодарим вас за помощь.

module.exports = function (grunt) { 

var _homeJs = ['contents/js/jquery.Cinema.js', 'contents/js/jquery.SkinOverlay.js']; 
var _homeJsExclude = [] 

_homeJs.forEach(function (entry) { 
    _homeJsExclude.push('!' + entry) 
}); 


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

    concat: { 
     dist: { 
      src: ['contents/js/*.js', _homeJsExclude], 
      dest: 'contents/dist/js/global.js' 
     }, 
     lib: { 
      src: 'contents/plugins/**/*.js', 
      dest: 'contents/dist/js/libs.js' 
     }, 
     globalhome: { 
      files: { 
       'contents/dist/js/global.home.js': _homeJs 
      } 
     } 
    }, 
    uglify: { 
     dist: { 
      src: ['<%= concat.dist.dest %>'], 
      dest: 'contents/dist/js/global.min.js' 
     }, 
     globalhome_min: { 
      src: 'contents/dist/js/global.home.js', 
      dest: 'contents/dist/js/global.home.min.js' 
     }, 
     lib: { 
      src: ['<%= concat.lib.dest %>'], 
      dest: 'contents/dist/js/libs.min.js' 
     } 
    }, 
    compass: { 
     dist: { 
      options: { 
       sassDir: 'contents/sass/', 
       cssDir: 'contents/dist/css', 
       watch: true, 
       outputStyle: 'compressed', 
       linecomments: false 
      } 
     } 
    }, 
    cssmin: { 
     target: { 
      files: [ 
       { 
        './contents/dist/css/ie-css/ie8/ie8.min.css': ['./contents/css/ie-css/ie8/ie8.css'] 
       }, 
       { 
        './contents/dist/css/main.min.css': ['./contents/dist/css/main.css'] 
       }, 
       { 
        './contents/dist/css/responsive.min.css': ['./contents/dist/css/responsive.css'] 
       } 
      ] 
     } 
    }, 
    concurrent: { 
     target: { 
      tasks: ['compass', 'watch'], 
      options: { 
       logConcurrentOutput: true 
      } 
     } 
    }, 
    watch: { 
     js: { 
      files: ['contents/js/*.js', 'contents/plugins/**/*.js'], 
      tasks: ['concat', 'uglify:dist', 'uglify:globalhome_min'], 
      options: { 
       reload: true 
      } 
     }, 
     css: { 
      files: ['contents/sass/**/*.scss', 'contents/dist/css/'], 
      tasks: ['concurrent:target'], 
      options: { 
       reload: true 
      } 
     } 
    }, 
}); 

grunt.loadNpmTasks('grunt-contrib-uglify'); 
grunt.loadNpmTasks('grunt-contrib-watch'); 
grunt.loadNpmTasks('grunt-contrib-concat'); 
grunt.loadNpmTasks('grunt-contrib-compass'); 
grunt.loadNpmTasks('grunt-concurrent'); 
grunt.loadNpmTasks('grunt-contrib-cssmin'); 

grunt.registerTask('default', ['concat', 'uglify', 'cssmin']); 

};

Answer 1

У вас есть пара проблем здесь ... Во-первых, вы watch ИНГ ваши Sass файлы в compass задачи уже нет необходимости следить за их явной watch задачи. Кроме того, ваша задача concurrent будет снова запущена watch после изменения файлов sass.

Это логика потока вы создали прямо сейчас:

1. Start watch, он ждет дерзости ИЛИ скомпилированные файлы CSS, чтобы изменить
2. Когда дерзость изменения файла, watch выполняет concurrent, который в поворот выполняет compass, затем другой экземпляр watch.
3. compass задача компилирует CSS, который вызывает watch задачи для обнаружения изменений и запустить concurrent задачи снова.
4. Это продолжается и разрушает все.

Таким образом, вместо того, что у вас есть сейчас, просто использовать это (упрощенный) конфигурации:

grunt.initConfig({ 
    // ... 

    compass: { 
     dist: { 
      options: { 
       sassDir: 'contents/sass/', 
       cssDir: 'contents/dist/css', 

       // *** remove this option 
       // watch: true, 

       outputStyle: 'compressed', 
       linecomments: false 
      } 
     } 
    }, 
    // ... 

    // *** remove this whole task, in the current config you do not need it 
    /* 
    concurrent: { 
     target: { 
      tasks: ['compass', 'watch'], 
      options: { 
       logConcurrentOutput: true 
      } 
     } 
    }, 
    */ 
    watch: { 
     // ... 

     css: { 
      // *** only watch the source files, not the output 
      files: ['contents/sass/**/*.scss'], 
      // *** run the `compass` task directly 
      tasks: ['compass'], 
      options: { 
       reload: true 
      } 
     } 
    } 
}); 

The вы пинать все это прочь с:

~/my-project$ grunt watch 

Или, если вы хотите сначала запустите компас, затем следите за изменениями: