Zac*_*bey 10 gruntjs livereload grunt-contrib-watch
我正在努力让Grunt的"实时重新加载"能力(如实现grunt-contrib-watch)在我的应用程序中工作.我终于咬紧牙关,试着做一个最小的例子.希望有人可以很容易地注意到缺少的东西.
文件结构:
??? Gruntfile.js
??? package.json
??? index.html
package.json
{
"name": "livereloadTest",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-watch": "~0.5.3"
}
}
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
src: {
files: ['*.html'],
options: { livereload: true }
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
};
index.html
<!doctype html>
<html>
<head><title>Test</title></head>
<body>
<p>....</p>
<script src="//localhost:35729/livereload.js"></script>
</body>
</html>
然后我跑了grunt watch,什么都没吹.但是,没有浏览器窗口自动打开(应该吗？).
当我在http://localhost:35729/我收到这个json 时打开chrome :
{"tinylr":"Welcome","version":"0.0.4"}
并尝试在该端口上的任何其他路径给我
{"error":"not_found","reason":"no such route"}
Kyl*_*ung 17
http://localhost:35729/是实时重新加载服务器的URL.它仅用于管理实时重新加载,而不是为您的实际网站提供服务.
通常,人们会使用grunt-contrib-connect来为grunt提供静态站点.然后转到localhost:8000或您将其配置为驻留的任何位置来查看其站点.但根据您的需要,它也可能是apache,nginx等服务文件.
livereloadgrunt-contrib-connect上还有一个选项.这只会将<script src="//localhost:35729/livereload.js"></script>标记注入HTML,而不是其他内容.
这是一个非常简单的方法来设置它.只需确保安装了插件grunt-contrib-watch和grunt-contrib-connect插件即可.这假设您的Gruntfile.js位于项目的根目录中.还要确保<script src="//localhost:35729/livereload.js"></script>在关闭正文标记之前添加</body>并且您有一个index文件.当您输入grunt server终端时http://localhost:9000,您应该全部设置.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
options: {
livereload: true,
},
css: {
files: ['css/**/*.css'],
},
js: {
files: ['js/**/*.js'],
},
html: {
files: ['*.html'],
}
},
connect: {
server: {
options: {
port: 9000,
base: '.',
hostname: '0.0.0.0',
protocol: 'http',
livereload: true,
open: true,
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('server', ['connect','watch']);
};
| 归档时间： |
|
| 查看次数： |
14359 次 |
| 最近记录： |