摘要:具体实现方法就不多说了,重点是每个模块中的配置对象能够深度合并,合并后传给。有兴趣的同学可以看看我在的这个小项目,可以不关心具体实现,到自己项目中直接使用,兼容了和。
写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提供了很多有用的工具方法,却经常被我们忽略,可以在官网看到。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/87506.html
摘要:但是在使用开发的过程中还是感觉不太顺手,本文将阐述我是如何对进行一步步改造以适应个人和团队开发需求的。所以说,我们如何在保证的设计原则以及项目规范性上,对其进行简化改造,是我这里需要解决的问题。 从Vue换到React+Redux进行开发已经有半年多的时间,总的来说体验是很好的,对于各种逻辑和业务组件的抽象实在是方便的不行,高阶组件,洋葱模型等等给我带来了很多编程思想上的提升。但是在使...
摘要:在讲解之前先回顾一下笔者在项目开发中的工作流变化时代此时工作流大致为结合插件处理视图处理样式等库此时由于依赖少手动引入各种标签结合调试界面时代利用指令服务控制器将逻辑拆分为多个文件利用编译会将分为全局样式和组件样式下载各种依赖此时任需要手动 在讲解 webpack 之前先回顾一下笔者在项目开发中的工作流变化. jquery 时代 此时工作流大致为 jquery 结合插件处理视图 bo...
摘要:所以,打包工具就出现了,它可以帮助做这些繁琐的工作。打包工具介绍仅介绍款主流的打包工具,,,,以发布时间为顺序。它定位是模块打包器,而属于构建工具。而且在其他的打包工具在处理非网页文件比如等基本还是需要借助它来实现。 本文当时写在本地,发现换电脑很不是方便,在这里记录下。 前端的打包工具 打包工具可以更好的管理html,css,javascript,使用可以锦上添花,不使用也没关系...
阅读 2323·2021-10-08 10:04
阅读 1097·2021-09-03 10:40
阅读 1150·2019-08-30 15:53
阅读 3309·2019-08-30 13:13
阅读 2925·2019-08-30 12:55
阅读 2278·2019-08-29 13:21
阅读 1330·2019-08-26 12:12
阅读 2755·2019-08-26 10:37