892
Gulp如何編譯sass
Gulp 是一個自動化工具，前端開發者可以使用它來處理常見任務：
1、搭建web服務器
2、文件保存時自動重載瀏覽器
3、使用預處理器如Sass、LESS
4、優化資源，比如壓縮CSS、JavaScript、壓縮圖片
當然Gulp能做的遠不止這些。如果你夠瘋狂，你甚至可以使用它搭建一個靜態頁麵生成器。Gulp真的足夠強大，但你必須學會駕馭它。
這是這篇文章的主要目的。幫助你了解Gulp的基礎用法，助你早日完成一統天下的大業。
我們將要做的
這篇文章的最後，你會擁有簡單的一個工作流：
- 編譯Sass
除此之外，你還將學會使用簡單命令鏈式調用多個任務。
安裝Gulp
安裝Gulp之前你需要先安裝Node.js。
如果你還沒安裝Node，你可以在 這裏 下載。
安裝完Node.js，使用Terminal(終端，win下是cmd)用下麵命令安裝Gulp
$ sudo npm install gulp -g
隻有mac用戶才需要sudo命令，並且不要把$符號也複製進去，這不是你的菜。
npm install 是指定從Node Package Manager(npm 你怕毛)安裝的命令。
-g 表示全局安裝，這樣你在電腦上任何位置都能隻用gulp 命令。
Mac 用戶需要管理員權限才能全局安裝，所以需要sudo。
接下來使用Gulp創建項目。
創建Gulp項目
首先，我們新建一個project文件夾，並在該目錄下執行 npm init 命令：
$ npm init
npm init命令會為你創建一個package.json文件，這個文件保存著這個項目相關信息。比如你用到的各種依賴（這裏主要是插件）（終端會自動出現下麵內容，這裏先隨便填就行）
創建完之後，我們執行下麵的命令：
$ npm install gulp --save-dev
這一次，我們局部安裝Gulp。使用—save-dev，將通知計算機在package.json中添加gulp依賴。
目錄結構如下
在這個結構中，我們使用app文件夾作為開發目錄（所有的源文件都放在這下麵），dist文件夾用來存放生產環境下的內容。
這些文件名，你想怎麼起都行，但請務必記住你的目錄結構。現在我們來創建gulpfile.js，輸入如下。
下麵來安裝gulp-sass插件編譯sass文件，
1、app下命令行輸入：
$ npm install gulp-sass --save-dev
此時package.json文件會自動更新依賴包！
2、在gulpfile.js內引入該插件
3.告知gulp要執行的任務，gulpfile.js中的task任務
此時命令行執行
gulp sass
會在dist/css/自動編譯生成所有的css
最後更新：2017-11-05 11:35:23