由于项目中经常遇到form检验问题,且需求都差不多,所以想干脆做一个插件吧,于是就在github上建了个project,整个插件使用了grunt来做初始化及压缩打包,这篇文章就记录一下使用过程,以及自己的一些想法。

什么是grunt

官网在这里。Grunt是一个自动化的项目构建工具。如果你需要重复的执行像压缩,编译,单元测试,代码检查以及打包发布的任务。那么你可以使用Grunt来处理这些任务,你所需要做的只是配置好Grunt,这样能很大程度的简化你的工作。

如果在团队中使用Grunt,你只需要与其他人员约定好使用Grunt应该规避的问题,就能够很方便的自动化的处理大部分的常见工作任务,你所付出的努力几乎为0。

 

grunt安装

grunt及其插件都是通过npm来安装和管理的,因此先要有node环境,这个不展开说了。

1. 安装CLI

为了方便使用Grunt,你应该在全局范围内安装Grunt的命令行接口(CLI)

npm install -g grunt-cli

 

这条命令将会把grunt命令植入到你的系统路径中,这样就允许你从任意目录来运行它(定位到任意目录运行grunt命令)。

注意,安装grunt-cli并不等于安装了grunt任务运行器!Grunt CLI的工作很简单:在Gruntfile所在目录调用运行已经安装好的相应版本的Grunt。这就意味着可以在同一台机器上同时安装多个版本的Grunt。

每次运行grunt时,它都会使用node的require()系统查找本地已安装好的grunt。正因为如此,你可以从你项目的任意子目录运行grunt

如果找到本地已经安好装的Grunt,CLI就会加载这个本地安装好的Grunt库,然后应用你项目中的Gruntfile中的配置(这个文件用于配置项目中使用的任务,Grunt也正是根据这个文件中的配置来处理相应的任务),并执行你所指定的所有任务。

2. 安装grunt-init

这个不是必须的,但是有了grunt-init,可以自动为你初始化项目,很方便,而且对于jquery插件有现成的初始化模版。

npm install -g grunt-init

这样就在全局安装了grunt-init,有了初始化工具,还需要模版,不然不知道该按哪种项目类型来初始化。

grunt官网提供了很多模版,将模版目录copy到~/.grunt-init/目录下即可使用

git clone https://github.com/gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery
这样有了jquery插件的初始化模版

 

grunt使用 

有了模版,使用一行命令来初始化

grunt-init jquery

系统会问一些问题,并根据问题来初始化项目。

模版会自动创建好package.jsonGruntfile.js

 

package.json:这个文件被用来存储已经作为npm模块发布的项目元数据(也就是依赖模块)。你将在这个文件中列出你的项目所依赖的Grunt(通常我们在这里配置Grunt版本)和Grunt插件(相应版本的插件)。

Gruntfile:通常这个文件被命名为Gruntfile.js或者Gruntfile.coffee,它是用于配置或者定义Grunt任务和加载Grunt插件的。

 grunt项目下必须有这两个文件,如果不用grunt-init自动创建的话,需要手动创建
下面创建grunt依赖的一些模块,run下面install命令
npm install
 这样你就可以开始写代码了,写完之后,一句命令 grunt,然后jshint,单元测试,压缩,发布就自动完成。

 个人看法

其实我跳进前端这个坑的原因之一在于,不需要一堆配置文件,不需要编译,开发过程极简,一个文本编辑器,一个浏览器就可以搞起。不像java开发,Eclipse就要开半天- -,如果用ssh之类的框架,一堆东西要配置,对此我是深恶痛绝。

随着前端技术的发展,前端的复杂性越来越高,不断出现各种新技术,比如less,如果用了less,css也要编译了,这在一定程度上延长了前端的开发周期,增加了一个编译的过程。我觉得这是需要一个tradeoff的,取决于项目中是否需要多人协作,项目复杂程度(是否需要细粒度模块化),以及项目的发布周期。像我现在的这个团队,一天可能就发布N次了,显然增加一个编译步骤是不可取的。

而grunt是为了自动化单元测试、压缩、编译、发布的,所以我暂时不打算在正式项目里使用,自己的个人项目可以搞起,算是提前熟悉吧。