博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
极其简单的使用基于gulp和sass前端工作流
阅读量:5268 次
发布时间:2019-06-14

本文共 1117 字,大约阅读时间需要 3 分钟。

简单的记录自己如何在实际工作中使用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-workflownpm install
  • 运行

    ```bash  gulp help  ```

说明

我知道这个流程不够强大,但却是最适合我的。期间,我也折腾过各种高大上的流程,但通通都不了了之。所以,大道至简。

转载于:https://www.cnblogs.com/myqianlan/p/4195999.html

你可能感兴趣的文章
安装测试
查看>>
head
查看>>
【JAVA编码专题】深入分析 Java 中的中文编码问题
查看>>
数据库锁
查看>>
pod install 无限卡顿
查看>>
论语·子路
查看>>
powershell获取windows子文件夹的大小
查看>>
Html ul、dl、ol 标签
查看>>
软工读书笔记 week4 ——《黑客与画家》下
查看>>
Astyle编程语言格式化工具的说明
查看>>
java中调用javascript
查看>>
PHP数组
查看>>
C语言数据结构之单链表的拆分
查看>>
Ext属性详细信息
查看>>
codeforces A. K-Periodic Array 解题报告
查看>>
安装wamp 缺少msvcr100.dll
查看>>
light oj 1079 01背包
查看>>
bzoj2144: 跳跳棋
查看>>
设计模式学习--Singleton
查看>>
webApp开发-ionic2+angular2
查看>>