用 grunt-contrib-connect 构建实时预览开发环境

本文基本是参照着 用Grunt与livereload构建实时预览的开发环境 实操了一遍，直接实现能实时预览文件列表，内容页面。不用刷新页面了，这比以前开发网页程序都简单。

这里要用到的 Grunt 插件有

grunt-contrib-connect , 用来充当一个静态文件服务器，本身集成了 livereload 功能

grunt-contrib-watch , 监视文件的改变，然后执行指定任务，这里用来刷新 grunt serve 打开的页面

以下是个辅助的插件

load-grunt-tasks , 省事的插件，有了这个可以不用写一堆的 grunt.loadNpmTasks('xxx') ，再多的任务只需要写一个 require('load-grunt-tasks')(grunt) 。

参考的文档中提到了 time-grunt 插件，可用来显示每一个任务所花的时间和百分比，由于此示例中基本就 watch 任务占了百分百的时间。

下面是 Grunt 项目的两个基本的文件

1. package.json

{

"name": "test_connect",

"version": "0.0.1",

"devDependencies": {

"grunt-contrib-connect": "~0.6.0",

"grunt-contrib-watch": "~0.5.3",

"load-grunt-tasks": "~0.3.0"

}

}

运行 npm install 下载安装上面的依赖

2. Gruntfile.js

module.exports = function(grunt){

require('load-grunt-tasks')(grunt); //加载所有的任务

//require('time-grunt')(grunt); 如果要使用 time-grunt 插件

grunt.initConfig({

connect: {

options: {

port: 9000,

hostname: '*', //默认就是这个值，可配置为本机某个 IP，localhost 或域名

livereload: 35729 //声明给 watch 监听的端口

},

server: {

options: {

open: true, //自动打开网页 http://
base: [

'app' //主目录

]

}

}

},

watch: {

livereload: {

options: {

livereload: '<%=connect.options.livereload%>' //监听前面声明的端口 35729

},

files: [ //下面文件的改变就会实时刷新网页

'app/*.html',

'app/style/{,*/}*.css',

'app/scripts/{,*/}*.js',

'app/images/{,*/}*.{png,jpg}'

]

}

}

});

grunt.registerTask('serve', [

'connect:server',

'watch'

]);

}

现在我们配置好了一个静态文件 Web 服务器，运行命令

grunt serve

会自动打开浏览器访问 http://0.0.0.0:9000, 然后有个 watch 一直在监听文件的改变。如果 app 目录下有 index.html 则浏览该文件，没有索引文件就显示文件目录列表。