css預處理框架的學習（簡單易懂網址）

1.Less的學習：https://less.bootcss.com/，

簡單理解路線：基於javascript的css前處理器，兩種方式運用（node.js中，瀏覽器中外聯引入）；

主要語法：變數，混合，函式，運算，巢狀，maps，作用域，Namespace and Accessors【使用其他元素內部混合的樣式】

2，stylus學習：https://www.jianshu.com/p/c22dd5d95bf2

基本語法與less大同小異，對於css預處理框架的對比，可以參考這個https://www.w3cplus.com/css/sass-vs-less-vs-stylus-a-preprocessor-shootout.html

【3，Sass:基於ruby的前處理器可以項函式一樣去程式設計，構建自己的底層樣式框架，目前很少用到，不做詳細描述】

前端構建與專案應用

grunt學習：https://www.gruntjs.net/getting-started

安裝：npm install -g grunt-cli

工作示例：新建grunttest檔案（檔案內需要package.json 和 Gruntfile[寫任務的js檔案]）=》進入檔案npm init生成package.json=》執行npm install grunt -save-dev生成node包=》建立Gruntfile.js=》執行grunt命令

注意：編寫Gruntfile.js內的功能內容才能夠執行grunt

Git