Grunt使用教程(限winows)
前提:安装nodejs
一、 打开dos命令窗口,输入命令 “node -v”,确认nodejs安装成功
二、 其次,安装grunt-cli (该插件是grunt命令行插件),执行命令“npm install –g grunt-cli”,”-g”表示全局安装。Ps:一般我们使用npm install的时候最好是在项目下进行安装,全局安装的问题是当你换一台机器的时候有可能不适用。
三、 新建一个文件夹,命名随意。
四、 新建两个文件,名字分别为package.json跟Gruntfile.js,其中Gruntfile.js里面暂时不写入内容(注意,使用echo创建文件的时候,要把文件里面的内容清空)
五、 打开package.json文件,此文件的作用,前端的同学应该非常熟悉,规范上就是定义前端项目依赖跟项目描述的,写入如下内容并保存(其实就是json字符串):
{
"name":"test",
"version":"0.1.0",
"description":"test demo",
"devDependencies":{
}
}
这里先不在devDependencies中写东西,因为以后在用npm install的时候可以指定版本号。
六、 cd命令行到项目根目录下,执行npm install
黄框:现在仓库(使用npm install生成的node_modules文件夹)中没有依赖
红框:没有指定许可证书,可以自己在package.json中写上”license”:”MIT”
查看项目目录:
七、 命令行安装grunt、grunt-contrib-uglify(压缩js用的插件)
这里的 - -save –dev 表示要将信息写入到package.json的devDependencies中
查看package.json跟node_modules文件夹,会出现对应的信息
八、 在Gruntfile.js中写入项目的配置信息:
创建一个test.js的文件,保证里面有一些js内容
同时配置uglify的信息,包括要压缩的文件跟压缩文件生成的位置
PS:其中使用到了pkg获取package.json的内容。
九、 还有重要的一步:上边我们是进行了配置,但是没有告诉grunt要怎么做,所以要有接口加载、执行(加载插件、执行配置)
Ps:注册的时候直接写入 [ ] 中插件名称表示执行grunt的时候同事执行了该功能
十、 执行grunt命令
可以看到已经执行成功,看一下目录
确实压缩成了一行,成功!!!
PS:要十分注意json字符串的标点符号的书写!!!
这里的图片没法显示,存入自己云笔记中!,需要找我要
Grunt使用教程(限winows)的更多相关文章
- grunt简单教程
Grunt简单教程 1.grunt简单介绍 Grunt是一个基于任务的命令行工具.依赖于node.js环境. 它能帮你合并js文件,压缩js文件,验证js.编译less,合并css.还能够配置自己主动 ...
- grunt小教程
本人的博客写了grunt的小教程,从零开始,一步一步的通过例子讲解,希望喜欢的同学给我的github上加颗星,谢谢! github地址: https://github.com/manlili/grun ...
- Grunt入门教程
引入:grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于: ① 压缩文件 ② 合并文件 ③ 简单语法检查 环境:grunt是基于nodejs运行的,所以需要有nodejs,在N ...
- 前端自动化工具:Grunt使用教程
1.下载node.js,然后将node.exe文件所在的目录加入path环境变量 2.安装npm管理工具 2.1.下载npm源码,解压到npm文件夹里,不要把npm放在和node.exe相同的文件夹 ...
- grunt自定义任务——合并压缩css和js
npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...
- Grunt的配置和使用(一)
Grunt的配置和使用(一) Grunt 和 Grunt 的插件都是通过 Node.js 的包管理器 npm 来安装和管理的.为了方便使用 Grunt ,你应该在全局范围内安装 Grunt 的命令行接 ...
- Grunt 入门
转自:http://user.qzone.qq.com/174629171/blog/1404433906 Grunt被定义为:the javascript task runner. 什么算是Java ...
- 详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
http://www.jb51.net/article/70415.htm 含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以 ...
- windows下安装node环境,以及grunt试水笔记
grunt,当下前端界知名度最高的工作流处理工具. 在一线的互联网公司,它早已经被用烂了,而我真正接触,是在去年年底... 期间还因为内心太杂分心玩乐而荒废学途,以致到最近才重拾学业,在这里BS一下自 ...
随机推荐
- 依赖注入(IOC)
依赖注入(IOC) 背景介绍 在设计模式中,尤其是结构型模式很多时候解决的就是对象间的依赖关系,变依赖具体为依赖抽象.平时开发中如果发现客户程序依赖某个或某类对象,我们常常会对他们进行一次抽象,形成抽 ...
- 定时器Timer不定时
订餐系统之定时器Timer不定时 经过几天漫长的问题分析.处理.测试.验证,定时器Timer终于定时了,于是开始了这篇文章,希望对还在纠结于“定时器Timer不定时”的同学有所帮助,现在的方案,在系统 ...
- 关于JSF国际化问题
由于最近一个项目的MVC层框架用的是JSF,所以在摸索中遇到了不少的问题,其中有一项就是关于国际化的的问题. 小弟在网上找了很多的资料,其实无外乎内容就都那样,可不知是小弟人品太差还是由于确实技术上有 ...
- DirectX11 SDK下载地址
http://download.microsoft.com/download/F/1/7/F178BCE4-FA19-428F-BB60-F3DEE1130BFA/DXSDK_Feb10.exe 拿走 ...
- C++输入一个字符串,把其中的字符按照逆序输出的两种方法
用字符数组方法: 基本思路是,先判断字符的结束标志'\0',然后从该位置向前输出. 实现代码: #include<iostream> using namespace std; int ma ...
- 给Activity切换加入动画
在startActivity或finish()后,调用overridePendingTransition方法,可以加入动画效果.例如: 使用Android自带的淡入淡出:android.R.anim. ...
- Ubuntu12.10 下搭建基于KVM-QEMU的虚拟机环境(十五)
接下来我们试验虚拟机的网络配置功能,KVM虚拟机网络配置主要有两种方式:NAT方式和Bridge方式.今天我们主要理解和实验NAT方式的网络配置. NAT方式是kvm安装后的默认方式,它支持主机与虚拟 ...
- ok6410 u-boot-2012.04.01移植二修改源码支持单板
继ok6410 u-boot-2012.04.01移植一后修改代码,对ok6410单板初始化,主要包括时钟.串口.NAND.DDR等初始化.这些工作在以前的裸板程序都写了,直接拿来用.我觉得先写裸板程 ...
- 函数sql黑马程序员——SQL常用函数
最近使用开辟的过程中出现了一个小问题,顺便记录一下原因和方法--函数sql ---------------------- ASP.Net+Android+IO开辟S..Net培训.等待与您交流! -- ...
- 怎么在Windows下安装Linux虚拟机
前提:①电脑有安装好VMware Workstation Pro虚拟机,没有的话点此下载并安装.②下载好CentOS-7-x86_64-DVD-1503-01镜像文件,没有点此下载密码:lomg. 1 ...