Grunt - 前端开发所见即所得

首先要安装全局的grunt-cli

sudo npm install grunt-cli -g

1，项目中初始化npm文件,项目名不要和【关键词】如grunt重复，一直回车即可

npm init

2，安装grunt和connect、watch、livereload

connect插件异常

推荐到github上下载：https://github.com/gruntjs/grunt-contrib-connect

npm install grunt-contrib-connect --save-dev  

npm install grunt --save-dev

npm install grunt-contrib-watch --save-dev

npm install connect-livereload --save-dev

npm install --save-dev serve-static serve-index

也可以将以下代码手动加入到package.json中去，然后在控制台输入npm install

 "devDependencies": {
    "connect-livereload": "^0.5.4",
    "grunt": "^0.4.5",
    "grunt-contrib-connect": "^1.0.1",
    "grunt-contrib-watch": "^1.0.0"　　 "serve-index": "^1.7.3",    "serve-static": "^1.10.2"
  }

3，在当前项目根目录创建并且配置Gruntfile.js

module.exports = function(grunt) {

  // LiveReload的默认端口号，你也可以改成你想要的端口号
  var lrPort = 35729;
  // 使用connect-livereload模块，
  var lrSnippet = require('connect-livereload')({ port: lrPort });
  var serveStatic = require('serve-static');
  var serveIndex = require('serve-index');
  var lrMiddleware = function(connect, options, middlwares) 　{
    return [lrSnippet,serveStatic(options.base[0]),serveIndex(options.base[0])];
  };

  // 项目配置(任务配置)
  grunt.initConfig({
    // 读取我们的项目配置并存储到pkg属性中
    pkg: grunt.file.readJSON('package.json'),
    // 通过connect任务，创建一个静态服务器
    connect: {
      options: {
        // 服务器端口号
        port: 8000,
        // 服务器地址(可以使用主机名localhost，也能使用IP)
        hostname: 'localhost',
        // 物理路径(默认为. 即根目录) 注：使用'.'或'..'为路径的时，可能会返回403 Forbidden. 此时将该值改为相对路径 如：./app
        base: '.',
        open:true
      },
      livereload: {
        options: {
          // 通过LiveReload脚本，让页面重新加载。
          middleware: lrMiddleware
        }
      }
    },
    // 通过watch任务，来监听文件是否有更改
    watch: {
      client: {
        // 我们不需要配置额外的任务，watch任务已经内建LiveReload浏览器刷新的代码片段。
        options: {
          livereload: lrPort
        },
        // '**' 表示包含所有的子目录
        // '*' 表示包含所有的文件
        files: ['app/*.html', 'app/styles/*', 'app/scripts/*', 'app/images/*']
      }
    }
  }); // grunt.initConfig配置完毕

  // 加载插件
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // 自定义任务
  grunt.registerTask('default', ['connect', 'watch']);
};

4,控制台中输入grunt即可