使用 grunt 更改文件时自动打开浏览器并重新加载

Question

我不是 grunt 专家，但我有一个 angular js 模板，我想将其用于我的应用程序我试图让浏览器在启动 grunt 时自动打开并在启动时重新加载页面html、js 和 css 文件已修改我添加了 watch 和 livereload 但它不起作用是我的代码有问题吗

这是我的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',
]);
};

这是我的 package.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

我找到了解决问题的方法为了自动打开浏览器，我在 Gruntfile 配置中添加了参数 livereload 以连接对象

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

现在浏览器会自动打开

使用 grunt 更改文件时自动打开浏览器并重新加载

open automaticaly browser and reload it when files changed with grunt

npm

angularjs

gruntjs

grunt-contrib-watch