gulp的使用基本使用

2021-07-31 05:54:43 字數 695 閱讀 4638

1.全域性安裝gulp:目的是在命令列裡使用gulp的命令

2.命令列中cd到專案目錄,區域性安裝gulp(如果不在專案中再次安裝會報錯,據說這樣是為了避免發生版本衝突)

3.在專案目錄下新建乙個gulpfile.js檔案(必須這個名字,這個檔案算是乙個配置檔案),編寫我們的需求,以便gulp能按著我們的意願來執行。

4.gulp的每個模組可以完成不同的任務,所以我們經常要將所需模組require到gulpfile.js這個配置檔案中(如果執行任務的時候報錯找不到某個模組,只要npm install 這個模組到此目錄就可以,不用-g)。比如我們要讓gulp為我們壓縮js檔案:

)}然後在命令列,cd到專案目錄下,執行:gulp compress

就可以看到目錄下生成了newscript資料夾,裡面的檔案也被壓縮了。

5.新增乙個watch任務,利用gulp監聽script資料夾裡所有js檔案的改動,一旦改動就執行compress任務

)6.新增default任務(default這個名字不能改),使gulp的預設任務就是watch任務

7.上面的watch任務,一旦script資料夾下游乙個檔案發生改變,整個資料夾的所有js檔案都會被壓縮,這影響效能。改寫watch任務如下:

)})8.給壓縮後的檔案新增min字尾名

)) .pipe(gulp.dest(paths.distdir))

})})

gulp基本使用

gulp強調的是前端開發的工作流程,我們可以通過定義task事件定義事件的執行順序,gulp去執行這些事件,構建整個前端開發的工作流程 gulp常見定義事件,例如 下面會說幾個常見的gulp模組,列舉功能和例子,希望你看完本章後能對gulp有個基本的掌握,能參照這裡的寫法,當需要使用時去官網上會自主...

關於gulp的基本使用

基本使用流程 安裝nodejs 全域性安裝gulp 專案安裝gulp以及gulp外掛程式 配置gulpfile.js 執行任務 gulpfile.js 是gulp的配置檔案 匯入工具包 require node modules裡對應模組 var gulp require gulp 本地安裝gulp所...

gulp 入門 使用gulp壓縮css

壓縮 css 可降低 css 檔案大小,提高頁面開啟速度。規律轉換為 gulp 找到css 目錄下的所有 css 檔案,壓縮它們,將壓縮後的檔案存放在dist css 目錄下。一 安裝 gulp minify css 模組 在命令列輸入sudo npm install gulp minify css...