随笔 - 381
文章 - 0
评论 - 11
阅读 -
57万
06 2016 档案
loading.io一个可以直接生成loading gif图标的站点
摘要：官网是：http://loading.io/ 进去后，可以拖动左图大小，然后点右边的make gif就可以自动生成所选大小的gif图标了，生成后会弹出一个download窗，点download下载即可。 还可以生成svg图和css代码，其生成和下载方式与gif一样。
阅读全文
按住ctrl键可以在新窗口打开图片
摘要：用firebug查看网页时，img标签(或background属性里面的url地址源)里面的图片源按住ctrl键可以弹出新窗口显示，并可右键另存为到本地目录
阅读全文
背景图片等比缩放的写法background-size简写法
摘要：1、背景图片或图标也可像img一样给其宽高就能指定其缩放大小了。 比如一个实际宽高36*28的图标，要缩小一半引用进来的写法就是： background:rgba(0, 0, 0, 0) url("../images/report_icon@2x.png") no-repeat scroll lef
阅读全文
一个a::before的写法
摘要：#key_table table tr td a::before{//这是个a前面的蓝色小圆点 background: #48A7D9; content: "";//这是before元素中的内容 border-radius: 50%; display: inline-block;//这个属性很重要，
阅读全文
Sublime Text3 使用手册
摘要：1、标签页切换：ctrl+tab 2、Sublime Text3的配色方案(Preferences——配色方案)我选白色方案是：Eiffel;深色方案我选：Monokai 3、左边资源栏：先ctrl+k再ctrl+b按顺序切换即可展开和收缩 4、tab键和ctrl+]可向右缩进,ctrl+[向左缩进
阅读全文
创业类网站建设日志1——搭建服务器svn以及前端开发环境
摘要：1、需要在linux环境的服务器下搭建node和npm还有Grunt,所以先需要一个叫putty的工具连接服务器命令行终端 2、双击putty工具，在HostName一栏输入项目服务器地址：172.168.1.101(端口默认22即可)，输入完后点open即可弹出一个终端界面 3、输入用户名andi
阅读全文
详解Grunt插件之LiveReload实现页面自动刷新（两种方案）
摘要：http://www.jb51.net/article/70415.htm 含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以参考下 方案一：grunt-livereload + Chrome Plug-in 优点：安装、配置简单方
阅读全文
使用 Jasmine 进行测试驱动的 JavaScript 开发
摘要：Jasmine 为 JavaScript 提供了 TDD （测试驱动开发）的框架，对于前端软件开发提供了良好的质量保证，这里对 Jasmine 的配置和使用做一个说明。 目前，Jasmine 的最新版本是 2.3 版，这里以 2.3 版进行说明。网上已经有一些关于 Jasmine 的资料，但是，有些
阅读全文
创建 Web 前端开发环境(node和npm以及git)
摘要：Web 前端开发涉及多种工具，这里将常用工具的安装和配置进行说明，提供了详细的说明，为后继的开发创建一个坚实的基础。 本文介绍的工具有：NodeJS, NPM, Bower, Git 和 Grunt。 1. 安装 NodeJS 和 NPM 一切从 NodeJS 开始吧，官方网址：https://no
阅读全文
Grunt 之通配符
摘要：在描述源码路径的时候，经常有一些特殊的奇怪的要求。Grunt 通过内建的 node-glob 和 minimatch 库提供了文件名的扩展机制。 常见的通配符如下： * 匹配除了 / 之外的任意数量的数字和字符 ? 匹配除了 / 之外的单个字符 ** 匹配任意数量的字符，包括 /，这样可以包含任意级
阅读全文
前端开发 Grunt 之 Connect
摘要：在前端开发过程中，我们需要在开发过程中，将开发中的站点部署到服务器上，然后，在浏览器中查看实际的效果，在 Grunt 环境下，可以直接使用集成在 Grunt 中的 Connect 插件完成站点服务器的支持，在开发过程中，直接查看效果。 1. Connect 资源 与 Grunt 集成的 Connec
阅读全文
Grunt 之 watch 和 livereload
摘要：现在 watch 中已经集成了 livereload ，所以把它们放在一起说明。 watch 可以监控特定的文件，在添加文件、修改文件、或者删除文件的时候自动执行自定义的任务，比如 livereload 等等。 1. 安装 项目定义在 GitHub 上，地址：https://github.com/g
阅读全文
grunt live reload 配置记录
摘要：1.npm install --save-dev grunt-contrib-watch 安装 watch 2.安装chrome livereload 插件 3.配置Gruntfile.js watch: { client: { files: ['*.html', '*.css', '*.js'],
阅读全文
Grunt构建工具插件篇——之less工具3和watch配合自动化编译
摘要：grunt less转换成css速度慢 而且页面会全部刷新？ grunt less转换成css速度慢 而且页面会全部刷新？ 最近遇到了个问题，grunt里用less，当修改完.less里面的样式，对应 的.css文件会好几秒才修改，然后浏览器上显示也会耗时好几秒，有时候很慢，要不停保存啊刷新啊或者删
阅读全文
Grunt构建工具插件篇——之less工具2
摘要：Grunt任务分为两部分，一部分是任务，即Grunt要执行的代码，找到对应功能的插件就成。所以等会要下载grunt-contrib- less包，这个插件便是把less文件编译成能直接使用的css。另一部分是配置，即传给grunt.initConfig方法的对象。 关于如何安装Grunt，创建Gru
阅读全文
Grunt构建工具插件篇——之less工具
摘要：Grunt--Less 摘要： 之前介绍了自动构建工具Grunt，其中有一个模块是"grunt-contrib-less"，下面是配置Grunt自动编译less文件。 安装： Grunt是基于node，功能模块化。你可以将grunt-contrib-less配置在package.json中然后npm
阅读全文
Grunt构建工具能做哪些事？
摘要：Grunt到底有什么作用？一般用来干嘛？ 很多前端的工作，包括Less编译、javascript压缩、Css压缩等零零碎碎的工作， 都可以让Grunt来做。 实际上在项目开发中，一般是前端代码 与 后端代码 完全分离，才会使用Grunt构建工具。 目前很多构建工具已经相当强大了，说说他的强大功能：
阅读全文
Grunt-几个常用的任务配置，加载，执行的写法
摘要：http://www.gruntjs.net/sample-gruntfile Gruntfile 实例 下面就针对一个 Gruntfile 案例做简单分析，也可以作为一个实例使用： module.exports = function(grunt) { grunt.initConfig({ jshi
阅读全文
单元测试任务包括哪些？
摘要：单元测试，处于软件测试初期阶段，任务主要包括：模块接口测试、模块局部数据结构测试、模块中所有独立执行通路测试、模块的各条错误处理通路测试、模块边界条件测试。 模块接口测试是单元测试的基础。只有在数据能正确流入、流出模块的前提下，其他测试才有意义。测试接口正确与否应该考虑下列因素： （1） 输入的实际
阅读全文
单元测试的概念
摘要：单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。对于单元测试中单元的含义，一般来说，要根据实际情况去判定其具体含义，如C语言中单元 指一个函数，Java里单元指一个类，图形化的软件中可以指一个窗口或一个菜单等。总的来说，单元就是人为规定的最小的被测功能模块。单元测试
阅读全文
分享Grunt.js配置: watch + liveReload 实时监测文件变化自动刷新浏览器
摘要：http://www.tuicool.com/articles/2eaQJn 用Grunt配置watch和liveReload组件，可以实时检测指定的文件变化并自动刷新浏览器。目前基本已经成为了我的必备配置。特别是在写前端页面的时候，不用再频繁去点浏览器刷新按钮。工作的时候把浏览器拖到扩展屏，保存文
阅读全文
如何使用Grunt（好文）
摘要：Grunt 是什么？ Grunt 基于Node.js之上，是一个以任务处理为基础的命令行工具，可以减少优化开发版本为发布版本所需的人力和时间，从而加速开发流程。它的工作原理是把这 些工作整合为不同的任务，在你开发时自动执行。基本上，你可以让Grunt完成任何让你厌烦的任务：那些你需要重复进行的手工设
阅读全文
grunt安装详解及失败处理
摘要：标签： 1、官网 nodejs官网 https://nodejs.org/en/ Grunt官网 http://gruntjs.com/ Grunt插件首页 http://gruntjs.com/plugins 2、前言 前段时间一不小心升级了win10（万恶的360），各种不适应各种问题各种软件b
阅读全文
利用 Grunt （几乎）无痛地做前端开发 (一)之单元测试
摘要：前言 如果你想开发一个js应用，甭管多简单，都要先创建整个宇宙 来看看我们的Javascript小宇宙: 确定如何根据需求、功能划分模块，如何将代码分成多个文件开发，合成一个发布 保证上一条的同时，使用 Coffeescript、SCSS/LESS 等技术 保证上2条的同时，想想怎么在浏览器的刷新后
阅读全文
Grunt实现自动化单元测试
摘要：http://www.tuicool.com/articles/rAnaYvn 直奔主题： 一、安装grunt-contrib-qunit npm install grunt-contrib-qunit --save-dev （前提先安装nodejs和npm） 自动下载grunt-lib-phant
阅读全文
Grunt - Karma 单元测试
摘要：http://www.cnblogs.com/haogj/p/4813155.html Karma 是 Goolge 开源的一个 Test runner, 可以配合 Grunt 使用。 1. 相关插件介绍 1.1 Karma 的官网 http://karma-runner.github.io/ 官网
阅读全文
Grunt插件之LiveReload 实现页面自动刷新，所见即所得编辑
摘要：苦B的前端每次在制作和修改页面时，都有一个特定的三部曲：coding-save-F5。很多时候都希望自己一改东西，页面就能立刻显示，而现在LiveReload就能做到这点。 LiveReload会监控你指定的目录中文件，如果有文件被更改，它就自动触发浏览器刷新页面。但如果你修改的是CSS或者图片，页
阅读全文
创建 Web 前端开发环境(node和npm)
摘要：Web 前端开发涉及多种工具，这里将常用工具的安装和配置进行说明，提供了详细的说明，为后继的开发创建一个坚实的基础。 本文介绍的工具有：NodeJS, NPM, Bower, Git 和 Grunt。 1. 安装 NodeJS 和 NPM 一切从 NodeJS 开始吧，官方网址：https://no
阅读全文
前端开发 Grunt 之 Connect详解
摘要：在前端开发过程中，我们需要在开发过程中，将开发中的站点部署到服务器上，然后，在浏览器中查看实际的效果，在 Grunt 环境下，可以直接使用集成在 Grunt 中的 Connect 插件完成站点服务器的支持，在开发过程中，直接查看效果。 1. Connect 资源 与 Grunt 集成的 Connec
阅读全文
Grunt之watch详解
摘要：Grunt 之 watch 和 livereload 现在 watch 中已经集成了 livereload ，所以把它们放在一起说明。 watch 可以监控特定的文件，在添加文件、修改文件、或者删除文件的时候自动执行自定义的任务，比如 livereload 等等。 1. 安装 项目定义在 GitHu
阅读全文
Grunt 之通配符
摘要：在描述源码路径的时候，经常有一些特殊的奇怪的要求。Grunt 通过内建的 node-glob 和 minimatch 库提供了文件名的扩展机制。 常见的通配符如下： * 匹配除了 / 之外的任意数量的数字和字符 ? 匹配除了 / 之外的单个字符 ** 匹配任意数量的字符，包括 /，这样可以包含任意级
阅读全文
Grunt安装中遇到的问题汇总
摘要：Grunt安装中遇到的问题汇总 1、如果是windows下的dos中安装Grunt，必须以管理员身份登录(第一个坑) 登录方法是： 方法一：开始>所有程序>附件>命令提示符上右键>以管理员身份运行.OK.(貌似实战中不可用) 方法二：开始>所有程序>附件>命令提示符上右键>运行方式>弹出运行身份面板
阅读全文
Grunt那些事
摘要：1、第一步当然是先安装好nodejs里面的npm包管理器咯，若还不知道怎么安装请参考nodejs那些事里面的安装步骤 2、node安装完后，就安装grunt-CLI，如果nodejs直接安装在系统默认的路径，也就是c盘下的program files/nodejs/下的话，那么直接调出dos客户端cm
阅读全文
用grunt搭建自动化的web前端开发环境-完整教程
摘要：jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt，你没有理由不学、不用！ 1. 前言 各位web前端开发人员，如果你现在还不知道grunt或者听说过、但是不会熟练使用grunt，那你就真的真的真的out了（三个“真的”重复，表 示重点）。至于gru
阅读全文
