ouvrir automatiquement le navigateur et le recharger quand les fichiers ont changé avec grunt

Question

Je ne suis pas un pro avec grognement mais j'ai un modèle js angulaire que je veux utiliser pour mon application j'essaie de rendre le navigateur ouvert automatiquement quand grognement est lancé et la page de rechargement en html, les fichiers js et css sont modifiés i ajoutés montre et livereload, mais il ne fonctionnera pas est là quelque chose de mal dans mon code

Voici mes gruntfile.js

module.exports = function(grunt) { 
// Load grunt tasks automatically 
require('load-grunt-tasks')(grunt); 
grunt.loadNpmTasks('grunt-contrib-watch'); 
grunt.loadNpmTasks('grunt-serve'); 

var pkg = grunt.file.readJSON('package.json'); 

var options = { 
    paths: { 
    app: 'app', 
    assets: 'app/assets', 
    dist: 'app/dist', 
    distAssets: 'app/dist/assets', 
    html: 'app/html', 
    htmlTmp: '.tmp/htmlsnapshot', 
    htmlAssets: 'app/html/assets', 
    index: 'app/dist/index.html', 
    indexDev: 'app/index.dev.html', 
    indexTmp: '.tmp/html/index.html' 
    }, 
    watch: { 
    js: { 
     files: ['Gruntfile.js', 'app/assets/js/**/*.js'], 
     tasks: ['jshint'], 
     options: { 
     livereload: true 
     } 
    }, 
    css: { 
     files: [ 
     'app/assets/css/**/*.scss' 
     ], 
     tasks: ['sass'], 
     options: { 
     livereload: true 
     } 
    }, 
    livereload: { 
     options: { 
     livereload: true 
     }, 
     files: [ 
     'app/assets/tpl/*.html', 
     'app/assets/tpl/**/*.html', 
     'app/assets/img/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' 
     ] 
    }, 
    serve: { 
     options: { 
     port: 9000, 
     }, 
     files: [ 
     'app/assets/tpl/*.html', 
     'app/assets/tpl/**/*.html', 
     'app/assets/img/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' 
     ] 
    } 
    }, 
    connect: { 
    options: { 
     port: 9000, 
     // Change this to '0.0.0.0' to access the server from outside. 
     hostname: 'localhost', 
     livereload: 35729 
    } 
    }, 
    // debug while developing 
    jshint: { 
    all: ['Gruntfile.js', 'app/js/**/*.js'] 
    }, 
    pkg: pkg 
}; 

// Load grunt configurations automatically 
var configs = require('load-grunt-configs')(grunt, options); 

// Define the configuration for all the tasks 
grunt.initConfig(configs); 

grunt.registerTask('bumper', ['bump-only']); 
grunt.registerTask('css', ['sass']); 
grunt.registerTask('default', [ 
    'sass', 
    'copy:dev', 
    'connect', 
    'watch', 
    'serve' 
]); 

grunt.registerTask('shared', [ 
    'clean:demo', 
    'copy:demo', 
    'sass', 
    'ngconstant', 
    'useminPrepare', 
    'concat:generated', 
    'cssmin:generated', 
    'uglify:generated', 
    'filerev', 
    'usemin', 
    'imagemin', 
    'usebanner' 
]); 

grunt.registerTask('demo', [ 
    'shared', 
    'copy:postusemin', 
    'grep:demo' 
]); 

grunt.registerTask('dist', [ 
    'shared', 
    'copy:postusemin', 
    'copy:dist', 
    'grep:dist', 
    'html', 
    'compress', 
    'copy:postusemin', 
    'grep:demo', 
]); 

grunt.registerTask('html', [ 
    'clean:html', 
    'copy:html', 
    'concat:html', 
    'uglify:html', 
    'cssmin:html', 
]); 
}; 

et ici mon paquet .json

{ 
"name": "Materialism", 
"description": "Materialism is an admin template using bootstrap and 
angularjs", 
"version": "1.1.4", 
"license": "Envato REGULAR LICENSE", 
"author": "Theme Guys", 
"contributors": [ 
    { 
    "name": "ThemeGuys", 
    "email": "info@theme-guys.com" 
    } 
], 
"repository": { 
    "type": "git", 
    "url": "https://github.com/yourivdlans/materialism.git" 
}, 
"keywords": [ 
    "AngularJS", 
    "Bootstrap", 
    "Admin", 
    "Dashboard", 
    "Panel", 
    "App", 
    "Charts", 
    "Responsive" 
], 
"dependencies": {}, 
"devDependencies": { 
    "grunt": "1.0.1", 
    "grunt-autoprefixer": "^0.7.3", 
    "grunt-banner": "0.6.0", 
    "grunt-bump": "0.8.0", 
    "grunt-concurrent": "^0.5.0", 
    "grunt-connect-proxy": "^0.2.0", 
    "grunt-contrib-clean": "1.0.0", 
    "grunt-contrib-compress": "^1.3.0", 
    "grunt-contrib-concat": "1.0.1", 
    "grunt-contrib-connect": "^1.0.2", 
    "grunt-contrib-copy": "1.0.0", 
    "grunt-contrib-cssmin": "1.0.1", 
    "grunt-contrib-htmlmin": "^0.3.0", 
    "grunt-contrib-imagemin": "1.0.1", 
    "grunt-contrib-jshint": "1.0.0", 
    "grunt-contrib-uglify": "1.0.1", 
    "grunt-contrib-watch": "1.0.0", 
    "grunt-filerev": "2.3.1", 
    "grunt-google-cdn": "^0.4.0", 
    "grunt-grep": "^0.7.0", 
    "grunt-html-snapshot": "git://github.com/yourivdlans/grunt-html- 
    snapshot.git#ym-patches", 
    "grunt-karma": "^0.10.1", 
    "grunt-markdown": "^0.7.0", 
    "grunt-newer": "^0.7.0", 
    "grunt-ng-annotate": "^0.3.0", 
    "grunt-ng-constant": "2.0.1", 
    "grunt-prettify": "latest", 
    "grunt-sass": "^1.2.0", 
    "grunt-serve": "^0.1.6", 
    "grunt-usemin": "3.1.1", 
    "grunt-wiredep": "^1.7.0", 
    "jasmine-core": "^2.2.0", 
    "jshint-stylish": "^0.2.0", 
    "karma": "^0.12.37", 
    "karma-jasmine": "^0.3.5", 
    "karma-phantomjs-launcher": "^0.1.4", 
    "load-grunt-configs": "1.0.0", 
    "load-grunt-tasks": "3.5.0", 
    "time-grunt": "^0.3.1" 
} 
} 

Answer 1

j'ai trouvé une solution pour mon problème pour ouvrir automatiquement le navigateur i ajouté le paramètre livereload pour vous connecter objet dans ma configuration Gruntfile

connect: { 
    options: { 
    livereload: true, 
    hostname: 'localhost', 
    base: 'app', 
    port: 9000 
    }, 
    proxies: [ 
    { 
     context: [ 
     '/_ah', 
     '/secured', 
     '/oauth2login', 
     '/oauth2callback' 
     ], 
     host: 'localhost', 
     port: 8080, 
     https: false, 
     changeOrigin: false, 
     xforward: false 
    } 
    ], 
    livereload: { 
    options: { 
     open: true 
    } 
    } 
} 

maintenant le navigateur ouvre automatiquement