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

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

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

Grunt是一套前端自动化构建工具,可以帮助我们简化开发中需要反复处理的任务,甚至可以实现自动构建等功能。

Grunt拥有数量庞大的插件,这些插件能够帮助我们处理开发中遇到的绝大多数构建任务,比如代码的预编译、压缩、代码检查、单元测试等。但为什么在终端输入Grunt相关命令,就能够执行对应的任务,Grunt到底是怎么运转的?这些知识对于深入研究Grunt非常重要,下面我们从Grunt运转的组件和运转机制两方面来展开讨论。

2.1 Grunt的核心组件

node和npm

Grunt项目基于Node.js,Grunt和相关的插件都通过 npm 安装并管理。

Grunt-cli

Grunt命令行用于调用与Gruntfile文件在同一目录中的 Grunt模块,通过-g参数把Grunt命令行安装到全局环境中,这样的话在所有文件目录中都可以调用grunt相关的命令。

在命令行中运行Grunt 相关命令时(比如 $grunt default),内部会根据node提供的require系统查找来当前目录中安装的 Grunt,如果找到那么加载,并把加载的grunt作为参数传递到Gruntfile文件中,然后执行指定的任务。

Task

Task就是任务的意思,grunt支持自定义任务,也支持使用现成的插件任务。比如向控制台输出一句问候这可以被认为是一个Task,对所有的js文件进行压缩这也是一个Task,通常任务(Task)都是可配置的。

Grunt本地依赖

安装了grunt命令行不等于就安装了grunt,这只是让我们拥有了在命令行中使用grunt相关命令的能力,对于每个需要使用grunt的工程,仍然需要为其配置grunt本地依赖。

Grunt插件(Plugins)

Grunt插件是一系列能够用于不同项目的可配置任务的集合。Grunt插件通常以npm包的形式发布。Grunt官网的插件列表列出了所有可用的Grunt插件,截止当前的插件数量为6,393个,其中带有contrib前缀的插件由Grunt官方开发和维护。

package.json文件

package.json文件用于被npm存储项目的元数据,以便将此项目发布为npm模块。我们可以在此文件中列出项目依赖的Grunt和Grunt插件,保存在devDependencies(开发依赖)配置字段内,我们可以通过$ npm install命令来加载该文件中的所有依赖项。

Gruntfile.js文件

Gruntfile文件是Grunt项目中最核心的文件,该文件同package.json文件一起存放在项目的根目录中,主要用来配置或定义任务(task)并加载Grunt插件。标准的grunt项目中必须拥有package.json和Gruntfile这两个文件。

node_modules文件夹

node_modules文件目录存放着从远程仓库下载的grunt以及所有相关的grunt插件。

2.2 Grunt的运转机制

上面给出了Grunt项目中各主要组件的关系图示,是根据个人的理解绘制的,所以可能并非完全准确,但基本上已经能够说清楚Grunt的运转机制了。

我们在使用Grunt作为项目构建工具的时候,所做的事情大概可以分成三块:准备、配置、执行。

   ① 准备阶段   

准备阶段主要进行以下操作

 node环境的安装、npm的安装(在安装node的时候默认安装)

 grunt-cli命令行的安装(通过$ npm install -g grunt-cli命令)

 创建package.json文件(手动创建或通过$ npm init命令交互式创建)

 配置grunt本地依赖(通过$ npm install grunt --save-dev下载grunt到项目)

 安装需要的grunt插件(通过$ npm install grunt-contrib-xx --save-dev命令把需要的插件下载到node_modules目录)

   ② 配置阶段   

配置阶段主要就是创建和编辑Gruntfile文件,在该文件中接收grunt参数并配置Task,注册Task。Task简单说就是任务的意思,我们可以自定义任务,也可以直接使用现成的、一些其他优秀开发者定义好并打包为node模块发布的任务(其实就是grunt插件)。

一般来说,我们总是通过grunt为我们提供的grunt.initConfig方法来对Task(插件)进行配置,如果是该Task是Grunt插件那么还需要先从node_modules目录中加载。

如果对多个Task的执行有指定的顺序或者依赖关系,那么我们可以通过grunt.registerTask方法来注册Task

   ③ 执行阶段   

