简单的记录自己如何在实际工作中使用gulp和sass的。我的原则是,小而美!
gulp与sass介绍
gulp
什么是gulp?和Grunt一样,是一种任务管理工具;和Grunt又不一样,gulp是一种基于流的,代码优于配置的新一代构建工具。
Gulp 和 Grunt 类似,但相比于Grunt的频繁的IO操作,Gulp的流操作,能更快地完成构建。
sass
Sass是"Syntactically Awesome StyleSheets"的简称。如同less,stylus一样,是“CSS预处理器”中的一种,你可以称其是工具或者是语言。在我看来,sass除了不够小而美以外,确实是很强大的。Sass官网上是这么来描述的:
Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.
如何安装gulp与sass
自己上网谷歌或者百度去!
gulp任务管理
通过gulp做了如下任务:
- sass预编译,并且生成sourcemap,方便调试
- autoprefixer后编译,自动添加浏览器前缀
- css、js、图片等文件压缩
- js代码检查
- 本地服务器
- 自动监听
如何使用
首先,确保已经安装nodejs(nodejs如何安装?O(∩_∩)O~呵呵)。
然后,全局安装gulp
npm install gulp -g
- clone到本地
git clone https://github.com/myqianlan/f2e-workflow.git
- 下载依赖
cd f2e-workflow
npm install
-
运行
```bash
gulp help
```
说明
我知道这个流程不够强大,但却是最适合我的。期间,我也折腾过各种高大上的流程,但通通都不了了之。所以,大道至简。