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
        ```
      

    说明

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

  • 相关阅读:
    控件属性大全(持续更新)
    STM32F0使用LL库实现UART接收
    STM32F0 LL库IIC第二地址配置错误
    C# 抽象类小谈
    DevExpress 动态换肤
    DevExpress ChartControl大数据加载时有哪些性能优化方法
    Devexpress WPF ChartControl 多Y轴
    Lambda表达式的使用
    Prism--MVVM 之Command
    WPF Toolkit Chart--动态换列
  • 原文地址:https://www.cnblogs.com/myqianlan/p/4195999.html
Copyright © 2011-2022 走看看