Grunt备忘录

一、安装Grunt

应在全局环境下安装Grunt,以保障在任何目录下都能够正确找到grunt

npm install grunt-cli -g

二、对已有Grunt基本目录结构文件进行操作

Grunt需要的基本文件有:

1. Gruntfile.js。Grunt需要的基本配置文件。该文档标识了执行grunt命令时会执行的内容。
2. package.json。实际为node.js的当前project信息配置文件,特别是其中的包依赖dependencies非常重要。每次npm install实际上都是对其的重新pull及更新。

关于基本文件Gruntfile.js的详细教程参考http://www.gruntjs.org/article/sample_gruntfile.html

若当前目录已满足条件,在开发时进行如下步骤即可:

1.npm install (grunt --save -dev)

括号内容可省略。根据package.json的内容安装或更新依赖包。其中的grunt --save -dev实际上时调用grunt,将变更的依赖信息自动加入到基本文件中,否则需要手动更新。

2.grunt

执行grunt使得grunt插件,如concat、jshint等生效。执行过程会找到default自动执行里面的内容。具体原理参考上文提供的详细教程。

执行前应注意gruntfile中的default指向序列,防止出错。

3.grunt watch

watch为grunt的一个插件,需要在之前的步骤中随其他插件预先配置安装。即在grunt基本稳健配置时就应已经配置好。具体插件的安装方法在后续的“空目录初始化”部分会介绍到。

在对project进行任何修改操作前,应先运行watch监控代码,watch会对监控的代码的任何修改自动进行指定步骤,其配置文件在gruntfile中。

4.ctrl +c

在代码编辑完后,应先退出watch,然后进行正常的代码提交。

三、Grunt目录初始化

第一种方法

如第二部分所示,grunt目录的基本结构至少包含两个文件,这两个文件是可以手动配置的,具体仍可参考上文第一部分给出的链接。这里说一下如何自动化生成该目录。

Grunt本身包含四种默认的模板,即gruntfile、commonjs、jquery、node,具体详见http://www.cnblogs.com/lhb25/archive/2013/01/24/grunt-for-javascript-project-a.html

1. npm install grunt -init -g

全局安装grunt默认模板。

2. grunt-init gruntfile

第二种方法

对于工程目录的初始化也可以采用以下方式:

grunt init:gruntflie

进入空的工程目录,对该目录使用默认模板gruntfile进行初始化。初始化完毕后可以发现目录下多了两个基本文件。

初始化目录后,由于已经存在基本结构,所以可以针对基本结构进行自行修改。后续操作可以参考第二部分。

//初学grunt,如有错误请指出,谢谢。

上一篇:assets文件夹资源的访问


下一篇:Quill编辑器介绍及扩展