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