一步一步讲解怎么安装并执行Grunt-contrib-watch插件

一步一步讲解如何安装并执行Grunt-contrib-watch插件
我们已经学会了如何配置NodeJS Git Grunt 这章我们将要学习如何使用watch任务

如果还没有学习NodeJS Git Grunt的童鞋们请先阅读以下三章：
NodeJs教程: http://blog.****.net/itpinpai/article/details/48103845
Git教程: http://blog.****.net/itpinpai/article/details/48105445
Grunt教程: http://blog.****.net/itpinpai/article/details/48105541

什么是watch？

它是一个监听Task并执行对应的Task，watch在Gruntfile.js中有一个配置参数.
比如如果我们配置了一个copy的Task，告知watch如果有copy指定的文件修改了，如果监听到那些文件，就立即执行copy Task.

我要找到watch就先访问http://gruntjs.com/plugins 在search的输入框里输入：watch,在下面的列表中就显示出来相关的，我们选择第一个contrib-watch,原因他是我们要找watch.

细心的童鞋们可能发现了，为什么contrib-watch前面会有一个五角星呢？
答案：带五角星的代表是Grunt官网出品的插件Task, by Grunt Team.

不带的是Grunt爱好者提供的，我们也可以开发一个Grunt Task 提交到Grunt plugins 上去，但是前面不会出现五角星的。以后还会讲如何编写及发布一个grunt task。
打开watch：https://www.npmjs.com/package/grunt-contrib-watch

根据官网安装步骤
首先：安装插件：

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

一步一步讲解怎么安装并执行Grunt-contrib-watch插件

下一步：在Gruntfile.js文件中加载Npm插件任务

grunt.loadNpmTasks('grunt-contrib-watch');

下一步：在Gruntfile.js中配置watch，我们在之前学习安装Grunt时用到的grunt-contrib-copy插件的基础上来操作。

 watch: {
	copy: {
		files: '<%=config.app%>/**/*.html',
		tasks: ['copy:dest']
	}
}

配置好后，最后一步：在CMD命令窗口中执行 grunt watch 回车看到如下图说明启动成功了，我们验证一下

一步一步讲解怎么安装并执行Grunt-contrib-watch插件

先打开app中的aa.html文件，如下图：
一步一步讲解怎么安装并执行Grunt-contrib-watch插件

再打开dist中的cc.html文件，如下图：
一步一步讲解怎么安装并执行Grunt-contrib-watch插件

我们在aa.html中添加一句话：“Hello Grunt-contrib-watch” 保存一下。
一步一步讲解怎么安装并执行Grunt-contrib-watch插件

我们再次打开dist中的cc.html 如果也看到了 “Hello Grunt-contrib-watch” 这句话，就说明watch安装成功了。

一步一步讲解怎么安装并执行Grunt-contrib-watch插件

Gruntfile.js

/**
 * Created by Administrator on 2015/8/23.
 */

'use strict'
module.exports = function (grunt) {


  // 计划执行Task所需要的时间
  require('time-grunt')(grunt);

  // 加载Task任务
  //require('load-grunt-tasks')(grunt);

  // 下面二句相当于它require('load-grunt-tasks')(grunt);
  grunt.loadNpmTasks("grunt-contrib-copy");
  grunt.loadNpmTasks("grunt-contrib-clean");
  grunt.loadNpmTasks('grunt-contrib-watch');


  var config = {
    app: "app",
    dist: "dist"
  };

  grunt.initConfig({

    config: config,

    watch: {
      copy: {
        files: '<%=config.app%>/**/*.html',
        tasks: ['copy:dest']
      }
    },

    // Task任务
    copy: {
      // 这是Task里的其中一个Target
      dest: {
        src:  '<%=config.app%>/newFolder/aa.html',
        dest: '<%=config.dist%>/newFolder/cc.html'
      }
    },

    clean: {
      dest: {
        expand: true, // 动态匹配
        src: '<%=config.dist%>/**/**'
      }
    }

  });

  // Task组合任务
  grunt.registerTask("build", "description", function(dist){


    grunt.task.run([
      "copy:dest",
      "clean:dest"
    ]);


  });




};

这里我们只讲了如何安装一个插件并启用它，这里面还有一些其它的配置方式还没有讲到，如果童鞋们想研究更深得，那需要自行去多看一些API或网上的教程（https://www.npmjs.com/package/grunt-contrib-watch），多实践，先讲到这里，谢谢大家！

个人专业水平有限，欢迎大家批评纠正！

一步一步讲解怎么安装并执行Grunt-contrib-watch插件

相关推荐