使用zen coding、gulp、livereload、sass提高前端编码效率

前端开发存在的问题：

1、HTML代码多，书写缓慢；

比如说新建8个li相同的元素，不借助zen coding 的话要手动敲8个，或者偷懒复制粘贴8次？

2、项目一大起来，CSS变得无法维护；

主要问题在于各种选择的嵌套使得CSS不易读，不易更改；

另外，css没法使用变量，使得对于一个相同属性的修改要修改多处，比如说改变了图片文件夹的位置，所有CSS里面使用的图片的地方是否都要修改？比如说一个网站的主色调要改，是否要把所有用到这个颜色的地方全部修改？

3、频繁刷新浏览器，影响工作效率。

为了验证或者预览我们编写的前端代码的效果，我们要不时地去刷新浏览器。另外，每个人都遇到过浏览器缓存的问题，半天不知道为什么效果没出来？

那么前端发展到现在，我们也需要借助一些工具和插件解决这些问题，提高编程体验的同时，大副提高编码效率。

目的： 

1、使用zen coding快速生成代码； 
2、使用sass编写css代码； 
3、利用gulp执行一些自动化操作； 
4、使用livereload自动自动刷新浏览器。 
本文主要讲一下怎么将这些插件、npm包配置起来，并用gulp自动化管理。  
一、zen coding 
zen coding是一个俄国人在2009年开发的一个插件。它能够仿照CSS选择器的描述自动生成想要的代码。 

例如：

nav>li*8

单击tab键后会生成下面的代码：

<nav>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</nav>

要想在编辑器中使用zen coding编写代码，要安装相应的插件。例如sublime对应的Emmit插件。 

这里附上在sublime上安装和使用Zen coding的教程： 

安装：http://www.haorooms.com/post/sublime_use 
使用：http://www.haorooms.com/post/emmet_s

二、sass 
sass为CSS引入变量、函数等概念，大幅提高CSS代码的编写效率。 
他最大的优点在于提供了许多便利的写法，同时使得CSS的开发，变得简单和可维护。 
这里附上一段最近写的sass代码大家感受一下：

nav {
    background-color: $nav-color;
    width: 100%;
    height: 45px;
    li {   //li嵌套在nav标签下
        padding: 0 10px;
        float:left;
        a { //a又嵌套在li标签下
            text-decoration: none;
            color: #b0b0b0;
            font-size: 14px;
            line-height: 45px;
            &:hover {  //这里直接可以顺便把hover的样式也加上（&这里指代a标签）
                color: #FFF;
            }
        }
    }
}

上面一段sass代码最终经过编译会生成下面的css：

nav {
  background-color: #333;
  width: 100%;
  height: 45px;
}
nav li {
  padding: 0 10px;
  float: left;
}
nav li a {
  text-decoration: none;
  color: #b0b0b0;
  font-size: 14px;
  line-height: 45px;
}
nav li a:hover {
  color: #FFF;
}

可以很清楚的看出来使用sass编写的代码结构非常清晰，后期维护也更方便。不过sass的文件最终还是需要编译为CSS文件才能直接使用。后面我会分享我的自动化这一过程的方法。

sass教程：http://www.w3cplus.com/sassguide/ 
三、livereload 

简单地说，livereload做了这么一件事情：监测网页文件的变化，自动刷新浏览器，实时呈现效果。 

这里要在浏览器上安装相应插件，我在chrome上安装的是 LiveReload 2.1.0

注意：

livereload插件启动时，中心的原点是实心的！当你发现原点是空心的时候，手动点击开启~

四、gulp 
gulp大有取代grunt之势。

它的理念就是--“用自动化构建工具增强你的工作流程！”

我们这里来利用它实现一些自动化任务：

1、监测带sass文件修改后，自动编译sass，刷新浏览器;

2、检测到html文件发生变化，刷新浏览器

----------------------分隔线------------------------------------

上面是一些简单的介绍，下面开始怎么构建项目
五、实施教程 

1）环境要求：
1、安装nodejs 
2、安装ruby 

步骤：
1、新建项目

这里简单地新建一个文件夹，后面我们手动安装包，添加配置文件。

2、初始化package.json配置文件：

命令行中输入：

npm init

输入这个命令后，会提示你输入项目名称、版本号、等等信息，按照提示输入即可。

输入完成后，根目录下会生成package.json文件，打开可以看到类似下面的代码：

{
  "name": "testgulp-demo",
  "version": "1.0.0",
  "description": "test gulp build tools",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "wanghao",
  "license": "ISC"
}

现在这里面并没有我们需要关心的东西，接着往下走：

3、安装npm包

安装我们项目需要的一些插件：

命令行中执行下面命令：

npm install gulp gulp-ruby-sass  connect-livereload gulp-connect --save-dev

安装完成之后，项目根目录下会生成node_modules文件夹，这里存放着刚刚安装的插件。
同时打开package.json文件，我们会发现多了devDependencies字段，理解为开发过程中需要的包。（注： npm install 命令后面附上--save-dev会将新安装的包添加到devDependencies里面）

  "devDependencies": {
    "connect-livereload": "^0.5.4",
    "gulp": "^3.9.1",
    "gulp-connect": "^3.2.2",
    "gulp-ruby-sass": "^2.0.6"
  }

配置包管理的一个好处就是，在将代码用在他处时，只需要拷贝出自己写的源文件和package.json即可，在新的项目里面执行npm init(后面不加参数)，npm包管理系统会根据package.json的配置自动安装所需包。

4、新建一些文件夹，管理代码

我在根目录下面新建了public文件夹存放前端代码；

public下面新建sass、stylesheets文件夹分别存放sass文件和编译后的css文件

所以现在项目根目录是这样的：

public文件夹：

5、编写gulpfile.js

在项目的根目录下运行gulp命令，系统执行gulpfile.js的内容：

下面直接附上我写好的：

var gulp = require('gulp');
var connect = require('gulp-connect');
var sass = require('gulp-ruby-sass');

//创建watch任务去检测html文件,其定义了当html改动之后，去调用一个Gulp的Task
gulp.task('watch', function() {
    gulp.watch(['./public/*.html'], ['html']);
    gulp.watch(['./public/sass/*.scss'], ['sass']);
  
});

gulp.task('connect', function() {
    connect.server({
        root: 'public',
        livereload: true
    });
});
 
gulp.task('sass', function() {
  return sass('./public/sass/*.scss', { style: 'expanded' })
    .pipe(gulp.dest('./public/stylesheets'))
    .pipe(connect.reload())
});
gulp.task('html', function() {
    gulp.src('./public/*.html')
        .pipe(connect.reload())


});


//运行Gulp时，默认的Task
gulp.task('default', ['connect', 'sass','watch']);

当然大家也可以根据自己的实际业务需求自己编写gulpfile

这里不对gulp的配置方法做说明，大家可以去网上查找相关教程。

以上，所有的项目初始化工作已经完成！！！

--------------------------------------------------------------------------------------------

下面给出接着编写代码的实例，测试一下项目的构建是否成功。

大家感受一下这种配置的妙处！

 1、在public文件夹下面新建index.html

记得使用zen coding

html:5

Tab后，生成了一份标准的html5模板。

2、打开终端，切换到项目根目录下面：

gulp

这个命令后面不用跟任何参数，默认执行default任务。

当出现如下输出时，gulp启动成功····

在浏览器中输入

localhost:8080

接下来，我们修改sass文件或者html文件，保存的时候浏览器都会同步刷新！

红框内为修改sass或者html时，gulp给的提示信息

可以从github上下载项目的测试代码：

https://github.com/boomler/testGulp