我是如何将冗长的Grunt任务拆分的

honhon 发布于2019-08-21 12:13 / 1254人阅读

摘要：具体实现方法就不多说了，重点是每个模块中的配置对象能够深度合并，合并后传给。有兴趣的同学可以看看我在的这个小项目，可以不关心具体实现，到自己项目中直接使用，兼容了和。

写Grunt对于很多JS程序员来说，不像写JS，更像是写一堆配置代码，相信用过Grunt的人都深有体会，就拿一个简答的uglify任务举例：

grunt.initConfig({
  pkg: grunt.file.readJSON("package.json"),
  uglify: {
    task1: {
      src: "src/task1.js",
      dest: "build/task1.min.js"
    },
    task2: {
      src: "src/task2.js",
      dest: "build/task2.min.js"
    }
  }
});

随着项目复杂度提升，任务会越来越多，会有task3，task4...等等，uglify的配置就显得非常冗长，再加上less，coffee等任务，也会有很多个task，最后Gruntfile.js越来越长，越来越难以维护。

这时候就想到，如果能够将每个task拆分出来成为多带带的模块，多带带的js文件，执行grunt的时候再将这些模块合并输出传给grunt.initConfig，每个任务的调理就会清晰很多，Gruntfile.js也不会很长，用一个tasks文件夹来存放每个task模块，目录结构如下：

theProject/
|
|------Gruntfile.js
|------tasks
|        |-task1.js
|        |-task2.js
|        |-task3.js
|

在task1.js中，配置task1对应的grunt任务：

module.exports = function(grunt) {

  // 加载grunt依赖
  grunt.loadNpmTasks("grunt-contrib-uglify");
  grunt.loadNpmTasks("grunt-contrib-less");

  // 注册task1任务
  grunt.registerTask("task1", [
    "uglify:task1",
    "less:task1"
  ]);

  gruntConfig = {
    uglify: {
      task1: {
        src: "src/task1.js",
        dest: "build/task1.min.js"
      }
    },
    less: {
      task1: {
        src: "src/task1.less",
        dest: "build/task1.css"
      }
    }
  };

  return gruntConfig;
};

这样每一个grunt任务就从统一的Gruntfile.js拆分开来，对应一个task模块，接下来就是重写Gruntfile.js，让它能够合并所有任务模块，再配置到grunt.initConfig中去。

具体实现方法就不多说了，重点是每个task模块中的gruntConfig配置对象能够深度合并，合并后传给grunt.initConfig。

有兴趣的同学可以看看我在Github的这个小项目，可以不关心具体实现，clone到自己项目中直接使用，兼容了coffee和js。

当我把它用到工作项目中，写grunt舒服了太多，再也不比辛辛苦苦拖上拖下找代码了。

另外，啰嗦一句，Grunt提供了很多有用的工具方法，却经常被我们忽略，可以在官网看到。

云服务器 GPU云服务器如何将以前的数据库如何将阿里云服务器的IP隐藏起来 php多维数组的拆分报警任务监控的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87506.html

我是如何一步步“改造”redux的

摘要：但是在使用开发的过程中还是感觉不太顺手，本文将阐述我是如何对进行一步步改造以适应个人和团队开发需求的。所以说，我们如何在保证的设计原则以及项目规范性上，对其进行简化改造，是我这里需要解决的问题。从Vue换到React+Redux进行开发已经有半年多的时间，总的来说体验是很好的，对于各种逻辑和业务组件的抽象实在是方便的不行，高阶组件，洋葱模型等等给我带来了很多编程思想上的提升。但是在使...

jemygraw 2019-08-22 17:31 评论0 收藏0
享受 Grunt

摘要：这些任务包括但不限于将源代码编译为二进制文件打包二进制文件运行测试用例发布到线上环境添加文档或发行注释为什么很重要呢，因为它能节省程序员的时间。 Update: 别用 Grunt 了，用 Gulp ！拜拜。（原文发表于我的个人博客 http://frankfang.com/2013/12/29/grunt-is-awesome/ ，如有错误，还请赐教）在生产环境中使用 Gru...

Sike 2019-08-21 12:07 评论0 收藏0
前端构建工具整理

摘要：常见前端构建工具的分类和对比是附带的包管理器，是内置的一个功能，允许在文件里面使用字段定义任务在这里，一个属性对应一段脚本，原理是通过调用去运行脚本命令。前文端技术范围不断发展，前端开发不仅限于直接编写html，css和javascript，Web应用日益庞大，代码也更加庞大，因此许多新的思想（例如模块化和工程化等）和框架（React和Vue等），以及新的语言（Es6 TypeSc...

leo108 2019-08-23 10:53 评论0 收藏0
webpack 使用指南-绪论

摘要：在讲解之前先回顾一下笔者在项目开发中的工作流变化时代此时工作流大致为结合插件处理视图处理样式等库此时由于依赖少手动引入各种标签结合调试界面时代利用指令服务控制器将逻辑拆分为多个文件利用编译会将分为全局样式和组件样式下载各种依赖此时任需要手动在讲解 webpack 之前先回顾一下笔者在项目开发中的工作流变化. jquery 时代此时工作流大致为 jquery 结合插件处理视图 bo...

Nosee 2019-08-21 17:38 评论0 收藏0
Javascript 打包工具

摘要：所以，打包工具就出现了，它可以帮助做这些繁琐的工作。打包工具介绍仅介绍款主流的打包工具，，，，以发布时间为顺序。它定位是模块打包器，而属于构建工具。而且在其他的打包工具在处理非网页文件比如等基本还是需要借助它来实现。本文当时写在本地，发现换电脑很不是方便，在这里记录下。前端的打包工具打包工具可以更好的管理html，css，javascript，使用可以锦上添花，不使用也没关系...

Sleepy 2019-08-23 18:03 评论0 收藏0