苏南大叔继续说说前端文件的那些小事情,本文的话题是:如何安装使用grunt,以及如何认识看待grunt的配置文件gruntfile.js。说起grunt,可能有人会问,grunt是做什么用的?可以用grunt做什么事情?grunt打包到底是怎么回事?

Grunt是一款基于任务的JavaScript工程命令行构建工具。Grunt生态系统非常庞大,并且一直在增长。由于拥有数量庞大的插件可供选择,因此,你可以利用Grunt自动完成很多事情,并且花费最少的代价。

苏南大叔描述一下的话,就是前端中的那些js/css/html文件的一个管家。grunt的角色定位,和曾经描述过的fis3还是蛮相似的。

苏南大叔的测试环境如下:node 8.11.3,npm 5.6.0,grunt-cli 1.3.1

苏南大叔:如何安装打包工具grunt?gruntfile.js的功用介绍 - 本文基本环境
如何安装打包工具grunt?gruntfile.js的功用介绍(图4-1)

安装grunt

安装grunt的前提是安装了node环境,苏南大叔要执行的第一步,就是全局安装grunt-cli

npm install grunt-cli -g

安装好grunt-cli之后,并不是就可以顺利使用grunt了。如果你强行执行grunt的话,会报错的。

苏南大叔:如何安装打包工具grunt?gruntfile.js的功用介绍 - grunt-cli
如何安装打包工具grunt?gruntfile.js的功用介绍(图4-2)

结论

grunt是用于处理基础的静态文件部分的。一般用来做文件打包用途。

这里苏南大叔说明一下,可能会出现这样的情况:node项目和其它语言(比如php)的项目代码混杂出现。所以,大家在建立grunt项目的时候,如果您的洁癖比较严重,那么最好和原有的代码放到不同的文件夹下面,或者放置到一个只存在静态资源的文件夹位置。

感谢您继续关注苏南大叔的后续grunt系列文章。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

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

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

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