美文网首页
前端热部署(保存后自动刷新)

前端热部署(保存后自动刷新)

作者: 一路摇到顶 | 来源:发表于2016-05-20 16:34 被阅读797次
    1. npm init 初始化环境
    2. 新建Gruntfile.js 文件,内容如下:
      module.exports = function(grunt) {
      // 项目配置(任务配置)
      grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        watch: {
          client: {
            files: ['*.html', 'css/*', 'js/*', 'images/**/*','h5/*'], //需要监听的文件
            options: {
              livereload: true
            }
          }
        }
      });
     
      // 加载插件
      grunt.loadNpmTasks('grunt-contrib-watch');
     
      // 自定义任务
      grunt.registerTask('live', ['watch']);
     
    };
    
    
    1. 安装插件npm install grunt grunt-contrib-watch connect-livereload --save-dev
    2. 浏览器安装插件LiveReload,反正我是用谷歌浏览器的。
    3. grunt live开始享受生活吧
    4. livereload 是需要服务器支持的。so 提供一个小型服务器。
    • 安装npm install -g http-server
    • 启动http-server -a 127.0.0.1 -p 8085

    相关文章

      网友评论

          本文标题:前端热部署(保存后自动刷新)

          本文链接:https://www.haomeiwen.com/subject/cmynrttx.html