2016年6月13日
摘要: http://www.jb51.net/article/70415.htm 含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以参考下 方案一:grunt-livereload + Chrome Plug-in 优点:安装、配置简单方 阅读全文
posted @ 2016-06-13 16:08 杨杨0708 阅读(571) 评论(0) 推荐(0) 编辑
摘要: Jasmine 为 JavaScript 提供了 TDD (测试驱动开发)的框架,对于前端软件开发提供了良好的质量保证,这里对 Jasmine 的配置和使用做一个说明。 目前,Jasmine 的最新版本是 2.3 版,这里以 2.3 版进行说明。网上已经有一些关于 Jasmine 的资料,但是,有些 阅读全文
posted @ 2016-06-13 15:42 杨杨0708 阅读(356) 评论(0) 推荐(0) 编辑
摘要: Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础。 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt。 1. 安装 NodeJS 和 NPM 一切从 NodeJS 开始吧,官方网址:https://no 阅读全文
posted @ 2016-06-13 15:41 杨杨0708 阅读(6943) 评论(0) 推荐(1) 编辑
摘要: 在描述源码路径的时候,经常有一些特殊的奇怪的要求。Grunt 通过内建的 node-glob 和 minimatch 库提供了文件名的扩展机制。 常见的通配符如下: * 匹配除了 / 之外的任意数量的数字和字符 ? 匹配除了 / 之外的单个字符 ** 匹配任意数量的字符,包括 /,这样可以包含任意级 阅读全文
posted @ 2016-06-13 15:39 杨杨0708 阅读(248) 评论(0) 推荐(0) 编辑
摘要: 在前端开发过程中,我们需要在开发过程中,将开发中的站点部署到服务器上,然后,在浏览器中查看实际的效果,在 Grunt 环境下,可以直接使用集成在 Grunt 中的 Connect 插件完成站点服务器的支持,在开发过程中,直接查看效果。 1. Connect 资源 与 Grunt 集成的 Connec 阅读全文
posted @ 2016-06-13 15:39 杨杨0708 阅读(338) 评论(0) 推荐(0) 编辑
摘要: 现在 watch 中已经集成了 livereload ,所以把它们放在一起说明。 watch 可以监控特定的文件,在添加文件、修改文件、或者删除文件的时候自动执行自定义的任务,比如 livereload 等等。 1. 安装 项目定义在 GitHub 上,地址:https://github.com/g 阅读全文
posted @ 2016-06-13 15:38 杨杨0708 阅读(221) 评论(0) 推荐(0) 编辑
摘要: 1.npm install --save-dev grunt-contrib-watch 安装 watch 2.安装chrome livereload 插件 3.配置Gruntfile.js watch: { client: { files: ['*.html', '*.css', '*.js'], 阅读全文
posted @ 2016-06-13 15:37 杨杨0708 阅读(193) 评论(0) 推荐(0) 编辑
摘要: grunt less转换成css速度慢 而且页面会全部刷新? grunt less转换成css速度慢 而且页面会全部刷新? 最近遇到了个问题,grunt里用less,当修改完.less里面的样式,对应 的.css文件会好几秒才修改,然后浏览器上显示也会耗时好几秒,有时候很慢,要不停保存啊刷新啊或者删 阅读全文
posted @ 2016-06-13 10:31 杨杨0708 阅读(455) 评论(0) 推荐(0) 编辑
摘要: Grunt任务分为两部分,一部分是任务,即Grunt要执行的代码,找到对应功能的插件就成。所以等会要下载grunt-contrib- less包,这个插件便是把less文件编译成能直接使用的css。另一部分是配置,即传给grunt.initConfig方法的对象。 关于如何安装Grunt,创建Gru 阅读全文
posted @ 2016-06-13 10:17 杨杨0708 阅读(353) 评论(0) 推荐(0) 编辑
摘要: Grunt--Less 摘要: 之前介绍了自动构建工具Grunt,其中有一个模块是"grunt-contrib-less",下面是配置Grunt自动编译less文件。 安装: Grunt是基于node,功能模块化。你可以将grunt-contrib-less配置在package.json中然后npm 阅读全文
posted @ 2016-06-13 09:40 杨杨0708 阅读(564) 评论(0) 推荐(0) 编辑
摘要: Grunt到底有什么作用?一般用来干嘛? 很多前端的工作,包括Less编译、javascript压缩、Css压缩等零零碎碎的工作, 都可以让Grunt来做。 实际上在项目开发中,一般是前端代码 与 后端代码 完全分离,才会使用Grunt构建工具。 目前很多构建工具已经相当强大了,说说他的强大功能: 阅读全文
posted @ 2016-06-13 09:31 杨杨0708 阅读(483) 评论(0) 推荐(0) 编辑