gulp模塊使用方法示例詳解

第gulp模塊使用方法示例詳解目錄正文使用gulp.task建立任務(wù)任務(wù)的名稱(chēng)任務(wù)的回調(diào)函數(shù)html任務(wù)html文件中的代碼壓縮操作抽取html文件的公共代碼css任務(wù)less語(yǔ)法轉(zhuǎn)換抽取html文件中的公共代碼js任務(wù)es6代碼轉(zhuǎn)化代碼壓縮其余文件夾及其余文件一次性執(zhí)行以上全部功能

正文

constgulp=require('gulp');

//引用插件

consthtmlmin=require('gulp-htmlmin');

constfileinclude=require('gulp-file-include');

constless=require('gulp-less');

constcsso=require('gulp-csso');

constbabel=require('gulp-babel');

constuglify=require('gulp-uglify');

//執(zhí)行的是下面的代碼，而不是整個(gè)文件

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

任務(wù)的名稱(chēng)

任務(wù)的回調(diào)函數(shù)

gulp.task('first',async()={

awaitconsole.log("人生中的第一個(gè)gulp任務(wù)執(zhí)行完畢");

//1.使用gulp.src獲取要處理的文件

gulp.src('./src/css/style.css',{

allowEmpty:true

//通過(guò)pipe方法處理base.css文件

//pipe方法里面寫(xiě)的是如何處理代碼

.pipe(gulp.dest('dist/css'));//讓base.css在dist/css文件夾中輸出

html任務(wù)

html文件中的代碼壓縮操作

抽取html文件的公共代碼

gulp.task('htmlmin',async()={

gulp.src('./src/*.html',{

allowEmpty:true

.pipe(fileinclude())

.pipe(htmlmin({

collapseWhitespace:true

.pipe(gulp.dest('./dist'));

css任務(wù)

less語(yǔ)法轉(zhuǎn)換

抽取html文件中的公共代碼

gulp.task('cssmin',async()={

//選擇css目錄下的less和css文件

gulp.src(['./src/css/*.less','./src/css/*.css'])

//將less語(yǔ)法轉(zhuǎn)換為css語(yǔ)法

.pipe(less())

//將css代碼進(jìn)行壓縮

.pipe(csso())

//將處理的結(jié)果進(jìn)行輸出

.pipe(gulp.dest('dist/css'));

js任務(wù)

es6代碼轉(zhuǎn)化

代碼壓縮

gulp.task('jsmin',async()={

gulp.src('./src/js/*.js')

//將es5代碼轉(zhuǎn)換為es6代碼

.pipe(babel({

//可以判斷當(dāng)前代碼的運(yùn)行環(huán)境,將代碼轉(zhuǎn)換為當(dāng)前運(yùn)行環(huán)境所支持的代碼

presets:['@babel/env']

//把轉(zhuǎn)換的結(jié)果進(jìn)行壓縮

.pipe(uglify())

.pipe(gulp.dest('dist/js'))

其余文件夾及其余文件

//復(fù)制文件夾

gulp.task('copy',async()={

gulp.src('./src/img.*')

.pipe(gulp.dest('dist/img'));

gulp.src('./src/*.md')

.pipe(gulp.dest('dist'));

一次性執(zhí)行以上全部功能

//構(gòu)建任務(wù)

gulp.task('default',gulp.series("htmlmin","jsmin","cssmin","copy"));

//錯(cuò)誤代碼

//gulp.task('default'