dandananddada (EtenGstar)

Compass 翻土挖坟。

dandananddada — Tue, 07 Jul 2015 18:20:08 +0800

写在前面

最近准备滚蛋种点树给公司新人看，整理前端技术翻到了 Compass。感觉好像很多人在说，但是我并没怎么见到。去官网看了下文档，又翻到了阮哥的博客，回社区也翻到三年前@lilu大哥发的帖子。看来是孤陋寡闻了。我想像我这样不太了解 compass 的朋友应该还是有的，所以特来挖坟。

链接

Compass 官网 Compass 用法指南 - 阮一峰 SASS 和 Compass 指南-lilu 最后给出我今天的整理

HTTP 简单介绍

dandananddada — Fri, 03 Jul 2015 20:40:07 +0800

写在前面

电话面 360，被问到 http 协议，状态码和响应报文，本来前段时间有专门看过，当时想简单整理下，后来因为种种原因不知道为什么就忘记了。今天突然被问到有点短路，其实 http 本身没什么东西，但是有些基础的东西不整理出来可能再次被问到还会懵掉，所以下午参考了下面一篇文章做了简单的整理。如果有还不是很清楚的朋友，又懒得翻大篇我教科书介绍，可以简单看看，但愿有所帮助。

参考资料 HTTP 下午茶 HTTP Made Really Easy HTTP Watch

HTTP

http(Hypertext Transfer Protocol) 超文本传输协议是应用于万维网的网络传输协议。

浏览器可以看做是 http 的客户端 (client)，它向服务端 (server) 发出请求，服务端会接受请求并响应反馈给客户端。

默认情况下，http servere 是监听 80 端口来处理 http 请求的。

资源

http 用来传输资源，不仅仅是文件。资源是一串可以通过 URL 唯一标识的信息，文件是最常见的资源，资源也可以是动态的查询结果，也可以是 CGI 脚本或者其他内容。

资源可以理解为文件或者服务端反馈的脚本。

http 结构

http 协议采用 c/s(client-server) 方式进行数据的传输，首先客户端会打开一个链接然后向服务端发出一个 http 请求，服务端接受请求后会返回一个响应的信息，通常这个信息包含请求的资源，之后服务端就会关闭链接。

需要注意 http 是一个无状态的协议，也就是服务端不会记录客户端任何的状态信息。

http 中请求和响应的报文格式是类似的，大多数报文都包含如下内容：

initial line
header line
blank line
message body

initial line

请求报文 initial line

请求报文中 initial line 由三部分组成，每部分之间通过空格分隔，分别是请求方法，请求路径以及 http 版本。

GET /path/to/file/index.html HTTP/1.0

响应报文 initial line

响应报文的 initial line 也由三部分组成，每部分之间通过空格分隔，分别是 http 版本，响应状态吗以及状态码描述。

HTTP/1.0 200 OK

状态码说明

状态码	状态码类别	类别说明
1xx	informational	服务端接收到请求，但仍在处理中并没有完成
2xx	successful	服务器成功处理请求
3xx	redirection	请求处理完成，但客户端需要从其他位置获取资源
4xx	client error	客户端错误
5xx	server error	服务端错误

常见状态码

状态码	状态码描述	说明
200	OK	请求成功
301	Moved Permanently	永久重定向
302	Moved Temporarily	临时重定向
303	See Other	重定向
304	Not Modified	从缓存读取
401	CheckUpDown	未授权
404	Not Found	资源不存在
500	Server Error	服务器错误
503	Service unavailable	服务不可用

header linse

header linse 用来提供关于请求和响应报文的一些描述信息，一般以键值对的方式展现。

User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko

一些应用需要自定义 header 来添加相关的描述，这个时候需要在 header 的名称前加一个前缀X-。

X-Powered-By: ASP.NET
X-AspNet-Version: 4.0.30319

message body message body 就是客户端请求到的资源数据，在请求报文中这部分就是需要传递到后太的用户输入的数据或文件。

http method

http 方法主要有 get、post、head

get

get 是最常用的 http 方法，可以通过 uri 直接访问资源。

post

post 请求用来向服务端传输数据，post 请求和 get 请求的区别在于：

通常有额外的 header 用来描述 message body 比如Content-Type和Content-Length。
post 请求的 uri 通常是一段处理请求数据的代码，而不是直接访问的静态文件。
post 请求响应的内容通常都是动态输出的，而不是一个静态的文件。

