自动修改html文件,修改 HTML JS CSS 等文件浏览器自动刷新

本文介绍了如何利用Grunt自动化工具及其插件来避免手动刷新浏览器的问题。通过创建package.json和Gruntfile.js文件,配置并安装所需插件,设置监听和 livereload 功能,可以在修改HTML、JS或CSS文件后自动刷新浏览器展示最新内容。只需简单几步,即可提升前端开发效率。
摘要由CSDN通过智能技术生成

引用

如果我们厌烦了每次修改 HTML, JS, CSS 等文件后,需要

手动 刷新浏览器的话,那么借助 Grunt 的一些插件,可以实现自动刷新。(其实我觉得手动刷新也没费事儿到哪去,O(∩_∩)O哈哈~)

建个文件夹,例如 test,进入,做如下操作

1. 首先要有 NodeJs, Grunt 环境,假设已经有了。

2. 新建一个名叫 package.json 文件。内容如下。

3. 新建一个名叫 Gruntfile.js 文件。内容如下。

4. 根据 package.json 文件中的定义,安装插件。npm install。

5. 根据 Gruntfile.js 文件中的定义,运行 grunt preview。

根据 Gruntfile.js 中的定义,在 test 下再新建个 src 目录,进入 src 后,新建  index.html 进行测试 ( html 文件中最好有 body 标签)。

打开一个浏览器,地址为localhost:9001,修改下 test/src/index.html 文件,看看效果。

{

"name": "live-reload-test",

"version": "0.0.0",

"dependencies": {

"grunt": "*",

"grunt-contrib-connect": "*",

"grunt-contrib-watch": "*",

"connect-livereload": "*"

}

}

module.exports = function (grunt) {

var LIVERELOAD_PORT = 35729;

// lrSnippet is just a function.

// It's a piece of Connect middleware that injects

// a script into the static served html.

var lrSnippet = require('connect-livereload')({ port: LIVERELOAD_PORT });

// All the middleware necessary to serve static files.

var livereloadMiddleware = function (connect, options) {

return [

// Inject a livereloading script into static files.

lrSnippet,

// Serve static files.

connect.static(options.base),

// Make empty directories browsable.

connect.directory(options.base)

];

};

grunt.initConfig({

connect: {

client: {

options: {

port: 9001,

hostname: '0.0.0.0',

base: 'src/',

middleware: livereloadMiddleware

}

}

},

watch: {

client: {

files: ['src/**/*'],

tasks: [],

options: {

livereload: true

}

}

}

});

grunt.loadNpmTasks('grunt-contrib-connect');

grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('preview', ['connect:client', 'watch:client']);

};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值