我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

苏南大叔继续描述grunt自动化任务的基本使用方法，主体内容是：grunt的grunt-contrib-watch插件。这款grunt-contrib-watch插件的作用就是：在文件发生改动的时候，就会自动触发grunt任务，自动执行文件压缩合并等操作。

grunt-contrib-watch插件，使用起来非常简单，配置Gruntfile.js文件就可以了。

苏南大叔：如何使用grunt的grunt-contrib-watch插件，监听文件变化 - grunt
如何使用grunt的grunt-contrib-watch插件，监听文件变化（图2-1）

安装grunt-contrib-watch

npm install grunt-contrib-watch --save

还是那句话，--save或者--save-dev，看您自己的实际情况说话。

配置Gruntfile.js的watch字段

配置watch字段是重点。结合前几篇文章中，关于css和js的处理配置情况。苏南大叔给出下面的grunt-contrib-watch插件的配置。

module.exports = function (grunt) {
    pkg: grunt.file.readJSON('package.json');
    grunt.initConfig({
        uglify: {
          // ...
        },
        concat: {
          // ...
        },
        cssmin: {
          // ...
        },
        watch: {
            files: ['js/*.js', 'css/*css'],
            tasks: ['uglify', 'cssmin','concat']
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ['uglify', 'concat','cssmin','watch']);
}

大家可以放眼到配置中的几个watch字样。

  • 监控files里面的文件，有变动的时候，就执行tasks，来合并压缩css和js文件。
  • 要loadNpmTasks这个grunt-contrib-watch插件。
  • 把watch任务，注册到default任务里面。

苏南大叔：如何使用grunt的grunt-contrib-watch插件，监听文件变化 - grunt_watch
如何使用grunt的grunt-contrib-watch插件，监听文件变化（图2-2）

使用方式

使用方式也非常容易，就是直接在Gruntfile.js所在的目录，执行grunt命令即可。和前两篇文章里面不同的是：本次只需执行一次grunt命令即可。
文件修改后，自动执行js和css的压缩合并任务，并不需要再次执行gurnt命令。

相关文章

总结

grunt的基本使用，到目前为止，已经描述了3篇文章。grunt的日常基本使用就已经足够了。不排除，未来会补充grunt其他高级配置的可能性。

更多grunt经验文章，请点击：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   grunt