极其简单的使用基于gulp和sass前端工作流
简单的记录自己如何在实际工作中使用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
```
说明
我知道这个流程不够强大,但却是最适合我的。期间,我也折腾过各种高大上的流程,但通通都不了了之。所以,大道至简。
极其简单的使用基于gulp和sass前端工作流的更多相关文章
- 2.4 webpack + gulp 构建完整前端工作流
在前面的两个小节中已经完整的讲了 webpack 和 gulp 相关的内容,本小节中将会结合二者构建一个完整的前端工作流,内容目录为: 前端工程结构和目标 前端工程目录结构 gulp clean gu ...
- [转]基于gulp和webpack的前端工程化
本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux ...
- 基于gulp编写的一个简单实用的前端开发环境好了,安装完Gulp后,接下来是你大展身手的时候了,在你自己的电脑上面随便哪个地方建一个目录,打开命令行,然后进入创建好的目录里面,开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json,打开的速度看你的网速了注意:以下是为了演示 ,我建的一个目录结构,你自己可以根据项目需求自己建目
自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...
- 基于gulp编写的一个简单实用的前端开发环境
自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...
- 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)
前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 介绍一种基于gulp对seajs的模块做合并压缩的方式
之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块 ...
- 使用gulp编译sass
之前写了一篇在ruby环境下如何编译sass的文章:<css预处理器sass使用教程(多图预警)>,随着现在前端构建工具的兴起,也学着使用这些工具来编译sass.webpack存在一个CS ...
随机推荐
- javascript表单(form)序列化
function serialize(form){ var part =[]; var field = null; var i; var j; var len; var optLen; var opt ...
- C#中的强制类型转换与as转换的区别
C#中的强制类型转换 例如有ClassA与ClassB两个类创建两个类的对象进行转换 1 2 ClassA a = new ClassA(); ClassB b = new ClassB(); 如果 ...
- Java中重写与重载的辨析
摘要:在我们学习Java过程中,重写与重载使我们在面向对象里要学习的重要知识点之一,那我们看看它们有那些区别: 一.重写 1.概念:简单的说就是子类将从父类继承而来的方法重新实现一次. 2.特点: ① ...
- C# 添加类库依赖
- Java模拟登录系统抓取内容【转载】
没有看考勤的习惯,导致我的一天班白上了,都是钱啊,系统也不发个邮件通知下.... 为了避免以后还有类似状况特别写了个java模拟登录抓取考勤内容的方法(部分代码来自网络),希望有人修改后也可以 ...
- oracle批量导出AWR报告
工作需求:项目中需要把生产库中所有的AWR报告dump出来,然后导入到方便测试的数据库中.在测试库中的AWR报告需要根据dbid和实例名逐个导出,如果遇到很多再加上RAC系统,会很麻烦.在网上找了一些 ...
- MyBatis之一:入门
一.什么是Mybatis 可以简单将mybatis理解为ibatis的升级版本,它是一个java的持久层框架,底层依赖jdbc接口,此持久层框架包含sql maps与data access objec ...
- Delphi 多文件拖放获取路径示例
unit Unit1;interfaceuses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, ...
- 用adb pull命令从android系统中读取文件失败的原因及解决办法
问题:使用adb pull命令从android系统中读取文件失败.显示:Permission denied 原因:是由于文件权限原因引起. 使用ls -l命令查看android系统中的 ...
- Android多媒体应用开发-控制摄像头拍照
现在的手机的功能可谓是五花八门,手机照相功能就是特别突出的一点,现在的手机照相机甚至成了专业数码照相机,可以拍摄出清晰的照片和录制高分辨率的视频.Android操作系统呢,提供了相应的功能来控制拍照: ...