互联网 您还不是本圈会员,您可以 +加入圈子

gulp-work-flow 前端工作流原来可以这么简单

狐狐网友  2017-1-3 15:17

概述

最近前端一直是一个火热的话题,前端技术栈也是伴随着nodejs的出现而更替的飞快,导致大部分前端开发者曾一度迷茫在这各种技术选型上,比如前端自动化工具就有Grunt,Gulp,Webpack,Fis3等等各种解决方案,关于它们的优劣也有很多大牛的深度剖析和见解,相信很多人和笔者一样,很想紧跟上潮流的步伐却因乱花渐欲迷人眼而止步当前。西安华育国际 专注IT行业17年。

无奈笔者倔强,在多次拿起放下的纠结之后,终究是寻得一些灵感和启发,得以驾驭其一二。
话不多说,今天的主题是:使用Gulp打造传统项目的前端工作流。

可能很多开发者像我一样依然还服务于传统的MVC架构的项目,这些项目的特点是html页面由后台渲染,前端工程师和后端工程师在一个工程中和(si)谐(bi)的生活着,前端开发简单而又轻松,拼拼页面,写写特效,可能还会用用后端语法渲染下数据。那么问题来了,我想用sass或者less怎么办?我想写ES6怎么办?js文件太大需要压缩怎么办?现在,这些问题将统统可以解决。

Gulp

gulp是nodejs的一个扩展库,是一个自动化的构建工具,它的优势是拥有丰富的插件,利用插件我们可以实现像sass编译,ES6转换为ES5等各种前端工作。API不多,只有简单的几个函数,官方有简洁友好的中文跟文档。

gulp快速入门

gulpAPI文档

编译Sass

sass是一个css的预处理器,它由很多很棒的特性比如支持变量,支持文件引入,支持样式嵌套继承等等,可以大大提升我们的css书写效率。
sass依赖ruby环境,单独安装sass的话就存在着一个麻烦的环境部署问题,好在gulp拥有gulp-sass插件可以帮我们进行转换而省去了安装ruby的繁琐工作,下边是笔者的sass编译任务

您还不是本圈会员,您可以 +加入圈子