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}, //所有文件发生改变都执行自动reloadfiles : ['**/*']}}});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的配置相关推荐
- grunt 监听文件改变自动编译js
gruntfile.js配置如下: module.exports = function(grunt){ Project configuration.grunt.initConfig({pkg: gru ...
- Sea.js学习4——Sea.js的配置
可以对 Sea.js 进行配置,让模块编写.开发调试更方便. seajs.config seajs.config(options) 用来进行配置的方法. seajs.config({// 别名配置 a ...
- java配置接口提供给vue,vue在js中配置全局API接口
在src文件夹中新建util文件夹,然后在新建一个globalAPI.js文件. 在js中配置后端的接口数据 const http = 'http://127.0.0.1:8989' const gl ...
- VUE config/index.js文件配置
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 ...
- vue.js路由配置vue-router的基础学习 - 概念篇
文章目录 引言 · 相关问题小结: 一.动态路由匹配 (两种情况) A. 两种情况,代码对比: B. 两种情况,效果图对比: C. 提醒 · 仔细体会: D. 优先级的问题: 二.嵌套路由 引言 · ...
- 在vue.config.js下配置别名alias
在vue.config.js下配置别名alias module.exports = {configureWebpack: {resolve: {alias: {'assets': '@/assets' ...
- Next.js国际化配置
Next.js国际化配置 我使用的是next-i18next这个包. 根据next-i18nextnpm包中提示,下载相应的插件: yarn add next-i18next react-i18nex ...
- 在vue.config.js中配置uglifyjs-webpack-plugin压缩代码
如果vue项目打完包,js文件夹里面只有一个app.js的话,就会在首页加载所有的js代码.如果需要分包打包的话,可以执行以下代码,这样的话每个页面就只会加载对应的js文件,减少首页的负担 1.安装代 ...
- Node.js安装配置
Node.js安装配置 1.nodejs的安装 2.nodejs的相关配置 3.npm设置国内镜像 4.npm安装vue.js和vue脚手架 回到顶部 1.nodejs的安装 ①.nodejs的简介 ...
最新文章
- Java学习笔记——封装
- SVN中忘记上传自己写的工程,但是IP已经变了的解决方案
- Linux学习之服务器搭建——DHCP服务器
- 如何使用Apache的Prediction IO Machine Learning Server构建推荐引擎
- C++ 梳理(一):跑通简单程序
- java一个类可以同时被访问吗,Java中两个线程是否可以同时访问同一个对象的两个不同的synchronized方法?...
- 作为互联网面临的最大危险之一,当前的 DDoS 趋势如何?
- 61. Rotate List
- 【字符编码】Java字符编码详细解答及问题探讨
- 美研究人员首次验证声波可让光纤中的光变“听话”
- 哈工大网络安全实验五报告
- 关于磁碟机及Javqhc病毒
- 腾讯2019广告算法大赛总结
- 中国轨道交通设备行业建设投资规模及十四五产量趋势研究报告2021-2027年版
- 创业教父马云的经典语录
- 安卓系统加速_谷歌与安卓合作开发预警系统,安卓手机将成“迷你地震仪”
- Linux(Ubuntu)下WiFi网卡(intel ax201)驱动与Nvidia显卡驱动冲突的解决办法
- 修改域服务器同步时间,配置Windows Server 2008 R2 域控制器的时间同步
- 基于RFID定位技术的室内定位原理--RFID室内定位--新导智能
- 论文解读:CRBPDL:使用集成神经网络方法识别 circRNA-RBP 相互作用位点