轩枫阁

首页 / Web前端 / 授人以渔 / Javascript / Grunt配置文件编写技巧及示范

Grunt配置文件编写技巧及示范

前言

受益于grunt这么久,继续分享关于grunt的一些技巧。grunt确实是前端项目中不可或缺的提升效率的工具。第一次接触grunt是在去年7月份,开始有接触LESS、Coffee Script的等需要编译的模板才能使用的,所以grunt就有了很大的用处。当然除了编译,还有一部分的工作就是压缩,grunt常用的任务就是压缩JS、CSS,检查语法错误,同时也可以保证质量压缩图片(删除图片多余信息)。

使用起来也很简单,基于node,所以我们就可以通过js来控制这些文件。唯一需要做的是编写配置文件,做一套适合我们项目的编译系统。除此之外,另一个很方便的功能就是grunt能够通过监听文件变化(创建、删除、保存)来执行相应的任务。在初次学习grunt的配置的时候,踩过许多坑,之前也写过两篇关于grunt的文章,所以这里就写下Grunt的配置写法,具体为何那么写以及需要注意的点已经在代码里面表明清楚。

示范

写法仅供参考,具体请结合自己的项目编写配置。

 方案

本站的JS在第一版本的主题中,没有规范的整理,CSS也算是。第二版本的主题进行了优化,包括使用LESS,高度压缩JS、CSS,因为使用lESS,使得样式组件化,很多代码得到重用。而JS的组织更加趋于模块化管理(后续会继续改进,如使用seajs)。

在编写Grunt配置文件中,出现过一些问题,下面列一下

1. 各个插件的写法

因为插件众多,而各插件的写法也不一致,而且插件也都是英文的,所以读起来略繁琐。但是我们能做的就是在readme.md中查看每个用到的插件的语法,多试几个例子就好了。

2. 插件加载问题

因为Grunt是基于node的,所以加载插件的时候,我们不需要指定具体的路径,只需要放在node_modules文件夹下,嵌套多深也不要紧,只要是在node_modules里面就行。因为github上有这么一个项目grunt-contrib是收集了基本上常用到的Grunt插件,刚开始接触Grunt的时候,不知道选择什么插件,可以这样clone引用。但是会带来一个效率的问题,引用的时候:grunt.loadNpmTasks(‘grunt-contrib’);,因为涉及到的文件(文件夹)过多,会带来效率上的问题。所以仅需要当加载我们需要的插件就好。Grunt常用插件介绍:http://www.xuanfengge.com/grunt-commonly-used-plug-in-introduced.html

3. watch任务问题

watch给我们带来了很多方便,但是有时候也是个累赘。虽然说Grunt基于node,执行效率比Ant高很多,但是随着项目的庞大,文件的增多,简单的watch任务会使得每改动一次文件,都会编译所有同类型的文件,这相当的不需要。不过我们也不能watch单个文件,没有这样的写法,也不能写死(单个文件都写配置)。所以我们就需要根据文件改动编译次数,分成不同类型的任务。很少改动的直接不watch,转为手动编译就好

4. 涉及多文件时出错

提示错误:Source file “xxx.less” not found,普通写法对单个文件的编译没问题,但是涉及到多文件多目录的时候,就需要加上配置:expand: true

5. Grunt是不是最好的自动化工具

答案移至上一篇文章,Grunt自动化的前端项目构建工具:http://www.xuanfengge.com/grunt-front-end-project-build-automation-tools.html

另外,百度也有个前端集成解决方案:http://fis.baidu.com/

254/470
256/470

相关阅读

文章评论

  • 能暴露下json数据吗

    • 现在用gulp比较好

  • 真的没有办法做到watch单个文件的变化,只编译这个文件,而不是去编译所有同类型的文件?

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子