首页 > 代码库 > 页面livereload width grunt
页面livereload width grunt
step-1. 安装node 环境
step-2. npm install grunt-cli \ grunt
http://www.gruntjs.net/docs/getting-started/
step-3. 创建静态页面文件夹
step-4. 在package.json中配置
1 { 2 "name": "test_connect", 3 "version": "0.0.1", 4 "devDependencies": 5 6 { 7 "grunt-contrib-connect": "~0.6.0", 8 "grunt-contrib-watch": "~0.5.3", 9 "load-grunt-tasks": "~0.3.0"10 }11 }
step-5 在Gruntfile.js 中配置
1 module.exports = function(grunt){ 2 3 require(‘load-grunt-tasks‘)(grunt); //加载所有的任务 4 //require(‘time-grunt‘)(grunt); 如果要使用 time-grunt 插件 5 6 grunt.initConfig({ 7 connect: { 8 options: { 9 port: 9000,10 hostname: ‘192.168.22.100‘, //默认就是这个值,可配置为本机某个 IP,localhost 或域名11 livereload: 35729 //声明给 watch 监听的端口12 },13 14 server: {15 options: {16 open: true, //自动打开网页 http://17 base: [18 ‘build/‘ //主目录19 ]20 }21 }22 },23 24 watch: {25 livereload: {26 options: {27 livereload: ‘<%=connect.options.livereload%>‘ //监听前面声明的端口 3572928 },29 30 files: [ //下面文件的改变就会实时刷新网页31 ‘build/*.html‘,32 ‘build/css/{,*/}*.css‘,33 ‘build/js/{,*/}*.js‘34 ]35 }36 }37 });38 39 grunt.registerTask(‘serve‘, [40 ‘connect:server‘,41 ‘watch‘42 ]);43 }
step-6. 打开cmd, 执行 grunt serve
页面livereload width grunt
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。