Watch is an essential component of any Grunt build, and you will find yourself using it in almost every project.

How to install?


1. Install grunt first if you don't have yet. Check the first article for Grunt.

2. Install grunt-contrib-watch

npm install grunt-contrib-watch

What is watch used for?


A simple example is that, it can watch a file if the file changed then trigger the task to run.

How to use?


You have a log.txt file, and you want to watch this file.

1. load npm task:

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

2. set up watch:

    grunt.initConfig({
watch: {
files: ['log.txt'],
tasks: ['pat']
}
});

3. add task:

    grunt.registerTask('pat', function(){
grunt.log.writeln('I am watching you!');
});

4. Start watch:

#In cmd

$ grunt watch

File the file is modified:

[Grunt] Watch && grunt-contrib-watch的更多相关文章

  1. 杂项-Grunt:grunt build 打包和常见错误

    ylbtech-杂项-Grunt:grunt build 打包和常见错误 1. 安装.打包返回顶部 1. npm WARN deprecated coffee-script@: CoffeeScrip ...

  2. 【grunt】grunt 基础学习

    1. 干啥的呢? 项目打包管理,用处有 1)可用于压缩合并前端文件,包括css/js , 2)可用于管理发布文件与开发文件,3)可用于自动编译less 文件 2. 常用的东西有哪些呢? 常用的插件有 ...

  3. 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)

    用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...

  4. grunt api 文档

    Grunt docs Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. 安装 grunt-cli npm install grunt-cli -g 注 ...

  5. 前端工程化系列[03]-Grunt构建工具的运转机制

    在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核 ...

  6. grunt配置任务

    这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...

  7. 快速开发Grunt插件----压缩js模板

    前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...

  8. 应用Grunt自动化地优化你的项目前端

    在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...

  9. Grunt基本使用-V1.0

    浅语:grunt中文网:http://www.gruntjs.net/ 第一步:Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js.然后开始安装 Grunt. 实际上,安装的 ...

  10. 前端打包构建工具grunt快速入门(大篇幅完整版)

    打包的目的和意义就不用叙述了直接上干货 http://www.gruntjs.net/getting-started里面的教程也太简单了,需要下一番功夫去研究才行.本文将grunt打包的常用方法都用实 ...

随机推荐

  1. 在phpWeChat中如何定义一个授权登录(获取昵称)的链接

    在phpWeChat中如何定义一个授权登录(获取昵称)的超链接?使其点击后出现如下效果? 由于集成了这个功能,其实这个需要是很简单的. 假如您想在授权后跳转到http://www.baidu.com/ ...

  2. Linux中用户与组相关配置文件(整理)

    用户与组信息存放位置 说明 注释 /etc/passwd 存放用户基本信息 记录了每个用户的一些基本属性,并对所有用户可读,每一行记录对应一个用户,属性之间通过冒号分隔. 每一个行6个冒号,7个属性. ...

  3. 【BZOJ 2839】 2839: 集合计数 (容斥原理)

    2839: 集合计数 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 399  Solved: 217 Description 一个有N个元素的集合有2 ...

  4. [POJ1625]Censored!(AC自动机+DP+高精度)

    Censored! Time Limit: 5000MS   Memory Limit: 10000K Total Submissions: 10824   Accepted: 2966 Descri ...

  5. Java并发(八):AbstractQueuedSynchronizer

    先做总结: 1.AbstractQueuedSynchronizer是什么? AbstractQueuedSynchronizer(AQS)这个抽象类,是Java并发包 java.util.concu ...

  6. [转]Fragment跳转至Activity或者Fragment

    1.Fragment跳转至Activity 从fragment中跳转和从activity中跳转类似,只不过你要先通过fragment的getActivity方法获取到显示这个fragment的acti ...

  7. Codeforces Beta Round #7 C. Line Exgcd

    C. Line 题目连接: http://www.codeforces.com/contest/7/problem/C Description A line on the plane is descr ...

  8. 厄拉多塞筛法和普通方法求素数表(python实现)

    厄拉多赛筛法(sieve of Eratosthenes): 想要得到一个不大于N的数所有素数,可以先找到不超过根号N的所有素数,设2 = p1 < p2 < ......<pk ≤ ...

  9. MongoDB基础学习(一) MongoDB概念解析

    .基础概念 SQL术语/概念 MongoDB术语/概念 说明 database database 数据库 table collection 数据表/集合 row document 数据记录行/文档 c ...

  10. 升压转换器 (Boost)

    升压转换器 (Boost) 需要将输入电压转换为较高的输出电压时,升压转换器 (Boost)是唯一的选择. 升压转换器透过内部 MOSFET 对电压充电来达成升压输出的目的,而当 MOSFET 关闭时 ...