Grunt - LiveReload页面自动刷新

在整理这篇文章的时候,默默的看了下键盘上的F5,是不是闪闪发亮,油头粉面的。和他一样的当然也少不了 ctrl alt s。因为传统的流程就是编辑器里 codding,ctrl+s,浏览器里 F5 刷新浏览,即使是你熟练于心、一气呵成。但是当你使用了自动刷新之后再配上强大的编辑器,剩下的只是专心 codding 了,若是配备双屏显示器,那效率绝对成倍成直线飙升。

先介绍下要用到的插件,具体安装就不单独说明了,每个插件也都有对应的文档说明:

  • grunt-contrib-connect
    静态文件服务器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // Gruntfile.js

    // 配合 livereload 使用,建立本地静态调试环境
    // https://www.npmjs.org/package/grunt-contrib-connect
    connect: {
    options: {
    port: 11011,
    hostname: "localhost",
    base: ".",
    livereload: 35729
    },
    all: {
    options: {
    open: true,
    base: [
    "."
    ]
    }
    }
    },
  • grunt-contrib-watch
    监视文件的变化

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // Gruntfile.js

    // 资源监控,主要用在开发时自动刷新浏览器
    // https://www.npmjs.org/package/grunt-contrib-watch
    watch: {
    options: {
    spawn: false
    },
    style: {
    files: ["sass/**/*.scss"],
    tasks: ["compass"]
    },
    livereload: {
    files: [
    "./theme*/*.html",
    "./theme*/*.css"
    ],
    options: {
    livereload: '<%= connect.options.livereload %>' // this port must be same with the connect livereload port
    }
    }
    },
  • 配置任务

    1
    2
    3
    // Gruntfile.js

    grunt.registerTask("livereload", ["connect:all", "watch"]);

通过这次记录,回过头又翻了一下官方文档,发现在目前这个 basic 配置只是勉强能用,还有很多需要改进提升的地方。因为插件也在不断更新,加入了更多的功能。在 connectwatch 的主页看到,功能还是很丰富的。特别是 content 里已经有了 open 功能,那样的话就会少用到一个插件。

通过最近在 Grunt 中的尝试,用在项目中只是略微在开发过程中提升了效率,也只是基础使用,有空了看看说明文档,发现更多高级的功能,还是很不错的。比如有时候插件在更新之后会加入新特性,而自己的配置文件只是起初对于项目适用之后,就不会再做更新和改进,思想还是停留在起初到头来并没有多少提升,还是着重要培养思想。

更新:后来看了文档,grunt-contrib-watch 已经内置 Livereload,以上的内容我做了修改。