最常用的 post 方法就是提交表单数据到服务器。

head

head 请求和 get 请求类似，不同的是 head 请求只需要服务端返回响应报文中的 header 即可。当你不需要文件内容的时候可以使用 head 方法。

Ruby Symbol 简单介绍 (那些带着冒号的字符串)

dandananddada — Mon, 01 Jun 2015 11:59:08 +0800

写在前面

对于从其他语言转型 Ruby 的朋友来说，见到:myname这种形式的变量多多少少有些措手不及，于是会感觉这是多么复杂的一种数据类型，从而产生不必要的心里负担。其实 Symbol 是一种非常简单的 Object，这里我摘取 Steve Litt 一篇关于 Symbol 介绍的 Guide 分享给大家，方便初识 Symbol 的朋友尽可能的降低学习成本。原文地址：http://www.troubleshooters.com/codecorn/ruby/symbols.htm

简要介绍

符号和字符串很相似，符号也是对象，一般作为名称标签来使用，用来表示方法等对象的名称。符号能实现的功能大部分字符串也能实现，单散列键这样只是判断是否相等的处理，符号会比字符串更高效。另外符号可以与字符串相互转化。

What do symbols look like?

Symbol 看起来像一个没有引号的字符串前加了个冒号:myname 当然你也可以用冒号加引号的形式声明带空格的 symbol。:'my name'or :"my name" Symbol 是不变的，不可以像其他变量一样对它进行赋值运算。比如这样的写法是错误的:myname = "Tom"。相反 Symbol 可以作为值赋给其他变量比如mystring = :myname。

What are symbols?

Symbol 是一个 object，但是他可以用 number 表示也可以用 string 表示，多数情况下 Symbol 是作为一个字符串展现的。你可以用to_i方法将 symbol 转为 integer，也可以用to_s将 symbol 转为 string。对一个 Symbol 的多次引用用的是同一个 Object，因此 Symbol 会节省内存。

puts :myvalue.object_id
puts :myvalue.object_id
puts "myvalue".object_id
puts "myvalue".object_id
#2625806
#2625806
#537872172
#537872152

Symbol 可以用来存储不变的值，可以把它当做常量使用。

What can symbols do for you?

Symbol 被用作来传递字符串信息attr_writer :length。但是一般这些字符串在运行时是不会发生改变的，同时这些字符串也不需要 String 类的方法。多数情况下你可以用字符串代替 Symbol，但是字符串会占用更多内存，可读性相比差一些。当然当你强制一个字符串在运行期间不许改变的时候只能用 Symbol，不能用 String 代替。

Summary

Symbol 看起来是一个引号加字符串组成的 Symbol 可以看做事 number 也可以看做是 string Symbol 的字符部分就是它的名字 Symbol 在运行时无法修改多少情况下你可以用 String 代替 Symbol Symbol 没有 String 类的方法 Symbol 的多次引用都是指向同一个 Symbol 比字符串更加节省内存 Symbol 能提高运行效率

怎样尊重一个程序员

dandananddada — Wed, 20 May 2015 09:44:55 +0800

怎样尊重一个程序员

http://www.oschina.net/news/62529/how-to-respect-a-programmer

Ruby 和它的内存之三点

dandananddada — Sat, 16 May 2015 16:21:55 +0800

引自

http://www.sitepoint.com/ruby-uses-memory/ 只截取了前面部分 ruby 关于内存使用的三点，具体如何优化使用，大家可以参考原文。

对象的保留

Ruby 占用内存最明显的原因是对象的遗留。 Ruby 是不会回收静态变量的，所以如果一个静态变量引用了一个对象，那么这个对象也是不会被回收的。

# Ruby 2.2.2

#module GC is supported by ruby2.1+ 
#parameter :total_freed_objects is supported by ruby2.2.2+
GC.start
before = GC.stat(:total_freed_objects)

RETAINED = []
100_000.times do
  RETAINED << "a string"
end

GC.start
after = GC.stat(:total_freed_objects)
puts "Objects Freed: #{after - before}"

# => "Objects Freed: 6
# => "My result is 0~7"

GC.start
before = GC.stat(:total_freed_objects)

100_000.times do
  foo = "a string"
end

GC.start
after = GC.stat(:total_freed_objects)
puts "Objects Freed: #{after - before}"

# => "Objects Freed: 100005
# => "my result is 99999~100006"

