简单的记录自己如何在实际工作中使用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前端工作流的更多相关文章

  1. 2.4 webpack + gulp 构建完整前端工作流

    在前面的两个小节中已经完整的讲了 webpack 和 gulp 相关的内容,本小节中将会结合二者构建一个完整的前端工作流,内容目录为: 前端工程结构和目标 前端工程目录结构 gulp clean gu ...

  2. [转]基于gulp和webpack的前端工程化

    本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux ...

  3. 基于gulp编写的一个简单实用的前端开发环境好了,安装完Gulp后,接下来是你大展身手的时候了,在你自己的电脑上面随便哪个地方建一个目录,打开命令行,然后进入创建好的目录里面,开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json,打开的速度看你的网速了注意:以下是为了演示 ,我建的一个目录结构,你自己可以根据项目需求自己建目

    自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...

  4. 基于gulp编写的一个简单实用的前端开发环境

    自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...

  5. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  6. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  7. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  8. 介绍一种基于gulp对seajs的模块做合并压缩的方式

    之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块 ...

  9. 使用gulp编译sass

    之前写了一篇在ruby环境下如何编译sass的文章:<css预处理器sass使用教程(多图预警)>,随着现在前端构建工具的兴起,也学着使用这些工具来编译sass.webpack存在一个CS ...

随机推荐

  1. javascript表单(form)序列化

    function serialize(form){ var part =[]; var field = null; var i; var j; var len; var optLen; var opt ...

  2. C#中的强制类型转换与as转换的区别

    C#中的强制类型转换 例如有ClassA与ClassB两个类创建两个类的对象进行转换 1 2 ClassA a = new ClassA();  ClassB b = new ClassB(); 如果 ...

  3. Java中重写与重载的辨析

    摘要:在我们学习Java过程中,重写与重载使我们在面向对象里要学习的重要知识点之一,那我们看看它们有那些区别: 一.重写 1.概念:简单的说就是子类将从父类继承而来的方法重新实现一次. 2.特点: ① ...

  4. C# 添加类库依赖

  5. Java模拟登录系统抓取内容【转载】

    没有看考勤的习惯,导致我的一天班白上了,都是钱啊,系统也不发个邮件通知下....     为了避免以后还有类似状况特别写了个java模拟登录抓取考勤内容的方法(部分代码来自网络),希望有人修改后也可以 ...

  6. oracle批量导出AWR报告

    工作需求:项目中需要把生产库中所有的AWR报告dump出来,然后导入到方便测试的数据库中.在测试库中的AWR报告需要根据dbid和实例名逐个导出,如果遇到很多再加上RAC系统,会很麻烦.在网上找了一些 ...

  7. MyBatis之一:入门

    一.什么是Mybatis 可以简单将mybatis理解为ibatis的升级版本,它是一个java的持久层框架,底层依赖jdbc接口,此持久层框架包含sql maps与data access objec ...

  8. Delphi 多文件拖放获取路径示例

    unit Unit1;interfaceuses  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, ...

  9. 用adb pull命令从android系统中读取文件失败的原因及解决办法

    问题:使用adb pull命令从android系统中读取文件失败.显示:Permission denied   原因:是由于文件权限原因引起.       使用ls -l命令查看android系统中的 ...

  10. Android多媒体应用开发-控制摄像头拍照

    现在的手机的功能可谓是五花八门,手机照相功能就是特别突出的一点,现在的手机照相机甚至成了专业数码照相机,可以拍摄出清晰的照片和录制高分辨率的视频.Android操作系统呢,提供了相应的功能来控制拍照: ...