前提:安装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)的更多相关文章

  1. grunt简单教程

    Grunt简单教程 1.grunt简单介绍 Grunt是一个基于任务的命令行工具.依赖于node.js环境. 它能帮你合并js文件,压缩js文件,验证js.编译less,合并css.还能够配置自己主动 ...

  2. grunt小教程

    本人的博客写了grunt的小教程,从零开始,一步一步的通过例子讲解,希望喜欢的同学给我的github上加颗星,谢谢! github地址: https://github.com/manlili/grun ...

  3. Grunt入门教程

    引入:grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于: ① 压缩文件 ② 合并文件 ③ 简单语法检查 环境:grunt是基于nodejs运行的,所以需要有nodejs,在N ...

  4. 前端自动化工具:Grunt使用教程

    1.下载node.js,然后将node.exe文件所在的目录加入path环境变量 2.安装npm管理工具 2.1.下载npm源码,解压到npm文件夹里,不要把npm放在和node.exe相同的文件夹 ...

  5. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  6. Grunt的配置和使用(一)

    Grunt的配置和使用(一) Grunt 和 Grunt 的插件都是通过 Node.js 的包管理器 npm 来安装和管理的.为了方便使用 Grunt ,你应该在全局范围内安装 Grunt 的命令行接 ...

  7. Grunt 入门

    转自:http://user.qzone.qq.com/174629171/blog/1404433906 Grunt被定义为:the javascript task runner. 什么算是Java ...

  8. 详解Grunt插件之LiveReload实现页面自动刷新(两种方案)

    http://www.jb51.net/article/70415.htm    含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以 ...

  9. windows下安装node环境,以及grunt试水笔记

    grunt,当下前端界知名度最高的工作流处理工具. 在一线的互联网公司,它早已经被用烂了,而我真正接触,是在去年年底... 期间还因为内心太杂分心玩乐而荒废学途,以致到最近才重拾学业,在这里BS一下自 ...

随机推荐

  1. python 字符串(汉语)获得MD5编码

    MD5即Message-Digest Algorithm 5(消息摘要算法第五版)的简称,是当前计算机领域用于确保信息传输完整一致而广泛使用的散列算法之一(又译哈希算法.摘要算法等),主流编程语言普遍 ...

  2. Mobile页面项目总结

    项目过去个把月了,一直没有写些东西总结下,这次借着年后的空隙,将当时记录下来的几个点回顾一下. 今明的布局:position技巧 每当看到类似横向并排布局的时候,总是想起定宽浮动,和下面讲到的列表并排 ...

  3. asp.net mvc框架的一些切入点

    IhttpModule+配置文件,对请求进行进一步的整理.过滤与转发: global文件中以Application_xx的保护方法进行切入的方式,此方法等同于IHttpModule方法.IHttpMo ...

  4. revel框架教程之缓存和Job

    Go语言实战 - revel框架教程之缓存和Job   所有的网站应该都会有一个非常简单的需求,首页一秒之内打开. 满足的方式主要有两种: 页面静态化,效果最好,对服务器基本没负担,只要带宽足够就好了 ...

  5. JS获取图片实际宽高

    JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

  6. 简单使用JSON,JavaScript中创建 JSON 对象(一)

    JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更易解析. ...

  7. jquery验证表单中的单选与多选

    jquery验证表单中的单选与多选 这里所说的,用jquery去验证某一组多选至少要有一个选中,某一组单选至少有一个选中,,大家都知道单一的一个用js比较好验证,但是想要用jquery的验证并且用到j ...

  8. JS、JQuery和ExtJs动态创建DOM对象

    做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...

  9. Standford机器学习 聚类算法(clustering)和非监督学习(unsupervised Learning)

    聚类算法是一类非监督学习算法,在有监督学习中,学习的目标是要在两类样本中找出他们的分界,训练数据是给定标签的,要么属于正类要么属于负类.而非监督学习,它的目的是在一个没有标签的数据集中找出这个数据集的 ...

  10. GMap学习笔记

    GMap学习笔记 1.GMap体系详解 What is the map control (GMapControl)? This is the control which renders the map ...