如何安装打包工具grunt？gruntfile.js的功用介绍

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

苏南大叔继续说说前端文件的那些小事情，本文的话题是：如何安装使用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

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

npm install grunt-cli -g

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

初始化grunt项目

首先，苏南大叔要先选定一个目录。初始化为一个npm项目。这个过程是非常的容易，就是执行下面的命令，然后疯狂回车即可。

npm init

然后，苏南大叔进入到该目录下面，执行下面的命令，安装一个本地的grunt包，才算真正安装好grunt。

npm install grunt --save-dev

至于后面的参数--save-dev还是--save。这点上，大家根据实际情况选择吧，不解释。

安装好grunt后，敲grunt --version会显示grunt-cli和grunt的版本号。

grunt --version

编辑grunt的配置文件

在当前目录下面，我们新建一个Gruntfile.js文件即可。这就是配置文件的核心所在了。如果没有这个配置文件，会报错如下：

A valid Gruntfile could not be found. Please see the getting started guide for
more information on how to configure grunt: http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.

当然，这个核心配置文件Gruntfile.js，有好几种写法。苏南大叔暂时没有想法去探讨其高级写法。在接下来的几篇文章中，就只介绍几种常用的的配置方法。

这个文件的其中一个基本套路，是这样的：

module.exports = function (grunt) {
    pkg: grunt.file.readJSON('package.json'),
    grunt.initConfig({
        // 这里写任务细节
    });
    // 这里写任务的执行
    // grunt.loadNpmTasks('grunt-contrib-concat');
    // grunt.registerTask('default', ['uglify', 'concat']);
}

执行

执行方式非常简单，在项目根目录（gruntfile.js所在目录）下面，执行命令即可。

grunt

结论

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

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

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

• https://newsn.net/tag/grunt/

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