Gulp如何編譯sass

1、搭建web服務器

2、文件保存時自動重載瀏覽器

3、使用預處理器如Sass、LESS

4、優(yōu)化資源，比如壓縮CSS、JavaScript、壓縮圖片

當然Gulp能做的遠不止這些。如果你夠瘋狂，你甚至可以使用它搭建一個靜態(tài)頁面生成器。Gulp真的足夠強大，但你必須學會駕馭它。

這是這篇文章的主要目的。幫助你了解Gulp的基礎用法，助你早日完成一統(tǒng)天下的大業(yè)。

我們將要做的

這篇文章的最后，你會擁有簡單的一個工作流：

編譯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創(chuàng)建項目。

創(chuàng)建Gulp項目

首先，我們新建一個project文件夾，并在該目錄下執(zhí)行 npm init 命令：

$ npm init

npm init命令會為你創(chuàng)建一個package.json文件，這個文件保存著這個項目相關信息。比如你用到的各種依賴（這里主要是插件）（終端會自動出現(xiàn)下面內容，這里先隨便填就行）

創(chuàng)建完之后，我們執(zhí)行下面的命令：

$ npm install gulp --save-dev

這一次，我們局部安裝Gulp。使用—save-dev，將通知計算機在package.json中添加gulp依賴。

目錄結構如下

在這個結構中，我們使用app文件夾作為開發(fā)目錄（所有的源文件都放在這下面），dist文件夾用來存放生產環(huán)境下的內容。

這些文件名，你想怎么起都行，但請務必記住你的目錄結構。現(xiàn)在我們來創(chuàng)建gulpfile.js，輸入如下。

下面來安裝gulp-sass插件編譯sass文件，

1、app下命令行輸入：

　　$ npm install gulp-sass --save-dev

此時package.json文件會自動更新依賴包！
2、在gulpfile.js內引入該插件

3.告知gulp要執(zhí)行的任務，gulpfile.js中的task任務

此時命令行執(zhí)行

gulp sass

會在dist/css/自動編譯生成所有的css

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com