極其簡單的使用基於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
    ```

說明

我知道這個流程不夠強大，但倒是最適合個人。期間，我也折騰過各類高大上的流程，但統統都不了了之。因此，大道至簡。