综上可以看出，静态变量占用的内存是不会被释放的，除此之外基于全局的对象都不会被垃圾机制收集，比如静态变量、全局变量、modules、classes。所以引用对象的时候要注意是否为全局对象。

对象的复用

以 ruby 内建 string 为例，其采取的策略不是反复的创建对象，而是保留之前的对象并复用。比如当你调用 string.freeze 方法时，ruby 会认为这个字符串暂时不会发生修改，就会保留复用他。

RETAINED = []
100_000.times do
  RETAINED << "a string".freeze
end

puts GC.stat(:total_allocated_objects)
# => allocated memory is 42290

RETAINED = []
100_000.times do
  RETAINED << "a string"
end

puts GC.stat(:total_allocated_objects)
# => allocated memory is 142282

上面的例子可以看出，当你调用了 freeze 方法的时候，ruby 不会为每一个 string 创建对象，而是用之前创建过的对象做多个引用，这样会节省很大一部分内存。

临时的对象

其实很多对象都是临时的，比如如下代码中：

User.where(name: "schneems").first

这条查询语句本身会需要很多对象，用来存储结果的 hash，用来存储表名的 string 以及调用 sql 语句的时候涉及到的更细节的对象，但是这些对象大多数都不会长时间存储的，所以我们也不必十分在意这样的对象。

Duck Typing

dandananddada — Wed, 13 May 2015 23:35:07 +0800

什么是 duck typing？

鸭子类型是动态语言的一种风格，这种风格下对象没有有效的语义，是由当前的属性和集合决定。这个概念源自鸭子测试。 当看到一只鸟走起来像鸭子、游泳起来像鸭子、叫起来也像鸭子，那么这只鸟就可以被称为鸭子 在鸭子类型中，关注的不是对象的类型本身，而是它是如何使用的。鸭子类型通常得益于不测试方法和函数中参数的类型，而是依赖文档、清晰的代码和测试来确保正确使用。简单的说鸭子类型关注的不是对象本身，而是方法集的使用（个人感觉和弱类型的用意很像）。

问题

假设你要你要统计一艘货船上有很多货单，每个货单有很多包裹及这些包裹的重量，现在你需要统计这艘船所有货单的包裹总数与总重量，那么怎么做？

# Fields:
# * package_count: number of packages in manifest (integer)
# * mass:          total mass of all packages, in kilograms (BigDecimal)
class ShippingManifest
  attr_accessor :package_count, :mass
end

首先想到的方法

def summarise_manifests
  # Grab the latest set of Manifests (returns an Array)
  manifest_set = ShippingManifest.all

  # Initialize our counters
  total_package_count = 0
  total_mass          = BigDecimal("0")

  manifest_set.each do |m|
    total_package_count += m.package_count
    total_mass += m.mass
  end

  return [total_package_count, total_mass]
end

如何用一行代码？

def summarise_manifests
  ShippingManifest.all.sum
end

Duck typing!

class ShippingManifest < ActiveResource::Base
  # Returns a new instance of ShippingManifest containing the
  # sum of both `mass` and `package_count`
  def +(other)
    self.dup.tap do |neu|
      neu.mass          = @mass + other.mass
      neu.package_count = @package_count + other.package_count
    end
  end
end

引自

Making Ruby Quack—Why We Love Duck Typing http://www.sitepoint.com/making-ruby-quack-why-we-love-duck-typing/

分享给同是新手的 Rubyists，简单说明了些 Ruby 基础知识

dandananddada — Wed, 13 May 2015 21:37:56 +0800

写在前面

这是关于 Ruby 相对于其他语言而言一些要说明的知识点，方便同样刚接触 Ruby 不久的新手。有不对的或者不合理的地方还望指正。

Instance Variablse and Class Variables

Ruby 中的实例变量以@符开始，和其他语言不同实例变量可以直接赋值使用，无需声明。

class Item
  def initialize(title)
    @title = title
  end
end

item = Item.new('Chia Ruby')

和其他语言一样，想通过实例访问实例变量需要添加 set 和 get 方法

class Item
  def title=(t)
    @title = t
  end

  def title
    @title     
  end
end

item = Item.new
puts item.title.inspect # => nil
item.title = "Chia Ruby"
puts item.title # => "Chia Ruby"

通过这种方式定义 get 和 set 方法会让代码变得冗长，Ruby 提供了帮助方法可以简化定义。

attr_reader – define instance-level getters attr_writer – define instance-level setters attr_accessor – define both

