码迷,mamicode.com
首页 > Web开发 > 详细

grunt使用watch和livereload的Gruntfile.js的配置

时间:2014-12-08 12:08:27      阅读:445      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   io   ar   color   os   使用   

  周末在家看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 },
          //所有文件发生改变都执行自动reload files : [
‘**/*‘] } } }); 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的配置

标签:des   style   blog   http   io   ar   color   os   使用   

原文地址:http://www.cnblogs.com/diligenceday/p/4150504.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!