2013-09-08 6 views
6

Я просто изучаю Grunt. Я собираюсь использовать компас для генерации вертикального ритма и изображения, а также autoprefixer для префикса стилей css3.grunt-autoprefixer петли бесконечно при использовании grunt-contrib-watch

Это мой Gruntfile.js.

module.exports = function(grunt) { 
    var globalConfig = { 
    sassDir: 'sass', 
    cssDir: 'css' 
    }; 

    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); 
    // Project configuration. 
    grunt.initConfig({ 
    globalConfig: globalConfig, 
    pkg: grunt.file.readJSON('package.json'), 
    compass: { 
     dev: { 
     options: { 
      sassDir: '<%= globalConfig.sassDir %>', 
      cssDir: '<%= globalConfig.cssDir %>' 
     } 
     } 
    }, 
    autoprefixer: { 
     dev: { 
     options: { 
      browsers: ['last 2 versions'] 
     }, 
     src: '<%= globalConfig.cssDir %>/style.css', 
     dest: '<%= globalConfig.cssDir %>/style.css' 
     } 
    }, 
    watch: { 
     compass: { 
     files: ['<%= globalConfig.sassDir %>/**/*.scss'], 
     tasks: ['compass:dev'], 
     }, 
     autoprefixer: { 
     files: ['<%= globalConfig.cssDir %>/style.css'], 
     tasks: ['autoprefixer:dev'] 
     }, 
     livereload: { 
     options: { livereload: true }, 
     files: ['<%= globalConfig.cssDir %>/style.css'] 
     } 
    } 
    }); 

    // Default task(s) that will be run by invoking 'grunt' w/o args 
    grunt.registerTask('styles:dev', ['compass', 'autoprefixer']); 
    grunt.registerTask('default', ['styles:dev', 'watch']); 
}; 

Но всякий раз, когда я бегу

grunt 

Все работает, как ожидается, кроме того, что хрюкать-вно-часы называет черновую-autoprefixer бесконечно.

Я только начинаю учиться Grunt. Вероятно, это неправильная конфигурация на моем Gruntfile.js

Надеюсь, вы могли бы помочь мне здесь.

ответ

10

Изменения конфигурации задачи для:

watch: { 
    compass: { 
    files: ['<%= globalConfig.sassDir %>/**/*.scss'], 
    tasks: ['compass:dev', 'autoprefixer:dev'] 
    }, 
    livereload: { 
    options: { livereload: true }, 
    files: ['<%= globalConfig.cssDir %>/style.css'] 
    } 
} 

В основном, хрюкать-вно-часы будут выполнять задачи каждый раз, когда файл обновляется, и потому, что ваши исходные и конечные файлы одинаковы, что превращает его в бесконечный цикл , Просто запустите автоопределение, как только ваша задача компаса построит ваш css. Надеюсь это поможет. :-)

+1

Да, это исправлено. большое спасибо. – chanHXC

+0

, если вы не против, могли бы вы поделиться советами по лучшим практикам с настройкой gruntfile.js? :) спасибо. – chanHXC

+0

Как только вы привыкнете к настройке задач, вы найдете загрузку различных плагинов, которые могут автоматизировать все виды совместной работы. В этом примере не так много лучших практик, с которыми я могу ссылаться, вы уже настроили конфигурацию для общих каталогов, использовали трюк matchdep и т. Д. Я обнаружил, что все довольно просто, чтобы работать, при условии, что вы прочитайте документацию для каждого плагина. Определенно просматривайте репозиторий npm для новых плагинов, но есть много, чтобы обнаружить :-) – Ben

Смежные вопросы