第三方模块Gulp

Gulp中提供的方法：

gulp.src();获取任务要处理的文件
gulp.dest()：建立文件
gulp.task()：建立gulp任务
gulp.watch()：监控文件的变化
gulp.pipe()：可以理解为管道，将操作加入到加入到执行队列。类似于回调函数

gulp提供了一个同名的命令行工具
需要先下载：在命令窗口中，npm install gulp-cli -g

一个简单的复制操作：

//引用gulp模块
const gulp = require('gulp');
//使用gulp.task建立任务
gulp.task('first', () => {
	console.log('人生中的第一个gulp任务执行了');
	//1.使用gulp.src获取要处理的文件
	gulp.src('./src/css/base.css')
		.pipe(gulp.dest('dist/css'));
});

gulp插件

gulp-htmlmin：html文件压缩
gulp-csso：压缩css
gulp-babel：JavaScript语法转化
gulp-less：less语法转化
gulp-uglify：压缩混淆JavaScript
gulp-file-include 公共文件包含
browsersync浏览器实时同步

使用

下载
在https://www.npmjs.com/package中搜索插件，并根据指示在命令窗口中下载
引用
调用

抽取公共部分

gulp-file-inclued提供的方法，在html中2.引用公共部分

@@include('./common/header.html')
//include里的是公共部分

1.抽取文件中的代码

//html任务
//1.html文件中代码的压缩操作
//2.抽取html文件中的代码

gulp.task('htmlmin', () => {
	//所有的html文件
	gulp.src('./src/*.html')
	//抽取html中的公共代码
		.pipe(fileinclude())
	//压缩html文件中的代码
		.pipe(htmlmin({ collapseWhitespace: true }))
		.pipe(gulp.dest('dist'));
	
	
});

压缩CSS

//css任务
//1.less语法的转换
//2.css代码的压缩
gulp.task('cssmin', () => {
	//选择css目录下的所有less文件以及css文件
	gulp.src(['./src/css/*.less','./src/css/*.css'])
		//将less语法转换为css语法
		.pipe(less())
		//将css代码进行压缩
		.pipe(csso())
		//将处理的结果进行输出
		.pipe(gulp.dest('dist/css'))

});

JavaScript任务

//js任务
//1.ES6代码转换
//2.代码压缩
gulp.task('jsmin', () => {
	gulp.src('./src/js/*.js')
		.pipe(babel({
			// 它可以判断当前代码的运行环境，并将代码转换为当前运行环境所支持的代码
			presets:['@babel/env']
		}))
		//压缩
		.pipe(uglify())
		.pipe(gulp.dest('dist/js'))

});

复制文件夹

//复制文件夹
gulp.task('copy', () => {
	gulp.src('./src/images/*')
		.pipe(gulp.dest('dist/images'));
	gulp.src('./src/lib/*')
		.pipe(gulp.dest('dist/lib'))
})

构建任务

//构建任务
//当在命令行执行default任务的时候，依次执行后面的任务
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);