虽然现在grunt的用的越来越少了,但是插件数量还是相当多的,另外grunt和gulp的使用相当相似;

grunt需要安装node和npm

验证node是否安装:node -v

验证npm是否安装:npm -v

下面是具体的使用方法:

1》安装全局的配置环境 npm install -g grunt-cli

2》安装grunt 在命令行中运行命令 npm install grunt --save-dev (这样输入的是每个项目都必须重新安装grunt) 这里如果想使用全局的就加-g ,如果只是本次项目用grunt,就不用加-g全局

2》准备两个文件

a> Gruntfile.js 文件 ---》文件书写按照对应要使用的模块的内容来写

主任务和模块名称一致

子任务 / src: 需要压缩的文件路径
dest :压缩后的路径和名称,没有路径会创建
只压缩代码,不修改参数的名字 options/ mangle/ Default:{} 默认是true 混淆参数 false 是不混淆

运行命令 grunt uglify

b>配置任务 package.json 文件 关于项目的配置信息文件 记录项目的详细信息

注意这步必须在安装完grunt后操作

编辑 package.json 文件有两种方法:
①在官网找一个package.json文件复制到编辑器中,进行修改并保存到你操作grunt的文件夹中;
②用nodejs命令行创建一个package.json文件:
在你操作grunt的文件夹中运行命令行,输入npm init 回车,然后会提示你输入一系列信息内容(每次输入信息完成后按回车),信息如下:

name: (grunt)
version: (1.0.0)
description:
entry point: (Gruntfile.js)
test command:
git repository:
keywords:
author:
license: (ISC)

完成后会显示所有你输入过的信息并提示你填写yes
信息如下:

About to write to D:\grunt\package.json:

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

Is this ok? (yes) yes

执行到此步骤环境配置完成,剩下的就是挑选你需要的模块了

3》下载模块

在官网找到你需要的模块内容

官网--插件列表(头部)--选择需要的插件
注意:
官方维护的都带星号
不带星号的都是第三方的插件

使用插件的步骤:
⑴下载插件(模块)
⑵配置模块

每个插件的详解中都有如何下载该模块,首先在你操作grunt的文件夹中运行命令行,然后执行对应下载插件的命令,然后按照插件的说明配置Gruntfile.js文件(注意Gruntfile.js 文件名使唯一的每次只能修改内容)

转载请注明‘转载于Jason齐齐的博客http://www.cnblogs.com/jasonwang2y60/’

grunt的使用方法,环境配置和插件安装的更多相关文章

  1. python的开发环境配置-Eclipse-PyDev插件安装

    安装PyDev插件的两种安装方法: 1.百度搜索PyDev 2.4.0.zip,下载后解压,得到Plugins和Feature文件夹,复制两文件夹到Eclipse目录,覆盖即可. 插件的版本要对应py ...

  2. Sublime text 3搭建Python开发环境及常用插件安装 转载

    Sublime text 3搭建Python开发环境及常用插件安装 一.环境准备 1.官方网站地址 2.Windows 10 3.Sublime Text 3 + 官网购买license(Just a ...

  3. win2008 r2 服务器php+mysql+sqlserver2008运行环境配置(从安装、优化、安全等)

    这篇文章主要介绍了win2008 r2 服务器php+mysql+sqlserver2008运行环境配置(从安装.优化.安全等),需要的朋友可以参考下 win2008 r2 安装 http://www ...

  4. JDK和环境配置,eclipse安装与使用

    本博客部分参照https://blog.csdn.net/PGY0000/article/details/79256720 (记住要尊重别人的劳动产品) 原博客给的链接和后面的安装过程有点不一样,不能 ...

  5. Eclipse开发环境配置,打磨Eclipse,安装插件(适用3.4,3.5,3.6,3.7)

    转载自:http://elf8848.iteye.com/blog/354035 打磨Eclipse -- 磨刀不误砍柴工 -------------------------------------- ...

  6. Sublime text 3搭建Python开发环境及常用插件安装

    参考  https://www.cnblogs.com/honkly/p/6599642.html 一.环境准备 1.官方网站地址 2.Windows 10 3.Sublime Text 3 + 官网 ...

  7. eclipse环境搭建(插件安装)

    转自:http://www.iteye.com/topic/982182 使用eclipse真的有年头了,相信java程序员没有不知道它的,最近在给团队中新来的应届生做指导,专门讲解了一下Eclips ...

  8. vim配置及插件安装笔记

    1. 首先打开vim的配置文件vimrc,并加入以下常用的配置: cd ~ mkdir .vim vim .vimrc " 设置当文件被改动时自动载入 set autoread " ...

  9. anadonca环境配置和模块安装

    1.最方便的python环境配置: 下载anaconda即可,自带spyder,集成科学计算的库,自带pip,不用折腾. 想用sublime编写python并运行的话,需要自己配置编译环境,并下载插件 ...

随机推荐

  1. 浅谈PopupWindow弹出菜单

    实现将一个View显示在某一位置,而且是浮于当前窗口 首先要有一个要显示的view的布局,可以是任意View,包括ViewGroup <?xml version="1.0" ...

  2. Gnome排序算法

    Gnome排序(地精排序),起初由Hamid Sarbazi-Azad 于2000年提出,并被称为stupid排序,后来被Dick Grune描述并命名为“地精排序”,作为一个排序算法,和插入排序类似 ...

  3. iOS设计模式之命令模式

    命令模式 基本理解 命令模式(Command),将一个请求封装为一个对象,从而使你可用不同的请求对客户端进行参数化:对请求队列或记录请求日志,以及支持客可撤离的操作. 苹果的Target-Action ...

  4. iOS- 利用AFNetworking3.0+(最新AFN) - 实现文件断点下载

    官方建议AFN的使用方法   0.导入框架准备工作 •1. 将AFNetworking3.0+框架程序拖拽进项目   •2. 或使用Cocopod 导入AFNetworking3.0+   •3.   ...

  5. SAM4E单片机之旅——23、在AS6(GCC)中使用FPU

    浮点单元(Floating Point Unit,FPU),是用于处理浮点数运算的单元. 为使用FPU,除了需要启用FPU外,还需要对编译器进行设置,以使其针对浮点运算生成特殊的指令.虽然在Atmel ...

  6. 《SQL Server企业级平台管理实践》读书笔记——SQL Server中关于系统库Tempdb总结

    Tempdb系统数据库是一个全局资源,可供连接到SQL Server实例的所有用户使用. 存储的内容项: 1.用户对象 用户对象由用户显示创建.这些对象可以位于用户会话的作用域中,也可以位于创建对象所 ...

  7. Java锁(一)之内存模型

    想要了解Java锁机制.引发的线程安全问题以及数据一致性问题,有必要了解内存模型,机理机制了解清楚了,这些问题也就应声而解了. 一.主内存和工作内存 Java内存模型分为主内存和工作内存,所有的变量都 ...

  8. DataTable转List<Model>通用类

    /// <summary> /// DataTable转List<Model>通用类[实体转换辅助类] /// </summary> public class Mo ...

  9. [转][原]openstack-kilo--issue(六)kilo版openstack的dashboard在session超时后重新登录报错解决办法

    http://blog.csdn.net/wylfengyujiancheng/article/details/50523373?locationNum=1&fps=1 1.现象描述: kil ...

  10. html插入链接

    每个网页都已一个地址,用URL()标识,通常在网站内部创建链接时,通常使用相对地址 内部链接 <a href="链接地址" target="目标窗口的打开方式(-s ...