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

  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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 编辑于2015年 转载自某作者的译文 作者要是看到请联系我注明出处 对网站资源进行优化,并使用不同浏览器测试并不是...
    krock01阅读 455评论 0 2
  • 对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用...
    懵逼js阅读 1,088评论 0 8
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    小裁缝sun阅读 952评论 0 3
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    井皮皮阅读 1,325评论 0 10
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    依依玖玥阅读 3,185评论 7 55