grunt-autribrefixer grunt-contrib-watch

Question

का उपयोग करते समय अंतहीन रूप से लूप करता है मैं केवल ग्रंट सीख रहा हूं। मैं css3 शैलियों prefixing के लिए ऊर्ध्वाधर लय और छवि स्प्राइट पीढ़ी और autoprefixer के लिए कंपास का उपयोग करने जा रहा हूँ।

यहां मेरा 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 कॉल काम करता है चलाते हैं।

मैं बस ग्रंट सीखना शुरू कर रहा हूं। यह शायद मेरे पर एक गलत कॉन्फ़िगरेशन है Gruntfile.js

मुझे आशा है कि आप यहां मेरी सहायता कर सकते हैं।

Answer 1

करने के लिए अपने काम के विन्यास परिवर्तित करें:

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

मूल रूप से

, घुरघुराना-योगदान-घड़ी कार्य जब भी एक फ़ाइल अद्यतन किया जाता है चलेगा, और क्योंकि आपके स्रोत और गंतव्य फ़ाइलें समान हैं यह यह एक अनंत लूप में बदल जाता है । एक बार आपके कंपास कार्य ने आपके सीएसएस का निर्माण करने के बाद बस ऑटोप्रिफिक्सिंग चलाएं। उम्मीद है की यह मदद करेगा। :-)