Gulp模块的使用

库文件本地安装，命令行工具全局安装

Gulp使用
1、使用npm install gulp下载库文件
2、在项目根目录下建立gulpfile.js文件
3、重构项目的文件结构src目录源代码文件dist目录放置构建后的文件
4、在gulpfile.js文件中编写任务
5、在命令工具中执行gulp任务

Gulp中提供的方法
gulp.src():获取任务要处理的文件
gulp.dest():输出文件
gulp.task():建立gulp任务
gulp.watch():监控文化的变化

 .pipe()将要处理的代码写在里面
想执行当前文件中的first任务，在命令工具中添加npm install gulp-cli -g
想要执行  在当前根目录下使用   gulp 加任务名字  例如： gulp  first

Glup插件
https://www.npmjs.com/package/gulp-htmlmin
先下载gulp库文件
gulp-htmlmin:html文件压缩 使用指令输入指令gulp加定义的名字
glup-csso:压缩css 下载文件 npm install gulp-csso
glup-babel：javascript语法转换 下载文件： npm install gulp-babel @babel/core @babel/preset-env
gulp-less：less语法转换 下载文件npm install gulp-less
gulp-uglify：压缩混淆javascript 下载文件：npm install gulp-uglify
gulp-file-include：公共文件包含 下载npm install gulp-file-include 使用指令gulp加task’里面的名字
browsersync浏览器实时同步
*.html代表所有的html文件
公共文件包含 使用：
在src里面同页面的html下新建一个common文件夹，在里面 新建一个公共页面header.hml将公共的页面代码剪切并复制进来，在原页面内部头部写上@@include() 例如：@@include(’./common/header.html’)包含头部页面的路径和名字
解决异步问题（添加done回调函数）
gulp.task(‘cssmin’, done => {

    done();
})
解决异步网址：
https://www.gulpjs.com.cn/docs/getting-started/async-completion/

使用
	const gulp = require('gulp');
	//使用gulp.task()方法建立任务
	gulp.task('first', () => {
	    //获取要处理的文件
	    gulp.src('./scr/css/base.css')
	        //将处理后的文件输出到dis目录
	        .pipe(gulp.dest('./dist/css'));
	});
	
	
	//引用gulp模块
	const gulp = require('gulp');
	//使用gulp.task()方法建立任务
	//1、任务名称
	// 2、任务回调函数
	gulp.task('first', function(done) {
	    //1、使用gulp.src获取要处理的文件
	    gulp.src('./src/css/base.css')
	        //将处理后的文件输出到dis目录
	        .pipe(gulp.dest('dist/css'));
	    done();
	});