ग्रंट: एकाधिक फाइलें देखें, केवल संकलित संकलित करें - लाइवरलोड ब्रेक?

Question

मैं ग्रंट और जावास्क्रिप्ट/कॉफ़ीस्क्रिप्ट को पूरी तरह से नया हूं।

हम सैकड़ों .coffee - फ़ाइलों के साथ एक बड़ी परियोजना में ग्रंट का उपयोग कर रहे हैं। चूंकि ग्रंट संकलित सभी कॉफीफाइल (हालांकि केवल एक फ़ाइल बदल गई है), मेरा प्रारंभिक प्रश्न यह था कि ग्रंट को केवल एक परिवर्तित फ़ाइल को संकलित करने के लिए कैसे प्राप्त किया जाए। स्टैक ओवरफ्लो का उपयोग करके मैं उस प्रश्न का उत्तर देने में सक्षम था, आप सभी को धन्यवाद :)

लेकिन अब ऐसा लगता है कि लागू समाधान लाइवरेलोड को तोड़ देता है। जब मैं "ग्रंट सर्वर" से शुरू करता हूं और ब्राउज़र में अपना पेज प्रदर्शित करता हूं, तो सब कुछ ठीक दिखता है। फिर मैं एक। कॉफी फ़ाइल बदलता हूं और इसे बचाता हूं। फ़ाइल संकलित हो जाती है (मैंने चेक किया), लेकिन मेरा ब्राउज़र कभी पुनः लोड नहीं होता है। केवल जब मैं ब्राउज़र को मैन्युअल रूप से पुनः लोड करता हूं तो नया संशोधित कोड प्रदर्शित होता है।

तो सवाल यह है कि लाइवरलोड अब काम क्यों नहीं करता है?

मुझे नहीं पता कि यह मायने रखता है, लेकिन ग्रंटफाइल को पुराने संस्करण (गड़बड़ी के साथ) में यमन के साथ बनाया गया था। मैंने grunt-contrib-watch और buildin livereload का उपयोग कर पैकेजर.जेसन और ग्रंटफाइल को नए चश्मा में अपडेट किया। grunt.event.on के बिना सबकुछ ठीक काम करता है।

सूत्रों का कहना है (आंशिक रूप से):

grunt.initConfig({ 

    watch: { 
      coffee: { 
       files: ['<%= yeoman.app %>/coffeescripts/**/*.coffee'], 
       tasks: ['coffee:app'], 
       options: { 
        nospawn: true 
       }, 
      }, 
      compass: { 
       files: ['<%= yeoman.app %>/styles/**/*.{scss,sass}'], 
       tasks: ['compass'] 
      }, 
      templates: { 
       files: ['<%= yeoman.app %>/templates/**/*.tpl'], 
       tasks: ['handlebars'] 
      }, 
      livereload: { 
       options: { 
        livereload: LIVERELOAD_PORT 
       }, 
       files: [ 
        '<%= yeoman.app %>/*.html', 
        '<%= yeoman.tmp %>/styles/**/*.css', 
        '<%= yeoman.tmp %>/scripts/**/*.js', 
        '<%= yeoman.tmp %>/spec/**/*.js', 
        '<%= yeoman.app %>/img/{,*/}*.{png,jpg,jpeg,webp}', 
       ] 
      } 
     }, 
     coffee: { 
      app: { 
       expand: true, 
       cwd: '<%= yeoman.app %>/coffeescripts', 
       src: '**/*.coffee', 
       dest: '<%= yeoman.tmp %>/scripts', 
       ext: '.js', 
       options: { 
        runtime: 'inline', 
        sourceMap: true 
       }, 
      } 
     } 
    } 
}); 

grunt.event.on('watch', function(action, filepath) { 
    filepath = filepath.replace(grunt.config('coffee.app.cwd')+'/', ''); 
    grunt.config('coffee.app.src', [filepath]); 
}); 