class Thing
  attr_accessor :foo, :bar
  attr_reader :baz

  def initialize
    @baz = "cat"
  end
end

thing = Thing.new
thing.foo = 1
thing.bar = 2
puts thing.baz # => "cat"

除了实例变量外，ruby 还有一种被叫做 class variable 的，用@@表示，这种变量值会被子类中覆盖。

class Parent
  @@value = 1
  def self.value
    @@value
  end
end

class Child < Parent
  @@value = 2
end

puts Parent.value #=> 2 (because Child overwrote @@value)

另外如果在 main 中定义 class variables，他可以被所有类重写，也就是说其本质就相当于一个全局变量。

@@value = 3
puts Parent.value # => 3

modules

在 ruby 中 module 可以看做是 method 的容器，module 是 Module 的实例。其实可以把类看做是 modules 的一种特殊情况。 module 中可以定义实例方法也可以定义类方法，而类中的方法只能是实例方法。

module MyModule
  # Instance method defined on MyModule which is an instance of Module
  def MyModule.hello
    puts 'hello from module' 
  end

  # Same as "def MyModule.hello" because self is MyModule here
  def self.hello
    puts 'hello from module'
  end

  # Instance method for an instance of a class mixing-in MyModule
  def hello
    puts 'hello from instance'   
  end
end

MyModule.hello # => "hello from module"

module 中也可以定义实例变量。

module Fooable
  def self.foo=(value)
    @foo = value
  end

  def self.foo
    @foo
  end
end

Fooable.foo = "baz"
puts Fooable.foo # => "baz"

module 的用途一般都是将它融入到类中，这个时候虽然 module 不能实例化，但是因为融入到类的缘故它的实例方法也是可以被调用的。 modlule 融入到类有两种方法，一种是#include，另一种是#extend。 include – add a module’s methods as instance methods extend – add a module’s methods as class methods

module Helloable
  def hello
    puts "Hello World"
  end
end

class IncludeClass
  include Helloable
end

class ExtendClass
  extend Helloable
end

IncludeClass.new.hello
ExtendClass.hello

module 被引用两次的时候，第二次会被忽略掉

module HelloModule
  def say
    "hello from module"
  end
end

module GoodbyeModule
  def say
    "goodbye from module"
  end
end

class MyClass
  include HelloModule
  include GoodbyeModule
  include HelloModule
end

MyClass.new.say # => "goodbye from module"

两个 modules 定义了同一个方法，那么第一个会被第二个覆盖掉。

module Module1
  def hello
    "hello from module 1"
  end
end

module Module2
  def hello
    "hello from module 2"
  end
end

class HelloClass
  include Module1
  include Module2
end

HelloClass.new.hello # => "hello from module 2"

module 定义的方法不会覆盖类中定义的同名方法

module HelloModule
  def hello
    'hello from module'
  end
end

class HelloClass
  def hello
    'hello from class'
  end

  include HelloModule
end

HelloClass.new.hello # => 'hello from class'

Symbols

ruby 中的 Symbols 可以看做是其他语言的 enum，Symbol 以：开始。Symbol 也不需要事先声明，可以直接使用。

worker = {
  :name => "John Doe",
  :age => "35",
  :job => "Basically Programmer"
}

puts worker[:name] # => "John Doe"

这里有一点需要注意，最好不要动态创建 symbols，因为 symbols 本身不会被垃圾收集机制管理，一旦创建，直到程序退出才会释放。

Blocks and Storing Blocks

ruby 代码段可以用{}包裹，也可以用 do end 包裹。像 Javascript 这样的语言，函数是可以赋值给变量，并通过变量传递给其他函数的，这样的函数被称作为“first-class functions”，严格的说 Ruby 是不支持 first-class functions 的。但是 Ruby 可以用 procs 和 lambdas 存储区块的方式实现类似的功能。

add = lambda { |a, b| a + b }
puts add.call(1,2) # => 3

self

self 并不是一种特殊的语法，Ruby 允许用 self 在对象上定义方法。

a_string = "blerp"
def a_string.hello
  "hello"
end

a_string.hello # => "hello"

self 指代的是当前代码段的那个对象。

# At the top level, self is a special object called "main"
self # => main
self.class # => Object

# class definitions change the value of self
class SelfClass
  self # => SelfClass

  # Will be called on instances
  def self
    self
  end

  # Same as SelfClass.self
  def self.self
    self
  end
