javascript - grunt-contrib-watch livereload not reloading - Stack Overflow

admin管理员组

文章数量:1405287

I have been trying all day to get this livereload working but I am stumped. My grunt.js file is below and I made sure to add my script at the end of my html file. Any ideas?

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

I have been trying all day to get this livereload working but I am stumped. My grunt.js file is below and I made sure to add my script at the end of my html file. Any ideas?

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

• javascript
• gruntjs
• livereload

Share Improve this question Follow edited Mar 19, 2014 at 8:06 Min Naing Oo 1,10555 gold badges2626 silver badges5252 bronze badges asked Mar 19, 2014 at 7:09 RayDavisRayDavis 3111 silver badge22 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Try using browser extension for livereload.

I recorded a little screencast for you in gif animation. There I show how to install dependant modules by npm and build project with livereload enabled.

Screencast is located on https://i.sstatic/g5UVH.jpg

My versions of tools is NPM 1.4.21 and NodeJS v0.10.30

 

This is my Gruntfile.js with the ments

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 bine 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 piled 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 mand
  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
  ]);

};

And this is package.json with no ments (everything is clear enough)

{
  "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"
  }
}

There a few options to make live reload working:

• browser extension: http://feedback.livereload./knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-
• add a javascript line: <script src="//localhost:35729/livereload.js"></script>
• connect middleware: https://github./intesso/connect-livereload

Details:

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

You don't really have to add any browser extension nor extra script tag, here is a Gulp based solution, see also https://stackoverflow./a/29729776/1614973 for an example of a Gulpfile.

本文标签： javascriptgruntcontribwatch livereload not reloadingStack Overflow