Grunt初体验

2013年4月14日 分类: JavaScript

这周终于体验了这个Grunt神器了。Grunt是一款基于任务的Javascript命令行构建工具。具体是怎么用的,用来做什么的,谷哥很多办法。我只分享我在体验的过程。

要体验Grunt,必须使用Node.js 与 Grunt。在安装完Node后,切换到项目目录,这个目录中必须要有Gruntfile.jsPackage.jsonREADME.md 这个不是必须的。然后使用win自带的命令行窗口(WIN+R)来安装需要的grunt插件。

一般构建项目,会安装npm install -g grunt-cli,如果提示本地没有grunt,那需要在安装个npm install grunt,这两个是基础的。我在git上有做了一份gruntDEMO,需要的移至https://github.com/f2er/ks-grunt.git去clone。其他的就是grunt插件的事情了,需要什么样的插件就install,插件主要在https://github.com/gruntjs。

有了这些基础文件后,重点难点在于Gruntfile.js的配置了。对于配置多看API,多折腾下就可以了。我一般都用到lesscssminwatch,很多高深的还没摸透,现在基本可以满足我构建前端项目的需求了,压缩静态资源文件,分模块编写样式,JS代码。这样在开发环境中体验不错。

Grunt-contrib-watch是个很好用的插件,主要用来监控文件是否产生变化,然后对文件重新编译。如果在配合浏览器插件自动刷新页面,都F5都省了。

现在已经爱上这个构建工具了,确实提高了很多前端的工作效率。这样用less来编写css,方便很多,不用在单独找编译器来编译less了。

标签:

1条评论 于 “Grunt初体验”

  1. basecss
    2013年5月13日00:42
    1

    Grunt是可编程的, package.json用来配置项目信息和构建依赖就ok. 关于package.json的配置很简单, 其可配置特性我认为主要是为了内置的引用与管理任务插件. Gruntfile.js的配置也很简单, 它所有的任务都定义在wrapper函数中, 而其任务配置的可编程也行堪称有效的js代码都可以完成任务配置. 实际应用中, 只需要配置好任务目标, 全自动化完成. Gruntjs, 你值得拥有.

Leave a Comment