美文网首页tips
Grunt使用实例

Grunt使用实例

作者: LuckyJing | 来源:发表于2015-09-29 19:47 被阅读193次

Grunt 基于 Node.js ,用 JS 开发,这样就可以借助 Node.js 实现跨系统跨平台的桌面端的操作,例如文件操作等等。此外,Grunt 以及它的插件们,都作为一个 包 ,可以用 NPM 安装进行管理。
所以 NPM 生成的 package.json 项目文件,里面可以记录当前项目中用到的 Grunt 插件,而 Grunt 会调用 Gruntfile.js 这个文件,解析里面的任务(task)并执行相应操作。

安装 Grunt-cli

其实是安装 Grunt-cli ,这里安装Grunt的命令行支持(command line interface,简称CLI),在这之后,命令提示符中将会识别grunt命令。安装grunt-cli 并不能称为安装Grunt完毕。这是因为,Grunt本身不是全局使用的,任何具体的工作目录,如果要使用Grunt,都需要安装一次Grunt。这样做也是因为不同的工作目录,需要通过Grunt做的自动化工作也不同,因此需要独立配置。

npm install -g grunt-cli

—save-dev 参数,表示会把刚安装的东西添加到 package.json 文件中

生成 package.json 文件

npm对工作目录有一个要求。这个要求是:根目录位置处有一个package.json
文件。这个文件定义了工作目录对应的一些项目信息(名字,描述),以及包(就是npm模块)依赖关系。
执行下面命令便可以初始化

npm init

为当前工作目录安装Grunt和需要的插件

  • 方法1

之前我们把Grunt安装到了全局目录下,现在需要引入到当前项目路径,与此同时,所需要的插件可能有这些:

安装它们的方式可以是:

npm install --save-dev grunt
npm install  --save-dev 插件1 插件2 插件3

这个时候package.json文件夹里多出了一些代码。

  "devDependencies": {
    "grunt": "0.4.1"
  },
  • 方法二-手动更改package.json

"devDependencies": {
  "grunt": "~0.4.1",
  "grunt-contrib-cssmin": "~0.7.0"
 }

手动在package.json文件里面添加这个字段,将需要依赖的包添加进去,如果只需安装最新版本,可以改成** * **,然后执行npm install,会发现文件夹里多了node_modules文件夹,里面存放的就是我们需要的插件。

Gruntfile.js文件

具体看这篇文章
http://www.jianshu.com/p/78d556cd621c


插件配置区域

这里其实就是用json语法具体配置一个插件如何去完成它所要执行的任务。详细配置看官网配置说明

开始使用

只需要输入grunt 任务名 便可以一切自动完成。

使用淘宝镜像加速

网址:http://npm.taobao.org/

查看配置信息

npm config list ls -l

使用淘宝镜像之后,需要对.cnpmrc文件进行配置

prefix=D:
odejs
ode global
cache=D:
odejs
ode cache

添加这样的话语

提示

  • 如果全局目录已经有插件了,不要直接强制覆盖安装,可能会出现问题(无法写入)。

相关文章

  • Grunt使用实例

    Grunt 基于 Node.js ,用 JS 开发,这样就可以借助 Node.js 实现跨系统跨平台的桌面端的操作...

  • npm安装Grunt后却找不到命令

    使用npm install安装依赖包,其中包括grunt,grunt-cli等。但是当使用grunt命令时,却提示...

  • 使用grunt对css和js文件进行压缩

    Using Grunt 使用grunt压缩js和css文件 首先要安卓nodejs因为grunt是基于NodeJs...

  • Gruntfile 实例

    下面就针对一个 Gruntfile 案例做简单分析,也可以作为一个实例使用: 我们会用到以下5个 Grunt 插件...

  • grunt 使用

    1. 安装 nodeJS 2. 全局安装 grunt 和 grunt-cli 3. 创建文件夹grunt-demo...

  • Grunt常用插件整理

    清理文件和文件夹:grunt-contrib-clean。 使用UglifyJS压缩js文件:grunt-cont...

  • grunt常用插件

    清理文件和文件夹:grunt-contrib-clean。 使用UglifyJS压缩js文件:grunt-cont...

  • grunt常用插件

    清理文件和文件夹:grunt-contrib-clean。 使用UglifyJS压缩js文件:grunt-cont...

  • grunt代码压缩

    grunt 官网:https://gruntjs.com/ 下载: 优点: 使用方法 1、grunt它是基于nod...

  • Grunt: JavaScript前端的构建工具-介绍-安装-应

    1. Grunt 的介绍和使用 参考链接:http://www.gruntjs.net/ Grunt中文网 为何要...

网友评论

    本文标题:Grunt使用实例

    本文链接:https://www.haomeiwen.com/subject/ptowcttx.html