grunt使用watch和livereload的Gruntfile.js的配置
2023-09-11 14:17:26 时间
周末在家看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格式文件都会自动刷新;
;
相关文章
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- JS+CSS3 360度全景图插件 - Watch3D.js
- JS框架_(JQuery.js)绚丽的3D星空动画
- JS框架_(JQbar.js)柱状图动态百分比进度条特效
- JS框架_(Progress.js)圆形动画进度条
- JS框架_(Typed.js)彩色霓虹灯发光文字动画
- JS框架_(JQuery.js)带阴影贴纸标签按钮
- 【js】 Object.prototype.toString.call()
- base64.js
- [Node.js] Creating JWTs (JSON Web Tokens) in Node
- vue.config.js常用配置详解
- js逆向的题目,12-15
- [Cycle.js] Introducing run() and driver functions
- constructor of OfflineInterface.js
- 华为OD机试 - 挑选字符串(Java & JS & Python)
- js jquery vue 网络请求封装 服务器 后台
- node.js JS对象和JSON字符串之间的转换
- JS:crypto-js模块实现数据加密解密
- Node.js(一)概述、全局对象/函数、node各模块使用介绍
- 【JS高级】js之闭包对象_04
- 【JS高级】js之函数、重载、匿名函数、作用域及作用域链_03
- Vue.js起步
- 使用showdown.js将Markdown文档转换为HTML