grunt-contrib-watch livereload不能重新加載

Question

我一直試圖讓這個livereload工作，但我很難過。我的grunt.js文件在下面，我確定在我的html文件的末尾添加我的腳本。有任何想法嗎？

module.exports = function(grunt) { 
grunt.loadNpmTasks('grunt-contrib-uglify'); 
grunt.loadNpmTasks('grunt-contrib-watch'); 
grunt.loadNpmTasks('grunt-contrib-compass'); 
grunt.initConfig({ 
    uglify: { 
     my_target: { 
      files: { 
       '_/js/script.js' : ['_/components/js/script.js'] 
      }//files 
     } //mytarget 
    }, //uglify 
    watch: { 
     options : { livereload: true }, 
     scripts: { 
     files: ['_/components/js/*.js'], 
     tasks: ['uglify'] 
    }, //scripts 
    html: { 
     files: ['*.html'] 
    }//html 
    }//watch 
}) // initconfig 
grunt.registerTask('default', 'watch'); 
} //exports 

Answer 1

請使用瀏覽器extension嘗試使用livereload。

Answer 2

有幾個選項，使現場重裝工作：

• 瀏覽器擴展：http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-
• 添加Javascript行：<script src="//localhost:35729/livereload.js"></script>
• 連接中間件：https://github.com/intesso/connect-livereload

詳情：

https://github.com/gruntjs/grunt-contrib-watch#live-reloading

Answer 3

我在gif動畫中爲你錄製了一個小屏幕錄像。在那裏我展示瞭如何通過npm安裝依賴模塊，並在啓用livereload的情況下構建項目。

截屏位於http://imgur.com/3CpVI2j

我的版本的工具是 NPM 1.4.21 和 的NodeJS v0.10.30

 

這是我Gruntfile.js與評論

module.exports = function (grunt) { 

    grunt.initConfig({ 

    pkg: grunt.file.readJSON('package.json'), 

    // Delete contents before the full build 
    clean: { 
     dist: ['dist', 'dist/js'], 
     html: ['dist/**/*.html'] 
    }, 

    /* Uglify javascript located in app/js/*.js 
     And copy it to dist/js/main.js 

     So all JS will be in one file. 
     P.S. Remember that our js task in uglify is called "js" */ 
    uglify: { 
     options: { 
     report: 'min' 
     }, 
     js: { // task to combine separate files into main.js 
     files: { 
      'dist/js/main.js': [ 
      'app/js/**/*.js' 
      ] 
     } 
     } 
    }, 

    copy: { // Just copy HTML files from app folder 
     html: { 
     files: [{ 
      expand: true, 
      cwd: 'app/', 
      src: ['**/*.html'], 
      dest: 'dist/', 
      filter: 'isFile' 
     }] 
     }, 
    }, 

    connect: { // Create server that will serve 
       // requests to our compiled app 
     dist: { 
     options: { 
      port: 3000, 
      base: 'dist' 
     } 
     } 
    }, 

    watch: { // Most instersting. 
      // Will be watching for changes in JS and HTML. 
     options: { 
     livereload: true 
     }, 
     js: { // Here you need to specify the same task name 
      // as in uglify task we thought above 
     files: ['app/js/**/*.js'], // Which files to uglify and copy 
     tasks: ['newer:uglify'] // Do it 
     }, 
     copy: { // Remove old html and copy new to dist folder 
     files: ['app/**/*.html'], 
     tasks: ['clean:html','newer:copy:html'] 
     } 
    }, 

    }); 

    // Load all grunt modules with one command 
    require('load-grunt-tasks')(grunt); 

    grunt.registerTask('build', [ 
    'clean:dist', // Remove all 
    'uglify', // Uglify all 
    'copy' // Copy all HTML 
    ]); 

    grunt.registerTask('default', [ 
    'build', // Build the project 
    'connect:dist', // Start server 
    'watch' // Watch for changes 
    ]); 

}; 

這是的package.json沒有評論 （一切都足夠清晰）

{ 
    "engines": { 
    "node": ">= 0.10.0" 
    }, 
    "devDependencies": { 
    "grunt": "~0.4.5", 
    "grunt-contrib-clean": "0.5.0", 
    "grunt-contrib-connect": "~0.8.0", 
    "grunt-contrib-copy": "~0.5.0", 
    "grunt-contrib-uglify": "~0.5.0", 
    "grunt-contrib-watch": "~0.6.1", 
    "grunt-newer": "~0.7.0", 
    "load-grunt-tasks": "~0.6.0" 
    }, 
    "scripts": { 
    "preinstall": "npm cache clear" 
    } 
} 

Answer 4

你真的沒有添加任何瀏覽器擴展也沒有額外的腳本標記here is a Gulp based solution，另請參閱https://stackoverflow.com/a/29729776/1614973 查看Gulpfile的示例。