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

苏南大叔继续描述grunt自动化任务的基本使用方法,主体内容是:gruntgrunt-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.jswathc字段

配置watch字段是重点。结合前几篇文章中,关于cssjs的处理配置情况。苏南大叔给出下面的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,来合并压缩cssjs文件。
  • loadNpmTasks这个grunt-contrib-watch插件。
  • watch任务,注册到default任务里面。

如何使用grunt的grunt-contrib-watch插件,监听文件变化 - grunt_watch
如何使用grunt的grunt-contrib-watch插件,监听文件变化(图2-2)

使用方式

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

相关文章

总结

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

更多grunt经验文章,请点击:

 【源码】代码片段及相关软件点此获取

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

本站的忠实读者小伙伴,正在阅读下面这些文章:

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
欢迎指正文字或逻辑错误,将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!