首页 > 代码库 > grunt使用watch和livereload的Gruntfile.js的配置
grunt使用watch和livereload的Gruntfile.js的配置
周末在家看angularJS, 用grunt的livereload的自动刷新, 搞了大半天, 现在把配置贴出来, 免得以后忘记了, 只要按照配置一步步弄是没有问题的;
开始的准备的环境安装是:
（1）：nodeJS,去官方网站下载(href);
（2）：然后把nodeJS加到全局的环境变量里面去(nodeJS安装好了就能用npm这个命令了),参考(href);
（3）：执行npm install grunt -g 和 npm install -g grunt-cli,一个是安装服务端的gurnt一个是客户端的grunt(反正都安装就好了)，参考(href)
第一步：新建一个叫做Gruntfile.js的js文件
module.exports = function (grunt) { grunt.initConfig({ pkg : grunt.file.readJSON(‘package.json‘), connect: { options: { port: 9000, hostname: ‘127.0.0.1‘, //默认就是这个值，可配置为本机某个 IP，localhost 或域名 livereload: 35729 //声明给 watch 监听的端口 }, server: { options: { open: true, //自动打开网页 http:// base: [
//当前的severHttp服务目录; "html" //主目录 ] } } }, watch : { options: { livereload: 35729 // this port must be same with the connect livereload port }, scripts: { options: { livereload: true },
//所有文件发生改变都执行自动reload files : [‘**/*‘] } } }); grunt.registerTask(‘default‘,["connect","watch"]); grunt.loadNpmTasks(‘grunt-contrib-watch‘); grunt.loadNpmTasks(‘grunt-contrib-connect‘);};
2：新建一个package.json的文件, 直接在cmd(命令行)下执行npm install即可把所有的node_module自动下载下来;
{ "name": "nono", "version": "0.0.0", "description": "for watch", "main": "Gruntfile.js", "dependencies": { "grunt": "~0.4.5", "express": "~3.15.2", "grunt-contrib-connect": "~0.6.0", "grunt-contrib-watch": "~0.5.3"}, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1"}, "repository": { "type": "git", "url": "sqqihao.github.com"}, "keywords": [ "nono"], "author": "nono", "license": "__MIT__"}
好了, 现在在当前目录下执行grunt, grunt会自动监控所有文件的变化, 当你的文件一旦发生改变的, 你通过127.0.0.1打开的所有html格式文件都会自动刷新;
;
grunt使用watch和livereload的Gruntfile.js的配置
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。