end

SelfClass.self # => SelfClass
SelfClass.new.self # => Instance of SelfClass

Lazy Initialization

大家习惯在构造函数中初始化实例变量。比如：

class Item
  attr_accessor :title

  def initialize
    @title = ""
  end
end

这样做存在一些弊端，譬如当有很多实例变量时，构造函数会很混乱，有些变量赋值后又不一定会被用到，我们不想在构造函数中赋值变量。这个时候可以用||=运算符。

class Item
  attr_writer :title

  def title
    @title ||= ""
  end
end

这样只有变量真正需要 set 的时候才会赋值（赋值为空的话就是一个空的字符串）。

Scope Resolution Operator (::)

当你定义了一个 module 或者 class 和 Ruby 核心的 module 重名的时候，你需要在你的 module 前加上::操作符。

module MyModule
  class File
  end

  class Thing
    def exist?(path)
      File.exist?(path)
    end
  end
end

thing = MyModule::Thing.new
thing.exist?('/etc/hosts') # => udefined method `exist?' for MyModule::File:Class

#add :: operator to the beginning of the colliding constant.
module MyModule
  class File
  end

  class Thing
    def exist?(path)
      ::File.exist?(path)
    end
  end

end

thing = MyModule::Thing.new
thing.exist?('/etc/hosts') # => true

instance_eval and class_eval

instance_eval/class_eval允许在对象外部定义方法。不同的是 class_eval 定义的是类级别的方法，也就是说调用对象是 class 或者 module，而 instance_eval 针对的是对象，它的调用对象本身就是一个 object，相对的 class_eval 创建的就是一个实例方法，而 instance_eval 创建的就是一个类方法了。

#class_eval
class Person
end

Person.class_eval do
  def say_hello
   "Hello!"
  end
end

jimmy = Person.new
jimmy.say_hello # "Hello!"

#instance_eval
class Person
end

Person.instance_eval do
  def human?
    true
  end
end

Person.human? # true

Privacy

在 ruby 中通过 private 关键词定义私有属性或方法。

class Secret
  def initialize
    @hidden = 123
  end

  private

  def hidden_method
    "You can't call me!"
  end
end

对象是无法直接调用私有方法的，可以通过 send 方式调用私有方法。

secret.send(:hidden_method)

Eigenclasses

这是一种没有实际名称的类，这个类中定义了一些方法供其他类来使用。这个概念有点像匿名类。

letters = ['a', 'b', 'c']

class << letters
  def capitalize
    self.map do |letter|
      letter.upcase
    end
  end
end

letters.capitalize #=> ['A', 'B', 'C']

Summary

实例变量以@开始，属于当前实例。实例变量可以在任何地方创建，包括 modules。没有赋值的实例变量默认为 nil。类变量以@@开始，几乎作为全局变量，很少使用。 module 是方法的容器 Class 是 modules 的一种，可以实例化并且有子类。 Ruby 不支持多重继承，但是多个 module 可以混合到一个类。所有方法都是实例方法，类方法是一个类对象的实例方法。代码块可以用 procs 或者 lambdas 存储引用。 Procs 像便携的代码，而 lambdas 像便携的方法。 Symbols 相当于枚举类型。 Symbols 不被垃圾机制回收，所有动态创建的时候要考虑到安全性。 self 返回的是当前的对象相比静态语言中在构造函数中初始化变量，有时 ruby 的 lazy initialization 更优雅些。 instance_eval 可以让类或者实例执行一个方法体或者一段代码。可以用 class_eval 去给类的实例定义方法。 Ruby 中静态变量命名规则为全大写字母。私有方法不能够被直接调用。对象可以通过 send 的方式调用方法。 method_missing 像 404 页面一样做方法的定义。

更正

1.symbol 可被垃圾机制回收感谢@chaucerling指出。 Feature #7791 中指出在 ruby2.2 中 symbol 将会被垃圾机制回收，其中指出一些 symbols 将会存储在指定空间的内存中，当空间占满时，最新存入的 symbol 会替换掉最早存入的 symbols。 2.关于 prepend @zhang_soledad指出。在 ruby2.0 中新增 prepend 用来在类中融入 module。具体的一些介绍可以参考 wosuopu 的这篇文章：https://ruby-china.org/topics/25397 3.关于 instance_eval 和 class_eval 定义方法说明的更正感谢@jyootai 指出。这里我之前提到 instance_eval 用来定义类方法，class_eval 用来定义实例方法，确实有疏漏的地方。准确的说明如下： Use ClassName.instance_eval to define a class method. Use ClassName.class_eval to define an instance method. 参考：http://web.stanford.edu/~ouster/cgi-bin/cs142-winter15/classEval.php 也就是说这句话的前提是在类下声明方法的时候。

