mở trình duyệt tự động và tải lại khi các tập tin thay đổi với grunt

Question

Tôi không phải là chuyên nghiệp với grunt nhưng tôi có một khuôn mẫu js góc mà tôi muốn sử dụng cho ứng dụng của tôi Tôi đang cố gắng để làm cho trình duyệt mở automaticaly khi grunt là phát động và tải lại trang khi các file html, js và css được sửa đổi bổ sung i đồng hồ và livereload nhưng nó wont work là có điều gì đó sai trái trong mã của tôi

đây là gruntfile.js tôi

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

và đây gói của tôi .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" 
} 
} 

.210

Answer 1

tôi tìm thấy một giải pháp cho vấn đề của tôi để tự động mở trình duyệt i thêm tham số livereload để kết nối đối tượng trong cấu hình Gruntfile tôi

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

nay là trình duyệt sẽ tự động mở