Grunt入门(二)

Grunt入门(二)

上一篇文章里,简单的讲解了grunt的使用方法。上一篇文章最后的问题,是不是每一个项目的gruntfile和package.json文件都要开发者自己手动去创建呢?答案是不需要的。这一篇文章就讲一讲脚手架工具yeoman。

什么是Yeoman

Yeoman是一个旨在为开发者提供一系列健壮的工具、程序库和工作流,帮助他们快速构建出漂亮、引人注目的Web应用。它包括三个部分Yo、GruntJS、Brower分别用于项目的创建、文件操作、包管理。接下来重点讲讲Yo。
Yo是一个项目初始化工具,可以生成一套启动某类项目必需的项目文件。它提供了非常多的模板,用来生成不同类型的 Web 应用。这些模板称为生成器(generator)。

使用Yo

安装Yeoman

通过npm安装:npm install -g yeoman

安装generator-atm

Yo自带的生成器并不能满足团队定制化的需要,Yo允许开发自己开发生成器。npm install -g generator-atm 来安装我们自己团队的ATM模板。

创建web应用骨架

通过简单的命令:yo webapp 就可以创建一个简单的web应用骨架,拿组内的ATM来说,只需要运行yo atm

通过控制台填写相关的应用信息:

Grunt入门(二)_第1张图片
创建web应用骨架

下载安装grunt插件:

Grunt入门(二)_第2张图片
下载安装grunt插件

应该一些列的选择和提示之后,web应用骨架就完成了。
在我们的目录中会出现这么一些文件:

Grunt入门(二)_第3张图片
创建后的文件目录

ATM中使用Yo的部分就结束了。

更新generator-atm

和普通的npm包更新一样,更新ATM模板生成器,只需要运行npm update -g generator-atm 就可以了。

使用Grunt来快速完成项目开发

创建好web应用骨架后,就是Grunt来完成我们日常开发中合并sprite图、编译Less、压缩代码、上传测试服务器等需求了。

编译Less

使用grunt tc 可以编译Less并监听Less文件的改变,实时编译

拼合雪碧图

  • grunt 2x 会生成对应的二倍图(说明:其实不是放大图片,对于移动端,我们的切图一般是二倍图,这个时候插件会把图片改名生成对应的文件名为[email protected]文件,在把图片缩小一倍,生成一倍图,在不需要二倍图的机型上使用一倍图来减少流量。因为grunt的合并雪碧图的插件是这么个命名规则。PC端,直接是一倍图,缩小后的图其实是无用的,所以同样可以使用次插件来合并。)

  • grunt sprite用来合并雪碧图,并自动替换css里面的背景引用,增加相应的background-position属性。

  • 同样可以使用grunt sp 来合并操作第一步和第二步

px与rem互转

默认配置里面,是px to rem,运行grunt px2rem 可以将css目录下的css文件中的px转为rem。修改Gruntfile.js 文件中的changeMode选项可以将rem转换为px。

上传测试服务器

grunt testc 将需要上传测试服务器的文件复制到publish文件夹下面并上传。

grunt test 不会复制文件夹,直接将publish文件夹下面的文件上传至测试服务器。

压缩文件

  • grunt pngmin压缩png图片
  • grunt cssmin 压缩css图片
  • grunt dataUri把需要base64化的图片弄成转成base64
  • grunt zip 包括合并雪碧图及前面三个步骤

上传CDN

grunt cdn将css、js、img文件上传至cdn服务器上,并替换css和html的资源引入路径。
如果想压缩再上传CDN服务器,可以使用grunt pub

未来更新

  • JS公共库引入并插入HTML中
  • 加入邮件插件

你可能感兴趣的:(Grunt入门(二))