grunt的安装与介绍

 2018/01/26   Share

Grunt安装及使用介绍

Grunt都能做什么，自动化，减少像压缩，编译，单元测试，代码效验，打包，管理，优化，多余的东西干掉，这些重复且无业务关联的工作，我们做的越少，就可以留出更多的精力，来专注与我们的业务代码，那为什么我们选择grunt呢，是因为grunt的生态实在是在强大了，只要你能想到的任务，基本上都可以找到grunt的相关的自动化插件，并且grunt的生态一直在持续增长，我们不能给grunt全世界，但是grunt的全世界都给了我们

首先我们先创建一个文件夹名字叫grunt-test

官方站点：http://gruntjs.com/

然后进入到这个文件夹，在这个文件夹中执行

npm init

然后会提示你是否会创建这一个文件，然后会让我们输入一些东西，比如，版本啊，描述啊，作者啊，关键词啊，等等，我们就默认就行了，最后我们目录下就会生成一个package.json的文件

{
  "name": "grunt-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

这样就生成了一个package.json的文件，现在有这个文件了，我们需要在安装执行grunt需要的命令行，就是

npm i -g grunt-cli 注意Mac OS linux 命令前面需要加sudo的语句

然后我们执行一段命令,把真正的grunt安装到我们的项目里面来

$ npm i grunt –save-dev

安装完之后你会发现你项目的目录里会多了一个文件，叫node_modules的文件,里面有很多第三方的库，来支持grunt的运转，然后回到你的package.json,文件里会发现多了点东西

{
  "name": "grunt-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.1"
  }
}

多了依赖，就是我们项目用的’grunt’:’^1.0.1’,然后我们在执行grunt

$ grunt

不能找到你的Gruntfile

Fatal error: Unable to find Gruntfile.

又报错了，说找不到你的Gruntfile文件，Gruntfile文件是什么呢，就是grunt写任务的文件夹，grunt所有的配置都在这个文件里面写，那我们就在项目的根目录创建一个Gruntfile.js文件，创建完之后现在项目的结构是这样的

|--grunt-test
|--|--node_modules
|--|--Gruntfile.js
|--|--package.json
|--|--package-lock.json

到现在为止我们的grunt就算是安装完了，然后在执行命令

$ grunt

会提示这一句话

1
2
3

Warning: Task "default" not found. Use --force to continue.

Aborted due to warnings.

说没有找到”default”的Task,那么怎么实现Task的执行任务呢

首先我们今天就来讲讲js文件压缩，和css文件合并压缩，先准备一个js文件，和css文件，里面有一个你需要压缩的js文件，和css文件，在准备一个空文件夹名字叫做dist文件夹，这个文件夹是用来装你压缩过的文件，让我们看看现在的目录结构是什么样子的

Alt text

现在我们开始配置我们Gruntfile文件里的内容了，内容是这样的:

//这个约定了Grunt所有插件在这里配置。
 module.exports = function (grunt) {//这是Node.js的典型写法，使用exports公开API
     grunt.initConfig({  //定义各种模块的参数，每一个成员项对应一个同名模块,项目配置以及任务配置。
         pkg:grunt.file.readJSON('package.json'),//获取依赖关系提供你需要的插件的版本和名称
         uglify:{//压缩js代码
             options: {//这里是uglify任务的配置信息
                 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
             },
             build:{  //源文件
                 files: {
                     'dist/index.min.js':'js/index.js'
                 }
             }
         },
         cssmin:{//Css压缩合并
             options:{
                 // keepSpecialComments:0
             },
             compress:{
                 files:{
                     'dist/default.min.css':[
                         'css/saibaiwei.css',
                         'css/saibaiwei1.css'
                     ]
                 }
             }
         }
     });
     grunt.loadNpmTasks('grunt-contrib-uglify');//告诉grunt我们使用的模块
     grunt.loadNpmTasks('grunt-contrib-cssmin');
     grunt.registerTask('yasuo',['uglify','cssmin'])//定义具体的任务。
     // 第一个参数为任务名，第二个参数是一个数组， 表示该任务需要依次使用的模块。
 };

好了朋友们现在配置文件已经写好了，那我们来执行任务吧，首先我们应该安装js压缩，还有css压缩合并需要的插件

js压缩插件

$ npm i grunt-contrib-uglify

css压缩合并插件

$ npm i grunt-contrib-cssmin

安装完之后我们就可以执行了，我们需要用grunt命令来执行 grunt.registerTask('yasuo',['uglify','cssmin'])里的第一个参数

$ grunt yasuo

命令执行之后你的dist文件里会多出两个压缩的文件，让我们来看看

Alt text

总结：

grunt是最早的，打包工工具，现在有很多打包工具的，比如gulp,webpack，这些都是前端是实用的打包工具，但是随着这些打包工具的出现，grunt也大不如以前了，grunt相当于打包的鼻祖了

1.其实grunt配置很简单，Gruntfile文件是js格式的，比较贴近前端的知识

2.Grunt还有很多插件等着我们去使用

3.每个人的具体需求不一样，可以按自己的习惯合理配置，组合成最适合自己项目的自动化工作流。

CATALOG

1. Grunt安装及使用介绍
1. 1.1. 总结：

