grunt的使用方法,环境配置和插件安装
虽然现在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的使用方法,环境配置和插件安装的更多相关文章
- python的开发环境配置-Eclipse-PyDev插件安装
安装PyDev插件的两种安装方法: 1.百度搜索PyDev 2.4.0.zip,下载后解压,得到Plugins和Feature文件夹,复制两文件夹到Eclipse目录,覆盖即可. 插件的版本要对应py ...
- Sublime text 3搭建Python开发环境及常用插件安装 转载
Sublime text 3搭建Python开发环境及常用插件安装 一.环境准备 1.官方网站地址 2.Windows 10 3.Sublime Text 3 + 官网购买license(Just a ...
- win2008 r2 服务器php+mysql+sqlserver2008运行环境配置(从安装、优化、安全等)
这篇文章主要介绍了win2008 r2 服务器php+mysql+sqlserver2008运行环境配置(从安装.优化.安全等),需要的朋友可以参考下 win2008 r2 安装 http://www ...
- JDK和环境配置,eclipse安装与使用
本博客部分参照https://blog.csdn.net/PGY0000/article/details/79256720 (记住要尊重别人的劳动产品) 原博客给的链接和后面的安装过程有点不一样,不能 ...
- Eclipse开发环境配置,打磨Eclipse,安装插件(适用3.4,3.5,3.6,3.7)
转载自:http://elf8848.iteye.com/blog/354035 打磨Eclipse -- 磨刀不误砍柴工 -------------------------------------- ...
- Sublime text 3搭建Python开发环境及常用插件安装
参考 https://www.cnblogs.com/honkly/p/6599642.html 一.环境准备 1.官方网站地址 2.Windows 10 3.Sublime Text 3 + 官网 ...
- eclipse环境搭建(插件安装)
转自:http://www.iteye.com/topic/982182 使用eclipse真的有年头了,相信java程序员没有不知道它的,最近在给团队中新来的应届生做指导,专门讲解了一下Eclips ...
- vim配置及插件安装笔记
1. 首先打开vim的配置文件vimrc,并加入以下常用的配置: cd ~ mkdir .vim vim .vimrc " 设置当文件被改动时自动载入 set autoread " ...
- anadonca环境配置和模块安装
1.最方便的python环境配置: 下载anaconda即可,自带spyder,集成科学计算的库,自带pip,不用折腾. 想用sublime编写python并运行的话,需要自己配置编译环境,并下载插件 ...
随机推荐
- js中的浅拷贝和深拷贝
说说最近所学:浅拷贝和深拷贝也叫做浅克隆和深克隆,深浅主要针对的是对象的"深度",常见的对象都是"浅"的,也就是对象里的属性就是单个的属性,而"深&q ...
- Android启示录——开始Android旅途
为了明年可以开始进行android程序开发,开始从零开始学习android,仅以此代表第一步开始(*^_^*),开始搭建环境…… 1. 软件下载 http://developer.android.co ...
- javascript --- 子对象访问父对象的方式
在传统面向对象的编程语言里,都会提供一种子类访问父类的特殊语法,引文我们在实现子类方法往往需要父类方法的额外辅助.在这种情况下,子类通常会调用父类中的同名方法,最终以便完成工作. javascript ...
- React 初学整理
1,通过createElement创建元素 HELLO Word ps:切记组建名称首字母大写 2,虚拟DOM 在虚拟DOM上操作 通过render来渲染真是DOM 3,JSX JSX 是对JS的语法 ...
- 【读书笔记】iOS-GCD-Dispatch Queue
一,Dispatch Queue的实现: 1,用于管理追加的Block的C语言层实现的FIFO队列. 2,Atomic函数中实现的用于排他控制的轻量级信号. 3,用于管理线程的C语言层实现的一些容器. ...
- IOS 网络浅析-(五 xml解析)
XML 可扩展标记语言 用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言 易读性高,编码手写难度小,数据量大 NSXMLPars ...
- ruby语言是什么东西
1.简介 Ruby是日本的Yukihiro Matsumoto写的,简单易学的面向对象的脚本语言,像perl一样,有丰富的文字处理.系统管理等丰富 功能,但是ruby要简单,容易理解和扩充.跟p ...
- widowns 列出文件目录树结构 tree命令
TREE [drive:][path] [/F] [/A] /F 显示每个文件夹中文件的名称.(带扩展名) /A 使用 ASCII 字符,而不使用扩展字符. tree -f > list.t ...
- 用nginx-gridFS读取MongoDB的图片及文件(为什么你老是配不成功?)
最近在部署公司服务器的nginx + mongodb + gridfs环境: 搜索了N多文档,基本上都一样,期间遇到很多问题: 下面是整理的一份搭建文档: 摘要 nginx-gridfs是一个ngin ...
- LightSpeed 相关问题处理
1. 关于KeyTable 配置文件中有一个节点 lightSpeedContexts 该节点下存放的是一些使用LightSpeed的配置,如 <add name="myDB&quo ...