我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

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

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

苏南大叔描述一下的话,就是前端中的那些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?gruntfile.js的功用介绍 - grunt-cli
如何安装打包工具grunt?gruntfile.js的功用介绍(图4-2)

初始化grunt项目

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

npm init

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

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

npm install grunt --save-dev

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

安装好grunt后,敲grunt --version会显示grunt-cligrunt的版本号。

grunt --version

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

编辑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系列文章。

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

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

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