美文网首页Nodejs
Grunt入门(二)

Grunt入门(二)

作者: wheato | 来源:发表于2015-03-09 16:03 被阅读614次

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

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

创建web应用骨架

下载安装grunt插件:

下载安装grunt插件

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

创建后的文件目录

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

更新generator-atm

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

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

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

编译Less

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

拼合雪碧图

  • grunt 2x 会生成对应的二倍图(说明:其实不是放大图片,对于移动端,我们的切图一般是二倍图,这个时候插件会把图片改名生成对应的文件名为filename@2x.type文件,在把图片缩小一倍,生成一倍图,在不需要二倍图的机型上使用一倍图来减少流量。因为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入门(二)

    Grunt入门(二) 上一篇文章里,简单的讲解了grunt的使用方法。上一篇文章最后的问题,是不是每一个项目的gr...

  • 0329-Grunt

    Grunt快速入门 grunt 和grunt插件是通过npm安装管理 安装CLI grunt-cli不等于grun...

  • Grunt入门(一)

    Grunt入门(一) 什么是grunt Grunt就和photoshop里面的插件一样,它能够帮我们自动完成一些反...

  • Grunt入门

    快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。Gru...

  • grunt入门

    1. grunt是什么 一个可以运行 各种处理前端繁琐操作(压缩文件,删注释,测试等等)的插件 的平台。所谓的自动...

  • grunt入门

    grunt是一个优秀的前端的自动化生产工具,最开始作者一直不用这类工具,感觉麻烦,但是当后面项目大一些后开始尝试使...

  • grunt基础使用

    快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。 在安...

  • Grunt快速入门

    Grunt是基于JavaScript的命令行构建工具,它可以帮助开发者们自动化重复性的工作。你可以把它看成是Jav...

  • grunt快速入门

    安装 CLI 在继续学习前,你需要先将Grunt命令行(CLI)安装到全局环境中。安装时可能需要使用sudo(针对...

  • gulp和grunt的异同

    它们的功能一样 不同之处:gulp的速度比grunt快,grunt是通过文件的机制来压缩的,grunt是通过二进制...

网友评论

    本文标题:Grunt入门(二)

    本文链接:https://www.haomeiwen.com/subject/uwvvxttx.html