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

日期:2019-10-17编辑作者:www.6165.com

  周天在家看angularJS, 用grunt的livereload的机关刷新, 搞了大半天, 未来把铺排贴出来, 免得现在忘记了, 只要按照布置一步步弄是尚未难题的;

grunt使用watch和livereload的Gruntfile.js的配置。  开首的备选的条件设置是:

  (1):nodeJS,去官方网址下载(grunt使用watch和livereload的Gruntfile.js的配置。hrefgrunt使用watch和livereload的Gruntfile.js的配置。); 

  (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格式文件都会自动刷新;

;

本文由新金沙国际手机版发布于www.6165.com,转载请注明出处:grunt使用watch和livereload的Gruntfile.js的配置

关键词:

常用正则表达式大全 (转)

网上找到的常用正则表达式,留着以后可能用得上,正则表达式实在是不好写,只好拿来主义了,在Delphi中没有自己...

详细>>

看看我大厦门的通讯录,有了它走遍厦门不用愁

湖里区教育局 0592-5722657 麦当劳400-851-7517 5703107(高招、成招) 集美服务大旨受理点0592-6195527 7703884 公安机关和人民武...

详细>>

www.6165.comCuteEditor6.0使用配置心得体会

首先,去下载CuteEditor。注意哈,那些并非官方网站。貌似是胸口痛友自身建的汉语站点,然而有中文破解版的6.0下载...

详细>>

试用了一下Sqlite,总结和整理一下参考资料

SQLite简单教程 试用了一下Sqlite,总结和整理一下参考资料。入门使用 试用了一下Sqlite,总结和整理一下参考资料。1,关...

详细>>