Gulp 基础任务配置 [好的吧~这样会不会好一些~]

dandananddada — Thu, 07 May 2015 20:24:56 +0800

与 Grunt 的比较

和 Grunt 类似，Gulp 也是一个前端自动化构建工具。 Gulp 和 Grunt 最显著的区别就是 Gulp 采用编码大于配置，而 Grunt 相反配置大于编码。Gulp 是基于流的构建系统，相对更侧重各任务之间的衔接，而 Grunt 侧重于一些通用的任务。另外 Gulp 更易读，但是 Grunt 相对插件要多。

安装与配置

安装全局 gulp $ npm install --global gulp 创建项目，在项目目录下安装 gulp $ npm install --save-dev gulp 创建 gulpfile.js 文件，配置 gulp

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

运行 gulp $ gulp

定制简单的任务

这次的侧重点放在自动化任务上，而非 gulp 本身。首先说明下采用的目录结构为app/css下存放 scss 和 css 样式文件，app/js目录下存放 js 脚本文件，app根目录下存放 html 结构文件，在 dist 目录下存放 build 后的资源文件。 首先说明 Build Css 文件用到的一些插件： gulp-ruby-sass：用来将 scss 文件编译为 css 文件 gulp-autoprefixer：用来给 css 样式自动添加浏览器前缀 gulp-minify-css：用于 css 文件的压缩流程如下：首先将 css 目录下 scss 文件编译为 css 文件，对 css 文件添加浏览器前缀，重命名为*.min.css，然后压缩输出到dist/css目录。

gulp.task('css', function() {
  return sass('app/css/', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('app/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/css'))
    .pipe(livereload())
    .pipe(notify({ message: 'css task complete' }));
});

然后说明 Build Js 文件用到的插件 gulp-concat：用来合并文件，这里主要合并 js 文件 gulp-uglify：混淆压缩 js 流程如下：首先合并 app 目录下 js 文件（我这里想保留 js 目录结构所以注释掉了合并任务），修改前缀为*.min.js，执行混淆压缩命令输出到dist/js目录。

gulp.task('js', function() {
  return gulp.src('app/js/**/*.js')
    //.pipe(concat('main.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
    .pipe(livereload())
    .pipe(notify({ message: 'js task complete' }));
});

接下来说下非常有用的监视任务 gulp-webserver：用于在本地启动 Http 服务 gulp-livereload：livereload 用于浏览器自动刷新首先创建一个 watch 任务，监测所有资源文件是否发生修改，然后创建一个 webserver 任务，启动 watch 任务，webserver 任务启动时会自动打开浏览器加载当前 app 目录下 html 文件，当 watch 任务监测到文件修改时就会通知 livereload，浏览器就会实时刷新，省去了手动刷新的操作。

//Watch
gulp.task('watch', function() {

  // Watch .scss files
  gulp.watch('app/css/**/*.scss', ['css']);
  // Watch .js files
  gulp.watch('app/js/**/*.js', ['js']);
  // Watch image files
  gulp.watch('app/images/**/*', ['images']);
  // Create LiveReload server
  livereload.listen();
  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);

});

//Server
gulp.task('server', function() {
  gulp.src('app')
    .pipe(webserver({
      livereload: true,
      open: true
    }));
  gulp.start('watch');
});

最后说下 clean 任务 当你执行 build 任务，或者想删除 build 后的文件时，可以用 del 删除指定目录文件

var del = require('del');
// Clean
gulp.task('clean', function(cb) {
    del(['dist/','app/css/**/*.css'], cb)
});

有关于我的配置 可参考项目 helloGlup https://github.com/dandananddada/helloGulp.git 给出配置文件如下：

// Load plugins
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    webserver = require('gulp-webserver'),
    del = require('del');

//html
gulp.task('html', function() {
    return gulp.src("app/*.html")
        .pipe(gulp.dest('dist/'))
        .pipe(livereload())
        .pipe(notify({ message: 'html task complete' }));
}); 

// css
gulp.task('css', function() {
  return sass('app/css/', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('app/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/css'))
    .pipe(livereload())
    .pipe(notify({ message: 'css task complete' }));
});

