一步一步讲解如何安装并执行Grunt-contrib-watch插件

标签：

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

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

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

我们再次打开dist中的cc.html 如果也看到了 “Hello Grunt-contrib-watch” 这句话，就说明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插件

标签：

原文地址：http://blog.csdn.net/itpinpai/article/details/48207493