第三方模块 Gulp

基于node平台开发的前端构建工具
将机械化操作编写成任务，想要执行机械化操作时执行一个命令行命令任务就能自动执行了

Gulp能做什么：

1. 项目上线、HTML、CSS、JS文件压缩合并
2. 语法转换 (es6、 less…)
3. 公共文件抽离
4. 修改文件浏览器自动刷新

Gulp使用：

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

Gulp中提供的方法：

1. gulp.src() ：获取任务要处理的文件
2. gulp.dest() ：输出文件
3. gulp.task() ：建立gulp任务
4. gulp.watch() ：监控文件的变化

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

gulp install gulp-cli -g
gulp first

Gulp插件:

1. gulp-htmlmin：mhtml文件压缩
2. gulp-csso：压缩css
3. gulp-babel：JavaScript语法转化
4. gulp-less：less语法转换
5. gulp-uglify：压缩混淆JavaScript
6. gulp-file-include：公共文件包含
7. browsersync：浏览器实时同步

HTML的转换

const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
// html任务
// 1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码
gulp.task('htmlmin', () => {
	gulp.src('./src/*.html')
		//抽取公共文件
		.pipe(fileinclude())
		// 压缩html文件中的代码
		.pipe(htmlmin({ collapseWhitespace: true })) //是否压缩空格
		.pipe(gulp.dest('dist'));
});

npm install gulp-htmlmin
gulp htmlmin
npm install gulp-file-include

将相同的部分新建到src下common公共部分，再用@@include引入到原文件

@@include('./common/header.html')

CSS的转换

const less = require('gulp-less');
const csso = require('gulp-csso');
// 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'))
});

npm install gulp-less
gulp cssmin
npm install gulp-csso
gulp cssmin

js的转换

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

npm install gulp-babel @babel/core @babel/preset-env
gulp jsmin
npm install gulp-uglify
gulp jsmin

复制文件夹

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

gulp copy

构建任务

// 构建任务
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);

gulp default / gulp