Grunt: guarda più file, compila solo cambiato - interruzioni di fegato?

Question

Sono completamente nuovo per Grunt e Javascript/Coffeescript.

Stiamo utilizzando Grunt in un progetto piuttosto grande con centinaia di file .coffee. Poiché Grunt compila tutti i file caffè (anche se è stato modificato un solo file), la mia prima domanda era su come ottenere Grunt per compilare solo il file modificato. Utilizzo di stackoverflow Sono stato in grado di rispondere a questa domanda, grazie a tutti :)

Ma ora sembra che la soluzione implementata rompa il fegato. Quando inizio con "grunt server" e visualizzo la mia pagina nel browser, tutto sembra a posto. Quindi cambio un file .coffee e lo salvi. Il file viene compilato (ho controllato), ma il mio browser non viene mai ricaricato. Solo quando ricarico manualmente il browser viene visualizzato il nuovo codice modificato.

Quindi la domanda è: perché il fegato non funziona più?

Non so se questo è importante, ma il Gruntfile è stato creato con yeoman in una versione precedente (con grunt-regarde). Ho aggiornato il pacchetto package.json e il Gruntfile alle nuove specifiche usando grunt-contrib-watch e il buildelo livereload. Senza lo grunt.event.on tutto funziona correttamente.

Fonti (in parte):

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

grugnito-contrib-orologio viene utilizzato con la versione v0.4.4, connect-livereload con la versione 0.2.0

Answer 1

La mia soluzione:

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

immagino grunt-concurrent è quello che stai cercando.

Ecco il mio approccio. (Nota: è scritto nella sceneggiatura del caffè ma dovresti essere in grado di adattarlo facilmente.)

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']