grunt很强大,可以帮我我们解决很多繁琐的操作,虽然刚接触不久,但依然感受到其强大之处,这篇记录一下通过grunt.js实现事实刷新页面,
省去了编码 -> 保存 -> F5..F5..F5..F5...n多个F5操作。
首先看下项目目录:
然后来看package.json配置:
{
"name":"grunt-connect",
"version":"0.1.0",
"devDependencies":{
"grunt":"~0.4.1",
"grunt-contrib-connect":"~0.6.0",
"grunt-contrib-watch":"~0.5.3"
}
}
这里只用到两个,connect+watch。因为平时写小东西用不到WebStorm等那些的大家伙,sublime就很好用了,所以,为了自动刷新,用connect配置一个server.具体根据个人需要删减,然后通过watch实时监听文件变化,以此达到实时刷新的效果。
然后到对应目录下执行:npm install 完成插件的安装
来看Gruntfile.js配置代码:
module.exports = function(grunt) {
// 项目配置(任务配置)
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// 通过connect配置一个server
connect:{
server:{
options:{
// 设置端口号
port:9009,
hostname:'localhost',
livereload:true
}
}
},
// 通过watch实时监听代码变化
watch: {
client: {
//监听的文件
files: ['view/*', 'css/*', 'js/*', 'images/**/*'],
options: {
livereload: true
}
}
}
}); // 加载插件
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch'); // 自定义任务
grunt.registerTask('default', ['connect','watch']); };
ok,到这,grunt就配置完成了,
在cmd中运行:grunt 就可以运行了
出现以上效果就说明成功了。
在chrome中输入:localhost:9009,就会看见我们的项目了:
然后还有剩下的一部分,就是在chrome中安装livereload插件:
在chrome设置 -> 更多工具 -> 扩展程序中
点击获取更多扩展程序,(一般情况下,获取更多扩展程序会被墙的,所以打不开,需要大家自己解决了)然后搜索livereload,安装
安装后,在chrome右上角会有一个这个图标,空心的时候表示没有运行,点击一下后,中间的圆圈会变成实心,这个时候就可以实现自动刷新了。