gulp模塊使用方法示例詳解

第gulp模塊使用方法示例詳解目錄正文使用gulp.task建立任務任務的名稱任務的回調函數(shù)html任務html文件中的代碼壓縮操作抽取html文件的公共代碼css任務less語法轉換抽取html文件中的公共代碼js任務es6代碼轉化代碼壓縮其余文件夾及其余文件一次性執(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í)行的是下面的代碼，而不是整個文件

使用gulp.task建立任務

任務的名稱

任務的回調函數(shù)

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

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

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

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

allowEmpty:true

//通過pipe方法處理base.css文件

//pipe方法里面寫的是如何處理代碼

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

html任務

html文件中的代碼壓縮操作

抽取html文件的公共代碼

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

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

allowEmpty:true

.pipe(fileinclude())

.pipe(htmlmin({

collapseWhitespace:true

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

css任務

less語法轉換

抽取html文件中的公共代碼

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

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

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

//將less語法轉換為css語法

.pipe(less())

//將css代碼進行壓縮

.pipe(csso())

//將處理的結果進行輸出

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

js任務

es6代碼轉化

代碼壓縮

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

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

//將es5代碼轉換為es6代碼

.pipe(babel({

//可以判斷當前代碼的運行環(huán)境,將代碼轉換為當前運行環(huán)境所支持的代碼

presets:['@babel/env']

//把轉換的結果進行壓縮

.pipe(uglify())

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

其余文件夾及其余文件

//復制文件夾

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

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

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

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

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

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

//構建任務

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

//錯誤代碼

//gulp.task('default'