Gulp介紹：

gulp概念：

基于node開發(fā)的前端構(gòu)建工具模塊，將前端機(jī)械化的操作編寫成任務(wù)自動(dòng)化操作，類似于webpack構(gòu)建，可以完成代碼壓縮、語(yǔ)法轉(zhuǎn)換、抽離公共文件、自動(dòng)實(shí)現(xiàn)瀏覽器刷新等。

基本使用步驟：

1.使用npm install gulp下載gulp庫(kù)文件。

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

3.重構(gòu)項(xiàng)目文件夾目錄結(jié)構(gòu)：新建src文件夾（存放項(xiàng)目源代碼）、新建dist文件夾（存放處理后的代碼）。

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

5.在命令行執(zhí)行g(shù)ulp任務(wù)（gulp 任務(wù)名）;如果想要執(zhí)行一次任務(wù)實(shí)現(xiàn)多個(gè)任務(wù)被執(zhí)行，就得構(gòu)建多任務(wù)執(zhí)行任務(wù)，具體只需將task方法中第二個(gè)參數(shù)callback換成數(shù)組，數(shù)組中傳入任務(wù)名字符即可。（當(dāng)任務(wù)名為defalut時(shí)，命令行中執(zhí)行命令是可以省略任務(wù)名）

gulp-cli工具：

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

編寫gulpfile.js文件：

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

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

gulp.dest()輸出文件

gulp.task()建立gulp任務(wù)

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

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

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

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

gulp-babel ,js語(yǔ)法轉(zhuǎn)換的插件

gulp-less ,less語(yǔ)法轉(zhuǎn)化的插件

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

gulp-ugligy ,壓縮混淆js插件

browsersync ,瀏覽器同步更新插件

插件使用：

1.npm install 插件名

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

3.調(diào)用此插件

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。