前端工具gulp

最近在寫乙個新的專案，用到了新框架，主要是：react+webpack。裡面還用到了乙個前端工具——gulp。

gulp在專案裡的作用是打包靜態資源。編譯less，壓縮css等。js並不在處理之列（不代表gulp不能處理，而是說在專案裡並沒有用gulp處理js）

如果理解了webpack之類的前端工具，gulp用起來會很簡單的。本文的例子是通過gulp編譯less

}gulpfile.js(gulp入口檔案，所有的配置項在這裡)

var gulp  = require('gulp');

var less  = require('gulp-less');
var source = ['src/less/index.less'];
gulp.task('testless', function () );

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) 
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) 
.box 
}

多說一句，全域性的意思就是你安裝之後能使用這個命令，但是專案本身還是需要安裝的。因為你最終引入的是專案裡的node_module裡的資源。

npm install gulp -g

執行命令：gulp testless。生成css.

前端自動化工具 gulp

gulp是乙個前端自動化構建工具，主要用來設定程式自動處理靜態資源的工作。使用gulp，可以輕鬆實現對html，css，js進行壓縮的目的。產品發布時，可以有效縮小 大小。gulp是nodejs的乙個工具，因此可以使用npm進行安裝。npm install gulp在前端專案的根目錄，通過編寫gul...

入門gulp前端構建工具

1.全域性安裝 gulp 倘若之前電腦安裝過，則跳過此步驟 cnpm install g gulp 2.作為專案的開發依賴 devdependencies 安裝 此步驟會自動在目錄下建立package.json檔案，因此無需cnpm init cnpm install s e dev gulp 3....

前端構建工具gulp安裝教程

首先先問自己乙個問題 平時用sass less寫css，用jade寫 html 那麼這些檔案的的測試 檢查 合併 壓縮 格式化 部署，監聽。應該怎麼完成呢？就來壓縮合併來講，可以減少多個css，js檔案請求，優化網頁效能，這樣的工作是否應該有乙個很好的解決方案呢？答案就是gulp。安裝gulp如下幾...