在执行阶段,通过在命令行中输入$ grunt task名称的方式来执行指定的任务。

执行Task的时候,可以单个执行,例如:

$ grunt taskName1
$ grunt taskName2

也可以用单条命令执行多个Task,每个Task都将按照参数的传入顺序依次执行,例如:

$ grunt taskName1 taskName2

在使用构建工具的时候,这些Task具体怎么执行,执行的顺序等并非是固定不变的,需要结合特定的需求来特殊处理。如果总是有一组Task需要按顺序执行,一般可以使用grunt.registerTask方法来给这组Task设置个别名,这一组的Task以数组的形式传递。

例如:要依次执行js文件的合并、语法检查、代码压缩、css代码压缩等任务,则配置好相关Task后可以像下面这样来设置。

grunt.registerTask( "customTask",["concat","jshint","uglify","cssmin"]);

要执行这组任务的时候,直接执行$ grunt customTask命令即可。


目录
相关文章
|
12天前
|
存储 前端开发 JavaScript
第六章(原理篇) 微前端间的通信机制
第六章(原理篇) 微前端间的通信机制
|
14天前
|
资源调度 前端开发 测试技术
前端工程化实践:从零搭建现代化项目构建流程
【4月更文挑战第6天】本文介绍了前端工程化的概念和重要性,包括模块化、自动化、规范化和CI/CD。接着,讨论了选择合适的工具链,如包管理器、构建工具和测试框架。然后,详细阐述了如何从零开始搭建一个基于React的现代化项目构建流程,涉及初始化、代码规范、测试、CSS处理、代码分割和CI/CD配置。最后,提到了持续优化与迭代的方向,如性能优化、类型检查和微前端。通过这样的实践,开发者可以提升开发效率和代码质量,为项目长远发展奠定基础。
47 0
|
14天前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
16 0
|
11天前
|
前端开发 JavaScript API
前端工程化-babel、corejs、postcss
前端工程化-babel、corejs、postcss
21 0
|
12天前
|
前端开发 JavaScript Java
npm与Maven:前端与后端构建工具深度对比学习
npm与Maven:前端与后端构建工具深度对比学习
|
12天前
|
前端开发
前端路由机制实现hash-history
前端路由机制实现hash-history
20 1
|
14天前
|
开发框架 前端开发 Android开发
【Flutter 前端技术开发专栏】Flutter 与原生模块通信机制
【4月更文挑战第30天】本文探讨了Flutter作为跨平台开发框架与原生Android和iOS交互的必要性,主要通过方法调用和事件传递实现。文中详细介绍了Flutter与Android/iOS的通信方式,数据传输(包括基本和复杂类型),性能优化,错误处理以及实际应用案例。理解并掌握这一通信机制对开发高质量移动应用至关重要,未来有望随着技术发展得到进一步优化。
【Flutter 前端技术开发专栏】Flutter 与原生模块通信机制
|
14天前
|
前端开发 JavaScript 开发者
【专栏】前端工程化的重要性,强调构建工具在其中的角色,如Webpack和Rollup
【4月更文挑战第27天】本文探讨了前端工程化的重要性,强调构建工具在其中的角色,如Webpack和Rollup。Webpack以其灵活性和插件系统适用于复杂SPA项目,建议开发者理解其核心概念并优化性能。Rollup则专注于JavaScript模块打包,生成更小、更快的代码,适合小型至中型项目和库创建,以其Tree-shaking技术减小代码体积。开发者应根据项目需求、团队技术和生态选择合适工具,掌握核心原理以提升开发效率和质量。
|
14天前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
45 1
|
14天前
|
监控 前端开发 小程序
微信小程序全栈开发中的前端工程化实践
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的前端工程化实践,旨在提升开发效率和体验。重点包括代码规范与架构设计(模块化、组件化、MVC模式)、自动化构建与部署(使用Webpack、Git和CI工具)、前端框架与库(如Vue.js、React、Angular)以及性能优化策略(代码、资源优化和性能监控)。通过这些实践,开发者能更高效地掌握小程序开发,打造高质量应用。