gulp打包配置文件

第一步：到官網https://www.npmjs.com/package/package查找對應的插件包，用npm進行下載

第二步：在src下創建gulpfile.js文件，配置如下

//gulpfile.js文件
const gulp = require('gulp')//引用了gulp模塊
const htmlmin = require('gulp-htmlmin')//引用html壓縮插件
const fileinclude = require('gulp-file-include')//提取html公共模塊
const less = require('gulp-less')//引用less轉換css
const csso = require('gulp-csso')//壓縮css代碼
const babel = require('gulp-babel')//將es6轉化爲es5格式
const uglify = require('gulp-uglify');//壓縮js代碼
gulp.task('second',(done)=>{
	console.log('第n個任務執行')
	//使用gulp.src獲取要處理的文件
	gulp.src('./src/css/myPagination.css')
	//執行任務打包gulp.dest輸出文件
	.pipe(gulp.dest('dist/css'));
	//執行完畢一定要寫回調，否則會報錯
	done();
});

//html任務
//html代碼壓縮
//提取公共代碼
gulp.task('htmlmin',(done)=>{
	gulp.src('./src/*.html')
	//提取公共代碼
	.pipe(fileinclude())
	//壓縮html文件 false表示不壓縮
	.pipe(htmlmin({collapseWhitespace:true}))
	.pipe(gulp.dest('dist'))
	done();
})

//css任務
//less語法轉換
//css代碼壓縮
gulp.task('cssmin',(done)=>{
	//選擇文件
	gulp.src(['src/css/*.less','src/css/*.css'])
	//將less語法轉化爲css
	.pipe(less())
	//將css代碼壓縮
	.pipe(csso())
	//輸出文件
	.pipe(gulp.dest('dist/css'))
	done()
})

//js任務
gulp.task('jsmin',(done)=>{
	gulp.src('./src/js/*.js')
	.pipe(babel({
		//判斷運行環境
		presets:['@babel/env']
	}))
	.pipe(uglify())
	.pipe(gulp.dest('dist/js'))
	done()
})
//複製文件夾
gulp.task('copy',(done)=>{
	gulp.src('./src/lib/*')
	.pipe(gulp.dest('dist/lib'))
	gulp.src('./src/static/*')
	.pipe(gulp.dest('dist/static'))
	done()
})

//構建任務-----執行完default任務後，會依次執行htmlmin等任務
//series存放等待執行的任務，用[]會報錯
gulp.task('default',gulp.series('htmlmin','cssmin','jsmin','copy',done=>done()))

最後一步：在命令板輸入gulp執行任務 default