Gulp介紹：

gulp概念：

基于node開發的前端構建工具模塊，將前端機械化的操作編寫成任務自動化操作，類似于webpack構建，可以完成代碼壓縮、語法轉換、抽離公共文件、自動實現瀏覽器刷新等。

基本使用步驟：

1.使用npm install gulp下載gulp庫文件。

2.在項目文件夾中新建gulpfile.js文件，注意文件名固定不變。

3.重構項目文件夾目錄結構：新建src文件夾（存放項目源代碼）、新建dist文件夾（存放處理后的代碼）。

4.在gulpfile.js文件中編寫任務，類似于webpack.config.js文件，但是語法完全不同。

5.在命令行執行gulp任務（gulp 任務名）;如果想要執行一次任務實現多個任務被執行，就得構建多任務執行任務，具體只需將task方法中第二個參數callback換成數組，數組中傳入任務名字符即可。（當任務名為defalut時，命令行中執行命令是可以省略任務名）

gulp-cli工具：

gulp-cli類似webpack-cli，需要全局安裝此工具，后面可以方便使用gulp,全局安裝：npm install gulp-cli -g;

編寫gulpfile.js文件：

gulp提供了基本的幾種方法用于編寫任務，如：

gulp.src()獲取任務要處理的文件

gulp.dest()輸出文件

gulp.task()建立gulp任務

gulp.watch()監控文件的變化

gulp插件（很多，下面只是舉例）：

gulp-htmlmin ,壓縮html文件的插件

gulp-csso ,壓縮css文件的插件

gulp-babel ,js語法轉換的插件

gulp-less ,less語法轉化的插件

gulp-file-include ,共文件包含插件

gulp-ugligy ,壓縮混淆js插件

browsersync ,瀏覽器同步更新插件

插件使用：

1.npm install 插件名

2.在gulpfile.js文件中引入此插件

3.調用此插件

// 1.引入gulp：const gulp = require('gulp');const htmlmin =require('gulp-htmlmin');// 2.使用task('任務名'，callback)方法創建任務：gulp.task('myhtmlmin',()=>{// 3.編寫任務：實現代碼合并壓縮等（需要注意的是：gulp是輕量級的模塊，如果想要實現具體的功能還得使用插件）gulp.src('./src/*.html')//回調函數中可以使用gulp的方法，src用于獲取要處理的文件.pipe(htmlmin({collapseWhitespace:true}))//pipe處理文件，里面可傳入插件方法或gulp本身方法.pipe(gulp.dest('dist')//pipe處理后的文件輸出到dist文件下});

總結

以上是生活随笔為你收集整理的Gulp简介、gulp基本使用步骤、gulp-cli工具、gulpfile.js文件、gulp插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。