用 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 则浏览该文件，没有索引文件就显示文件目录列表。