玩轉gulp之gulp編譯less

2022-05-03 01:30:12 字數 1130 閱讀 2808

用好gulp grunt webpack讓前端程式設計走向自動化,是作為乙個前端開發必須學會的技能,不然逼格怎麼提公升的上去呢。。。

然後教大家如何用gulp裝逼。一點點的學,都是相通的嘛

1. 安裝node

2. 安裝npm

3. 安裝cnpm

4. 安裝全域性gulp

5. cnpm init建立package.json

6. 新增依賴dependence gulp和gulp-less

7. cnpm install

以上步驟就不多做解釋了,這些只不過是編寫nodejs執行檔案編譯的乙個前提而已,然後編寫乙個gulpfile.js 通過nodejs來後台進行less編譯

first step : 匯入模組

//

匯入工具包 require('node_modules裡對應模組')

var gulp = require('

gulp

'), //

本地安裝gulp所用到的地方

less = require('

gulp-less

');

second step : 運用模組建立任務

gulp.task('

testless

', function () );

gulp模組的task方法會啟動乙個任務,如果第乙個引數是default就會設定預設執行任務,如果其他的例如我們寫了乙個testless就會定義任務

third step : 執行預設的任務

gulp.task('

default

',['

testless

']); //

定義預設任務

forth step : 編譯

任務寫出來了,我們把剛剛制定的任務執行以下。前提是得有那個檔案哦,不然看不到效果。

這個方法可以通過npm去執行,慢慢學下去,就可以自己做乙個腳手架啦

gulp學習之四 編譯 LESS

npm install gulp less 獲取 gulp var gulp require gulp 獲取 gulp less 模組 var less require gulp less 編譯less 在命令列輸入 gulp less 啟動此任務 gulp.task less function 在...

Gulp 自動化編譯sass和pug檔案

突然發現在我部落格文章中,缺少這一塊的記錄,那我就補一篇吧。gulp的環境配置和安裝 這裡就補充一篇gulpfile.js的配置,用於自動化編譯sass和pug檔案用 1 var gulp require gulp 2var pug require gulp pug 3var sass requir...

Gulp 自動化編譯sass和pug檔案

突然發現在我部落格文章中,缺少這一塊的記錄,那我就補一篇吧。gulp的環境配置和安裝 這裡就補充一篇gulpfile.js的配置,用於自動化編譯sass和pug檔案用 1 var gulp require gulp 2var pug require gulp pug 3var sass requir...