zoukankan      html  css  js  c++  java
  • 极其简单的使用基于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
        ```
      

    说明

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

  • 相关阅读:
    python等缩进语言的词法分析实现
    收集Android程序测试代码覆盖率
    对语言之争的看法
    关于asmlinkage
    洛谷 P4171 [JSOI2010] 满汉全席(2sat)
    Codeforces Round #748 (Div. 3)解题报告
    洛谷 P1712 [NOI2016] 区间(尺取法、线段树)
    洛谷 P4782 【模板】2SAT 问题
    洛谷 P3513 [POI2011]KONConspiracy(2sat方案数)
    梦见和深爱的女孩牵着手,竟然从梦中幸福惊醒,醒后一片悲伤~~
  • 原文地址:https://www.cnblogs.com/myqianlan/p/4195999.html
Copyright © 2011-2022 走看看