轩枫阁

首页 / 第13页

gulp详细入门教程

一、gulp简介

1.gulp是什么?

gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用它,不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器, 它能自动化地完成 javascriptcoffeesasslesshtml/imagecss 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。

gulpgrunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作。 查看全文

2016/09 17  周六

轩枫阁V3主题设计开发总结—技术篇

前言

轩枫阁V3.0主题已上线,自2013年上线发布,V1-V3,3年。3个月完成V3主题PC端、移动端交互原型、网页重构、功能开发、工具一键上线。

本次主题的更新,对整站进行优化,主要包括设计改版、性能优化、体验优化。

本文主要针对主题各类技术开发进行总结:

  • 主题分离篇
  • 重构篇
  • 图片优化篇
  • 开发篇
  • 构建篇
  • 加载篇

设计篇:轩枫阁V3主题设计开发总结—设计篇 查看全文

2016/09 06  周二

轩枫阁V3主题开发-开发篇

前言

本文介绍关于轩枫阁V3主题开发内容,分为移动端和PC端。

移动端

针对移动端主题的开发处理主要有表格滚动条、纯文本简介、搜索标签、文件模块、loading加载、判断页面类型、微信图片预览等。

表格处理

文章里面的表格,经常宽度会大于移动设备屏幕的宽度,所以给表格加上滚动条尤为重要。

WP在编辑文章插入表格时,会插入table标签,外层并没有特殊的class来标记含有表格,所以无法直接通过CSS的方式加上横向滚动条。

1. JS判断表格,给外层加上指定Class。这种方法实现的会比较不友好。

2. 通过PHP给table表格加上class 查看全文

2016/09 06  周二

轩枫阁V3主题开发-重构篇

前言

轩枫阁V3主题已上线,本文将介绍本站V3主题关于CSS重构的内容。兼容IE9+,主要看Chrome表现。

LESS

鉴于Less能满足本站主题开发的需求,就没有更换成Sass。Less介绍:http://www.lesscss.net/

mixins

基于 LessCSS代码片段复用和混入库,主要有圆角border-radius、渐变gradient、内阴影inner-shadow、阴影box-shadow、动画animation、transition、宽度计算calc-width、省略text-overflow等,代码见附录。 查看全文

2016/09 03  周六

轩枫阁V3主题开发-加载篇

前言

轩枫阁V3主题已上线,本文将介绍本站V3主题关于加载优化的内容。

图片优化

关于图片,这里使用传统的优化方式。本站使用的图片主要有各类图标、大图、文章配图、文章内容图等。

雪碧图

使用雪碧图Sprite,将各图标合并成一张图,可以减少HTTP请求数。

开发过程中,使用单个图标,结合tmt-workflow,在发布时将图片合并。同时移动端支持2倍雪碧图,只需同时将2x图标放至slice目录即可。 查看全文

2016/09 03  周六

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子