极其简单的使用基于gulp和sass前端工作流
2014-12-31 16:27
459 查看
简单的记录自己如何在实际工作中使用gulp和sass的。我的原则是,小而美!
Gulp 和 Grunt 类似,但相比于Grunt的频繁的IO操作,Gulp的流操作,能更快地完成构建。
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.
sass预编译,并且生成sourcemap,方便调试
autoprefixer后编译,自动添加浏览器前缀
css、js、图片等文件压缩
js代码检查
本地服务器
自动监听
然后,全局安装gulp
clone到本地
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[/code]
下载依赖cd f2e-workflow npm install
运行```bash gulp help ```说明
我知道这个流程不够强大,但却是最适合我的。期间,我也折腾过各种高大上的流程,但通通都不了了之。所以,大道至简。
相关文章推荐
- 使用zen coding、gulp、livereload、sass提高前端编码效率
- 基于gulp编写的一个简单实用的前端开发环境
- gulp 简单命令------sass文件编译css ----安装以及使用
- 基于gulp编写的一个简单实用的前端开发环境
- 使用 ADD-ON SDK 开发 基于 Html JQuery 和 CSS 的 firefox 插件入门教程1: 创建一个简单的 Add-on
- 使用SharePoint Designer 设计简单工作流
- 海洋工作室——网站建设专家:【原】基于文件驱动的网站开发,易于维护,且使用简单,所见即所得!
- 使用Net类库,实现的基于TCP/IP简单的通讯框架框架(一)
- [置顶] 使用红孩儿工具箱完成基于Cocos2d-x的简单游戏动画界面
- 基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
- 基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
- 使用 WebSphere Portlet Factory 构建基于 Web2.0 的灵活 SOA 前端
- jqPlot——基于jquery的图表绘制工具简单使用,jqPlot 在firefox 火狐浏览器里面,图表右侧的标题,变形的解决方法
- 创建一个基于for 的简单的循环。使其循环10 次,并且使用fmt 包打印 出计数器的值
- 基于SharePoint 2010 创建一个简单的工作流
- 使用 WebSphere Portlet Factory 构建基于 Web2.0 的灵活 SOA 前端
- 使用Spring来创建一个简单的工作流引擎
- Spring:使用JdbcTemplate的简单实例-基于注释