Grunt 使用

狂风中的少年 提交于 2020-03-16 11:25:55
  • 安装准备

  1. Grunt 以及 Grunt 的插件都是通过 npm 安装的(确保npm是最新版本   npm update -g npm    )。

     在安装之前需要先将Grunt命令行(CLI)安装到全局环境中,   npm install -g grunt-cli   grunt-cli 的职能是调用与 Gruntfile 所在目录中的Grunt。

     在需要构建的项目中配置一份 package.json Gruntfile 文件 配置内容后续内容会阐述。

 

  2.  运行终端将命令行迁到项目的根目录。执行  npm install  命令安装项目依赖的库。执行  grunt  命令。

 

  3.  package.json 应该放置于项目的根目录中,在这个文件中列出项目依赖的 grunt 和 grunt插件 放在 devDependencies 配置段内。 

    创建package.json文件的方式有多种

      *npm init 命令或创建一个基本的package.json 文件。

      *自己写案例,根据需要扩充,提供一个范例:

      

 

  • 安装 Grunt 以及 Grunt 插件

   1.向已经有 package.json 文件中添加 Grunt 和 Grunt插件 最简单的方式是:    npm install <module> --save-dev    命令。此命令安装了<module>,还会自动将其添加到 devDependencies  。

    例如安装 Grunt 最新版本到项目目录中,         npm install grunt --save-dev  

    例如安装 Grunt 插件也可以以同样的方式安装, npm install grunt-contrib-concat--save-dev 

    插件的安装可根据自身项目需求选择安装。

  2. Gruntfile 文件

    Gruntfile.js文件放在项目的根目录中 和 package.json 文件在同一目录层级 。

    Gruntfile.js 由四部分组成,分别是: "wrapper"函数 , 项目与任务配置 , 加载 grunt插件和任务 ,自定义任务。

    提供一个自己写的 Gruntfile.js 案例,再分布阐述 各部分的作用。

   

    *  "wrapper"函数 :所有的 grunt 代码必须放在次函数内:

    *  项目和任务配置: 首先通过 grunt.file.readJSON('package.json')  将存储在package.json文件中的JSON元数据引入到grunt config中。  

      在这个配置对象中存储任意的数据。 在 task (任务)中例如:grunt-contrib-uglify 插件中的uglify 任务要求它的配置被指定在一个同名属性中。

    *  加载 Grunt 插件和任务  要在 package.json 文件中列为 dependency (依赖) 的包,并通过npm install安装之后,

     都可以在Gruntfile中以简单命令的形式使用。

     * 自定义任务:通过定义 default 任务,可以让Grunt默认执行一个或多个任务,注意先后顺序!grunt.registerTask('default', ['concat','uglify']);

 

  以上是 Grunt 安装 配置 使用 的内容小结,以后有扩展会继续补充~ 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 

 

   

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!