grunt.registerTask('server', function (target) { 
    if (target === 'dist') { 
     return grunt.task.run(['build', 'open', 'connect:dist:keepalive']); 
    } 

    grunt.task.run([ 
     'clean:server', 
     'coffee', 
     'compass:server', 
     'symlink:bower', 
     'connect:livereload', 
     'handlebars', 
     'notify:watch', 
     'watch' 
    ]); 
}); 

घुरघुराना-योगदान-घड़ी संस्करण v0.4.4 साथ प्रयोग किया जाता है, संस्करण के साथ कनेक्ट-livereload 0.2.0

Answer 1

मेरे समाधान:

grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 
     cssmin: { 
      dist: { 
       expand: true, 
       cwd: 'app', 
       src: ['**/*.css'], 
       dest: 'WebContent' 
      } 
     }, 
     uglify: { 
      options: { 
       mangle: false 
      }, 
      dist: { 
       expand: true, 
       cwd: 'app/js', 
       src: ['**/*.js'], 
       dest: 'WebContent/js' 
      } 
     }, 
     htmlmin: { 
      options: { 
       collapseWhitespace: true 
      }, 
      dist: { 
       expand: true, 
       cwd: 'app', 
       src: ['**/*.html'], 
       dest: 'WebContent' 
      } 
     }, 
     watch: { 
      options: { 
       spawn: false 
      }, 
      cssmin: { 
       files: 'app/css/**/*.css', 
       tasks: ['cssmin'] 
      }, 
      uglify: { 
       files: 'app/js/**/*.js', 
       tasks: ['uglify'] 
      }, 
      htmlmin: { 
       files: 'app/**/*.html', 
       tasks: ['htmlmin'] 
      } 
     }, 
    }); 

    // Faz com que seja salvo somente o arquivo que foi alterado 
    grunt.event.on('watch', function(action, filepath) { 
     var tasks = ['cssmin', 'uglify', 'htmlmin']; 

     for (var i=0, len=tasks.length; i < tasks.length; i++) { 
      var taskName = tasks[i]; 

      if (grunt.file.isMatch(grunt.config('watch.'+ taskName +'.files'), filepath)) { 
       var cwd = new String(grunt.config(taskName + '.dist.cwd')).split('/').join('\\') + '\\'; //inverte as barras e adiciona uma "\" no final 
       var pathWithoutCwd = filepath.replace(cwd, ''); //obtem somente o path sem o cwd 

       grunt.config(taskName + '.dist.src', pathWithoutCwd); //configura a task 
      } 
     } 
    }); 

    grunt.loadNpmTasks('grunt-contrib-watch'); 
    grunt.loadNpmTasks('grunt-contrib-cssmin'); 
    grunt.loadNpmTasks('grunt-contrib-uglify'); 
    grunt.loadNpmTasks('grunt-contrib-htmlmin'); 

    // Tarefas padrão 
    grunt.registerTask('default', ['cssmin', 'uglify', 'htmlmin']); 
}; 

Answer 2

मुझे लगता है कि grunt-concurrent वह है जो आप खोज रहे हैं।

मेरा दृष्टिकोण यहां है। (नोट करें कि इसे कॉफी स्क्रिप्ट में लिखा गया है लेकिन आपको इसे आसानी से अनुकूलित करने में सक्षम होना चाहिए।)

watch: 
    compass: 
    files: ['private/compass/**/*.scss'] 
    tasks: ['compass:dist'] 
    options: 
     livereload: true 
    coffee: 
    options: 
     livereload: 34567 
    files: ['private/coffee/**/*/.coffee'] 
    tasks: ['coffee:dist'] 
    ci: 
    options: 
     livereload: 34568 
    files: ['application/views/**/*.php', 'application/controllers/**/*.php'] 

concurrent: 
    options: 
    logConcurrentOutput: true 
    dev: ['watch:compass', 'watch:coffee', 'watch:ci']