gulpJs前端構建工具的了解

2021-09-24 12:53:31 字數 1103 閱讀 1897

其實掌握四個就夠了

gulp.src()方法正是用來獲取流的,但要注意這個流裡的內容不是原始的檔案流,而是乙個虛擬檔案物件流(vinyl files),這個虛擬檔案物件中儲存著原始檔案的路徑、檔名、內容等資訊,這個我們暫時不用去深入理解,你只需簡單的理解可以用這個方法來讀取你需要操作的檔案就行了。其語法為:

gulp.src(globs[, options])

例如:gulp.src('css/*.css') //可以使用正則也可以使用具體檔名

gulp.dest()方法是用來寫檔案的,其語法為:

gulp.dest(path[,options])

例如: .pipe(gulp.dest('dist')); //輸出目錄

gulp.task方法用來定義任務,內部使用的是orchestrator,其語法為:

gulp.task(name[, deps], fn)

例如:gulp.task('uncss', function() );

gulp.watch()用來監視檔案的變化,當檔案發生變化後,我們可以利用它來執行相應的任務,例如檔案壓縮等。其語法為

gulp.watch(glob[, opts], tasks)
glob為要監視的檔案匹配模式,規則和用法與gulp.src()方法中的glob相同。

opts為乙個可選的配置物件,通常不需要用到

tasks為檔案變化後要執行的任務,為乙個陣列

gulp.task('uglify',function());

gulp.task('reload',function());

gulp.watch('js/**/*.js', ['uglify','reload']);

以上都是最簡單的gulp  api   需要複雜更高功能的還需要去查資料

接下來介紹幾哥他的外掛程式

前端構建工具

一 什麼是 自動化 構建工具 構建工具是一種自動化工具。一般專案都有較多的檔案,為開發維護方便拆分單個的模組,在發布的時候,對拆分後的各模組進行合併,壓縮等,構建工具可以幫完成這些重複的工作。二 什麼是包管理工具 可以安裝 解除安裝 更新 檢視 搜尋 發布等功能。類似grunt,gulp構建工具,和...

前端構建工具

devdependencies gulp強調的是前端開發的工作流程,側重於前端開發的整個過程的控制管理 像是流水線 我們可以通過配置一系列的task,定義task處理的事務 例如檔案壓縮合併 雪碧圖 啟動server 版本控制等 然後定義執行順序,來讓gulp執行這些task,從而構建專案的整個前端...

入門gulp前端構建工具

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