// js
gulp.task('js', function() {
  return gulp.src('app/js/**/*.js')
    //.pipe(concat('main.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
    .pipe(livereload())
    .pipe(notify({ message: 'js task complete' }));
});

// Images
gulp.task('images', function() {
  return gulp.src('app/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'))
    .pipe(livereload())
    .pipe(notify({ message: 'Images task complete' }));
});

// Clean
gulp.task('clean', function(cb) {
    del(['dist/','app/css/**/*.css'], cb)
});


// Watch
gulp.task('watch', function() {

  //Watch .html files
  gulp.watch('app/**/*.html', ['html']);

  // Watch .scss files
  gulp.watch('app/css/**/*.scss', ['css']);

  // Watch .js files
  gulp.watch('app/js/**/*.js', ['js']);

  // Watch image files
  gulp.watch('app/images/**/*', ['images']);

  // Create LiveReload server
  livereload.listen();

  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);

});

//Build
gulp.task('build', ['clean'], function() {
    gulp.start('html','css', 'js', 'images');
});

//Server
gulp.task('server', function() {
  gulp.src('app')
    .pipe(webserver({
      livereload: true,
      open: true
    }));
  gulp.start('watch');
});

// Default task
gulp.task('default', ['build']);

Grunt 前端自动化构建工具 [方便懒得看英文文档的新同学]

dandananddada — Wed, 06 May 2015 19:54:11 +0800

Grunt 是一个 JavaScript 构建工具。

安装

在安装 Grunt 前需要安装 node NPM。首先全局安装 grunt-cli（grunt-cli 为 grunt 的命令工具）。 $ npm install -g grunt-cli 然后在开发的项目目录下安装 grunt。 $ npm install grunt 通过"—version"命令查看当前 cli 和 grunt 版本 $ grunt —version 通过 git 安装模板插件 $ git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntplugin 通过 grunt-init --help 命令可以查看到 Available templates，当前安装的模板名称为 gruntplugin。安装 grunt 常用的插件。 $ npm install grunt-contrib-uglify $ npm install grunt-contrib-concat $ npm install grunt-contrib-watch 以上基本需要安装的东西都完成了，接下来进行配置。当然这里你也可以不单独安装需要的 plugin，而是通过 npm install 命令直接安装 package.json 文件中引入的全部 plugins。

配置

Grunt 项目需要 package.json 和 Gruntfile.js/Gruntfile.coffee 这两个配置文件。其中 package.json 定义了项目中需要引入的 plugins，Gruntfile.js 定义了 Grunt 的配置信息。首先通过 grunt-init [模板名] 创建 Gruntfile.js 文件和 package.json 文件。 $ grunt-init gruntplugin 接下来通过 npm init 命令根据提示输入项目相关相应参数，完善 package.json 文件。 $ npm init 这里也可以 clone 我使用的项目 $ git clone https://github.com/dandananddada/helloGrunt.git 然后在根目录下执行 $ npm install 接下来就可以通过 Grunt 的命令查看定义的 Task，并且执行相应任务了。具体任务相关数据配置的说明可参考官网，不在这里细说了。 http://gruntjs.com/configuring-tasks

参考个人项目配置

https://github.com/dandananddada/helloGrunt.git

附录

Gruntfile.js

