Grunt：觀看多個文件，只編譯更改 - livereload休息？

Question

我是Grunt和Javascript/Coffeescript的新手。

我們在一個相當大的項目中使用Grunt，有數百個.coffee文件。由於Grunt編譯所有咖啡文件（儘管只有一個文件已經改變），我最初的問題是如何讓Grunt只編譯一個改變的文件。 使用stackoverflow我能夠回答這個問題，謝謝大家:)

但現在看來，實施的解決方案打破了livereload。當我從「grunt server」開始並在瀏覽器中顯示我的頁面時，一切都很正常。然後我更換一個.coffee文件並保存。該文件被編譯（我檢查），但我的瀏覽器從不重新加載。只有當我手動重新加載瀏覽器時，新的修改後的代碼纔會顯示出來。

所以問題是：爲什麼livereload不再工作？

我不知道這是否重要，但Gruntfile是在老版本（帶有grunt-regarde）中用yeoman創建的。我使用grunt-contrib-watch和buildin livereload將package.json和Gruntfile更新爲更新的規範。沒有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' 
    ]); 
}); 

咕嚕-的contrib-手錶使用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']