2013-09-08 9 views
6

Ich bin nur Grunt lernen. Ich werde Kompass für vertikalen Rhythmus und Bild Sprite Generation und Autoprefixer für die Vorsilbe css3 Stile verwenden.Grunzen-autoprefixer Schleifen endlos bei der Verwendung von Grunzen-contrib-watch

Hier ist meine 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']); 
}; 

Aber immer, wenn ich laufe

grunt 

Alles funktioniert wie erwartet, außer dass Grunzen-contrib-Uhr ruft Grunzen-autoprefixer endlos.

Ich bin gerade dabei zu lernen Grunt. Es ist wahrscheinlich eine falsche Konfiguration auf meinem Gruntfile.js

Ich hoffe, Sie könnten mir hier helfen.

Antwort

10

Ihre Aufgabe Konfiguration ändern zu:

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

Grundsätzlich Grunzen-contrib-Uhr wird Aufgaben ausgeführt, wenn eine Datei aktualisiert wird, und weil Ihre Quell- und Zieldateien identisch sind es verwandelt es sich in eine Endlosschleife . Führen Sie das Autoprefixing einfach aus, sobald Ihre Kompassaufgabe Ihr CSS erstellt hat. Hoffe das hilft. :-)

+1

ja, dass es fixiert. vielen Dank. – chanHXC

+0

Wenn es Ihnen nichts ausmacht, würden Sie einige Best Practices-Tipps mit der Konfiguration von gruntfile.js teilen? :) Dank. – chanHXC

+0

Sobald Sie die Konfiguration von Aufgaben zu gewöhnen, werden Sie eine Last von verschiedenen Plugins finden, die alle Arten von gemeinsamer Entwicklungsarbeit automatisieren. Es gibt nicht wirklich viele Best Practices, die ich Ihnen in diesem Fall beziehen, haben Sie bereits eine Config für gemeinsame Verzeichnisse einrichten, verwendet, um die matchdep Trick usw. Ich habe festgestellt, dass es relativ einfach ist, arbeiten zu bekommen, dass Sie die Bereitstellung Lesen Sie die Dokumentation für jedes Plugin. Auf jeden Fall sehen durch den NPM-Repository für neue Plugins gibt es aber viel zu entdecken :-) – Ben