Learning Gulp

1.0 Gulp 安装与使用

1.1 安装

在确保node.jsnpm安装完毕,执行以下命令

npm install -g gulp

1.2 创建gulpfile.js

gulpfile.js是gulp的配置文件,在当前目录新建一名为gulpfile.js的文件。

var gulp = require('gulp');
var gulpPlugin = require(‘'gulpPluginName');

gulp.task('taskName', function () {
    gulp.src('resource')
        .pipe(gulpPlugin())
        . pipe(gulp.dest('distnation'));
});

1.3 启动gulp

执行

gulp taskName

1.4 Gulp API

gulp.src()

gulp.dest()

gulp.task()

gulp.watch()

2.0 常用 Gulp 插件

2.1资源压缩

2.1.1 CSS 压缩

2.1.2 JavaScripts 压缩

2.1.3 gulp-uglify

2.2 图片资源压缩

2.2.1 gulp-imageming

gulp-imagemin压缩图片文件(包括PNGJPEGGIFSVG图片)。

下载地址

Github: https://github.com/sindresorhus/gulp-imagemin

安装
npm install --save-dev gulp-imageming
API

imagemin(option)

optimizationLevel {number}

2.1 工具类

兼容性问题汇总

IE系列

条件注释判断浏览器:

符号 示例 说明
! [if !IE] The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
NOT运算符。这是摆立即在前面的功能,操作员,或子表达式扭转布尔表达式的意义。
lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less than the second argument.
小于运算符。如果第一个参数小于第二个参数,则返回true。
lte [if lte IE 6] The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
小于或等于运算。如果第一个参数是小于或等于第二个参数,则返回true。
gt [if gt IE 5] The greater-than operator. Returns true if the first argument is greater than the second argument.
大于运算符。如果第一个参数大于第二个参数,则返回true。
gte [if gte IE 7] The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
大于或等于运算。如果第一个参数是大于或等于第二个参数,则返回true。
() [if !(IE 7)] Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
子表达式运营商。在与布尔运算符用于创建更复杂的表达式。
& [if (gt IE 5)&(lt IE 7)] The AND operator. Returns true if all subexpressions evaluate to true
AND运算符。如果所有的子表达式计算结果为true,返回true
| [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates to true.
OR运算符。返回true,如果子表达式计算结果为true。

<!--[if IE]>用于 IE <![endif]-->
<!--[if IE 6]>用于 IE6 <![endif]-->
<!--[if IE 7]>用于 IE7 <![endif]-->
<!--[if IE 8]>用于 IE8 <![endif]-->
<!--[if IE 9]>用于 IE9 <![endif]-->
<!--[if gt IE 6]> 用于 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用于 IE9 以下版本<![endif]-->
<!--[if !IE]> -->用于非 IE <!-- <![endif]-->

1.MSDN

Sass 学习笔记(更新中…)

1 环境搭建

1.1 Ruby 下载 & 安装 ( windows 为例)

1.1.1 下载

下载地址http://rubyinstaller.org/downloads 在该页面下载选择相对应的版本的安装包即可。

1.1.2 安装

安装建议勾选(建议安装在C盘),这样我们就免去再去配置将ruby的执行路径添加在windows的环境变量中了。
– [x] Add Ruby executables to Your PATH 选项。
安装完成,电脑开始菜单中,运行 start Command Prompt with Ruby选项。

1.1.3 检查 Ruby 安装状态

以 Ruby 官网下载的rubyinstaller-2.2.3-x64.exe为例:

ruby -v

如果能返回以下信息,说明ruby安装成功。

ruby 2.2.3p173 (2015-08-18 revision 51636) [x64-mingw32]

继续阅读

由p元素不能包含什么想开去

今天在做读书笔记的时候(目前使用HTML书写),遇到一个困惑:p元素不能包含什么?不想不知道,一想吓一跳。正如最近几天我在反思的:自己对HTML标准理解不够深入,导致自己在很多地方认识很模糊,进而产生模棱两口的情况。我是有着选择强迫症的,这是我不能忍受,多种选择的我定要区分出最佳出来的(在某些时候其实这也挺好)。比如今天的问题:由p元素不能包含?就暴露了自己对行内元素以及块元素区认识不深刻(这是委婉的说法,实际我一直对此的认识为空白),扯远点还有对语义化认识不足。

起初我仅仅想知道p元素不能包含哪些元素,想找出有没有业界约定俗成的做法。但是这样Google显然是无果的,但幸运的是我发现了这篇文章 《HTML中为何P标签内不可包含DIV标签?》 ,这篇文章完美的得解决了我心中的疑惑,并且将我的思考思考方向引领到正确的方向上去。

本文开头提出的问题可以转化为:p元素是什么?既然是块元素,那么问题就是块级块元素不能包涵哪些元素。首先我们需要了解HTML约束的分类。在网上胡乱Google到这些(也无法考证正确性)。HTML元素分为三大种:

  1. 顶级元素(Top-level element)
  2. 块级元素(Block-level element)
  3. 内联元素(Inline element)

继续阅读