前端工具gulp

2022-03-21 09:12:39 字數 1109 閱讀 3530

最近在寫乙個新的專案,用到了新框架,主要是: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 () );

index.less(c從less中文網上找的一段**)

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c))

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

.box

}

如果你全域性安裝過gulp,跳過此步驟。如果沒全域性安裝過gulp,先全域性安裝gulp。

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

npm install gulp -g
切換到命令列,進入專案根目錄。安裝專案依賴:npm install

執行命令: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如下幾...