使用zen coding、gulp、livereload、sass提高前端编码效率
来源:互联网 发布:淘宝不关联商户可以吗 编辑:程序博客网 时间:2024/06/12 06:40
前端开发存在的问题:
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的Taskgulp.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时,默认的Taskgulp.task('default', ['connect', 'sass','watch']);
当然大家也可以根据自己的实际业务需求自己编写gulpfile这里不对gulp的配置方法做说明,大家可以去网上查找相关教程。
以上,所有的项目初始化工作已经完成!!!
--------------------------------------------------------------------------------------------
下面给出接着编写代码的实例,测试一下项目的构建是否成功。
大家感受一下这种配置的妙处!
1、在public文件夹下面新建index.html
记得使用zen coding
html:5Tab后,生成了一份标准的html5模板。
2、打开终端,切换到项目根目录下面:
gulp
在浏览器中输入
localhost:8080
接下来,我们修改sass文件或者html文件,保存的时候浏览器都会同步刷新!
红框内为修改sass或者html时,gulp给的提示信息
可以从github上下载项目的测试代码:
https://github.com/boomler/testGulp
- 使用zen coding、gulp、livereload、sass提高前端编码效率
- 使用gulp-sass 和 gulp-livereload 自动编译sass文件
- gulp-livereload组件使用
- 使用Emmet(前身Zen Coding)加速Web前端开发
- UltraEdit Zen Coding使用.
- Notepad++使用zen-Coding
- zen-Coding的使用
- zen-coding的使用
- 使用VA-Snippets提高Coding效率
- 使用gulp编译sass
- 使用lombok提高编码效率
- Notepad++中zen-Coding使用
- Emmet (Zen Coding) 使用示例
- Zen Coding – WEB前端开发利器
- 前端开发神器:notepad++插件zen-coding
- 前端开发利器 - Emmet (Zen Coding)
- 前端开发必备!Emmet(Zen Coding)使用手册
- 前端神器Emmet/zen coding---HTML速写
- 自定义特性的使用--扩展enum的使用
- HTML获取链接中的参数(解决中文乱码问题)
- getopt函数和getopt_long函数详解
- activiti自定义流程之Spring整合activiti-modeler5.16实例(六):启动流程
- 剑指offer:重建二叉树
- 使用zen coding、gulp、livereload、sass提高前端编码效率
- 分析Linux内核创建一个新进程的过程(Linux)
- [Commons]——Predicte断言
- swift segment实现页面切换
- neural network and deep learning笔记(2)
- 图像旋转后的还原图像坐标
- 35.leetcode题目100: Same Tree
- 360浏览器全球首家支持“内核自主控制”功能
- 赞:淘宝版的nginx