module.exports = function(grunt) {

    var config = {
        app: 'app',
        dist: 'dist'
    };

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        config: config,
        //sass->css编译插件
        sass: {
            options: {
                sourceMap: false
            },
            dist: {
                files: [{
                    expand: true,
                    cwd: '<%= config.app %>/styles/sass',
                    src: ['*.scss'],
                    dest: 'app/styles/',
                    ext: '.css'
                }]
            }
        },
        //清除build后生成的文件（清空dist目录）
        clean: {
            dist: {
                files: [{
                      dot: true,
                      src: [
                          '.tmp',
                          '<%= config.dist %>/*',
                          '!<%= config.dist %>/.git*'
                      ]
                }]
            },
        },
        //合并js和css文件
        concat: {
            js: {
                src: ['<%= config.app %>/js/**/*.js'],
                dest: '<%= config.dist %>/combine/<%= pkg.name %>.js'
            },
            css: {
                src: ['<%= config.app %>/styles/**/*.css'],
                dest: '<%= config.dist %>/combine/<%= pkg.name %>.css'  
            }
        },
        // 压缩css文件
        cssmin: {
            // 保持目录结构压缩
            compress: {
                files: [{
                      expand: true,
                      cwd: '<%= config.app %>/styles/',
                      src: ['*.css', '!*.min.css'],
                      dest: '<%= config.dist %>/release/css/',
                      ext: '.min.css'
                    }]
            },
            // 合并为一个文件后压缩
            build: {
                files: [{
                      expand: true,
                      cwd: '<%= config.dist %>/combine/',
                      src: ['*.css', '!*.min.css'],
                      dest: '<%= config.dist %>/release',
                      ext: '.min.css'
                    }]
            }
        },
        // 压缩js文件
        uglify: {
            options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            // 保持目录结构压缩
            compress: {
                options: {
                    mangle: true,
                    compress: {
                        drop_console: true
                    },
                    report: "min"
                },
                files: [{
                    expand: true,
                    cwd: '<%= config.app %>/js',
                    src: '**/*.js',
                    dest: '<%= config.dist %>/release/js',
                    ext: '.min.js'
                }]
            },
            // 合并为一个文件后压缩
            build: {
                options: {
                    mangle: true,
                    compress: {
                        drop_console: true
                    },
                    report: "min"
                },
                files: [{
                    expand: true,
                    cwd: '<%= config.dist %>/combine',
                    src: '**/*.js',
                    dest: '<%= config.dist %>/release',
                    ext: '.min.js'
                }]
            }
        },
        // 配置ctrl+s触发任务
        watch: {
            compile: {
                files: ['<%= config.app %>/styles/sass/**/*.scss'],
                tasks: ['sass'],
            },
            livereload: {
                options: {
                    livereload: '<%= connect.options.livereload %>'
                },
                files: [
                    '<%= config.app %>/{,*/}*.html',
                    '<%= config.app %>/{,*/}*.css',
                    '<%= config.app %>/images/{,*/}*'
                ]
            }
        },
        // 将当前站点作为服务器启动
        connect: {
            options: {
                port: 9001,
                open: true,
                livereload: 35729,
                hostname: 'localhost'
            },
            livereload: {
                options: {
                    middleware: function(connect) {
                        return [
                            connect.static(config.app)
                        ];
                    }
                }
            }
        },
        // 针对测试作为服务启动
        karma: {
            unit: {
                configFile: 'karma.conf.js'
            }
        }
    });

    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-karma');

    // 将sass文件编译为css文件
    grunt.registerTask('compile', ['sass']);
    // 清理dist目录
    // grunt clean,grunt-contrib-clean内置任务
    // 分别合并js和css文件为一个文件
    grunt.registerTask('combine',['compile','concat:css','concat:js']);
    // 保持原目录结构压缩css文件和js文件
    grunt.registerTask('compress',['compile','cssmin:compress','uglify:compress']);
    // 部署js文件和css文件（分别将js和css文件合并压缩为一个文件）
    grunt.registerTask('build',['clean:dist','compile','combine','cssmin:build','uglify:build']);
    //将当前站点作为服务启动
    grunt.registerTask('server', ['connect:livereload','watch','watch:compile']);
    // 启动js单元测试服务
    grunt.registerTask('test', ['karma']);
    // 设置grunt默认任务为server
    grunt.registerTask('default', ['server']);
};

Rails 新手发个学习写的项目

dandananddada — Tue, 21 Apr 2015 09:09:39 +0800

项目实现了一个简单的 CMS 系统，包括分栏、文章、图集等信息的管理。项目地址：https://github.com/dandananddada/CrowCMS 演示地址：http://54.148.31.53/login 密码：admin1234 如上，混个脸熟。。。

求助 Rails Hash 格式化输出

dandananddada — Wed, 15 Apr 2015 08:30:30 +0800

现在 print 出来的格式是这样的{ :label=> "Chrome", :data=> 2 },能不能按照另外的写法打印出来：{ label: "Chrome", data: 2 },因为前台要解析需要的格式是这样的。

新手求助，数据格式转换【已解决】

dandananddada — Tue, 14 Apr 2015 21:13:59 +0800

Rails 项目，现在后台返回如下格式数据 A:{ "Chrome"=>1, "Firefox"=>2 } ，前台用 flot 做成扇形，需要的数据格式 B 如下：[{ label: "Chrome" , data: 1}, { label: "Firefox", data: 2} ]。请问怎么操作能将 A 格式转换成 B 格式。谢谢~