Gulp
什么是gulp
gulp是基于node平台开发的前端构建工具，通过任务的方式执行机械化操作，提高开发效率。
gulp能做什么
- 项目上线，html、css、js文件压缩合并
- 语法转换（es6、less...)
- 公共文件抽离
- 修改文件浏览器自动刷新
gulp使用
- 使用
npm install gulp下载gulp库文件 - 在项目根目录下创建gulpfile.js文件
- 创建src目录放置源代码，dist目录放置构建后文件
- 在gulpfile.js文件中编写任务
- 通过命令行执行gulp任务
gulp提供的方法
- gulp.src():获取任务要处理的文件
- gulp.dest():输出文件
- gulp.task():建立gulp任务
- gulp.watch():监控文件的变化
const gulp = require('gulp');
//创建任务
gulp.task('test',async ()=>{
//获取要处理的文件
gulp.src('./src/*.js')
//将处理后的文件输出到dist目录，pipe可以理解为处理的标记，dest是处理的具体方式
.pipe(gulp.dest('./dist/js'));
});gulp插件
- gulp-htmlmin:html文件压缩
gulp.task('htmlmin',async () =>{
gulp.src('./src/public/*.html')
//压缩html文件中的代码
.pipe(htmlmin({collapseWhitespace:true}))
.pipe(gulp.dest('./dist/html'))
});- gulp-csso:css压缩
- gulp-less:less语法转化
gulp.task('cssmin',async ()=>{
//选择多个文件
gulp.src(['./src/*.less','./src/*.css'])
//编译转换less
.pipe(less())
//压缩css
.pipe(csso())
.pipe(gulp.dest('./dist/css'))
});- gulp-babel:JavaScript语法转化
- gulp-uglify: 压缩混淆JavaScript
gulp.task('jsmin',async ()=>{
gulp.src('./src/*.js')
.pipe(babel({
//判断当前代码的运行环境，将代码转换为当前运行环境需要的代码
presets: ['@babel/env']
}))
//压缩代码
.pipe(uglify())
.pipe(gulp.dest('./dist/js'))
});- gulp-file-include: 公共文件包含
gulp.task('htmlmin',async () =>{
gulp.src('./src/public/*.html')
//抽取公共代码
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('./dist/html'))
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
//在html中指定引入公共代码的位置并指定公共代码片段文件
@@include('../common/root.html')
<script src="bundle.js"></script>
</body>
</html>- browsersync 浏览器实时同步
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。