什么是gulp
gulp基于node平台开发的前端构建工具
它可以帮助我们解决一些机械性的操作任务
如:
- 压缩文件
- 文件格式转换 md->html
- 语法转换 es5->es6
- 抽取公共文件
- 等等等等
1. 安装gulp
命令:nmp install gulp
项目架构:
- gulpfile.js -用于编写gulp命令的文件
- src -放置源码文件目录
- dist -放置转换之后的文件目录
2. gulp提供的方法
- gulp.task() 构建glup任务
- gulp.src() 获取要处理的文件
- gulp.dest() 输出文件
- gulp.watch() 监控文件的变化
栗子:
const gulp = require("gulp");
// 第一个demo任务
gulp.task('first', (done) => {
gulp.src('./src/text01.html')
.pipe(gulp.dest('dist/'));
done();
});
//task方法的第一个参数是自定义的任务名,第二参为回调参数。
//done()表示该任务执行完毕
//gulp.src() 参数为要操作文件路径
//所有的操作方法要写在pipe()里面,如上面作为参数
//gulp.dest() 要将操作完成后的文件输出到哪
怎么执行呢?
执行该任务不是去用node命令解析执行,而是要借助一个新的命令。
下载该命令行工具:
安装gulp命令行 npm install gulp-cli -g
然后:在命令行,命令gulp first
便可执行该first任务
3. gulp常用插件
3.1 重命名
插件安装命令:npm install gulp-rename
使用:
const rename = require("gulp-rename");
gulp.task('rename', (done) => {
gulp.src('./src/text01.html')
.pipe(rename("newFlie/newText01.html"))//输出到了dist/newFlie文件下新名字newText01.html
.pipe(gulp.dest('dist/'));
done();
});
3.2 抽取公共部分
插件安装命令: npm install gulp-file-include
使用:
const common = require("gulp-file-include");
// 提取公共部分
gulp.task("common", done => {
gulp.src("./src/text03.html").pipe(common()).pipe(gulp.dest("./dist/newText03.html"));
console.log("转换完成");
done();
});
text03.html文件下内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
@@include("./common.html")//抽离
<div>内容</div>
</body>
</html>
common.html内容:
<div>这是一个头部</div>
dist文件目录下的转换完成之后的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>这是一个头部</div>
<div>内容</div>
</body>
</html>
3.3 压缩代码
压缩html:
插件安装命令:npm install gulp-htmlmin
使用:
const htmlmin = require("gulp-htmlmin");
// 压缩代码
gulp.task("htmlmin", done => {
gulp.src("./src/text02.html")
.pipe(htmlmin({ collapseWhitespace: true }))//里面参数意思是说是否压缩空格
.pipe(gulp.dest("./dist"));
done();
});
压缩css:
插件安装命令:npm install gulp-csso
const csso = require("gulp-csso");
//压缩css文件
gulp.task("csso", done => {
gulp.src("./src/text01.css").pipe(csso()).pipe(gulp.dest("./dist/css"));
done();
});
值得注意:js文件的压缩目前支持的是es5语法,代码里面有es6便会报错。所以我放到下面语法转换部分了
3.4 转换less文件
插件安装命令:npm install gulp-less
使用:
const less = require("gulp-less");
gulp.task("less", done => {
gulp.src("./src/text01.less").pipe(less()).pipe(gulp.dest("./dist"));
done();
});
3.5 es5转es6并压缩js文件
插件安装命令:
语法转换插件命令npm install --save-dev gulp-babel @babel/core @babel/preset-env
js压缩插件命令npm install gulp-uglify
使用:
const babel = require("gulp-babel");
const uglify = require("gulp-uglify");
//es转es5并压缩
gulp.task('jsmin', (done) => {
gulp.src('./src/text01.js')
.pipe(babel({
// 自动判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
done();
});
3.6 md文件转html
插件安装命令:npm install gulp-markdown
使用:
const markdown = require('gulp-markdown');
//将md文件转为html
gulp.task("mdToHtml", done => {
gulp.src("./src/read.md").pipe(markdown()).pipe(gulp.dest("./dist/md"));
done();
});
3.7 多任务执行
上面的任务要一个个运行太过繁琐,故gulp为我们提供一个一个方法可以用一个命令执行所有任务
使用:
//任务打包
gulp.task('default', gulp.series(["htmlmin", "jsmin"], (done) => {
console.log("执行成功");
done();
}));
gulp.series()方法里面传两个参数,一个参数是你要执行任务的数组,一个回调
注意的是原来是不需series这个方法的,数组和回调可以放在task里面直接做参数。但是gulp最新做了规定,原来的写法已经不可再用了只能这样写了
任务名字为default
,我们要执行它只需在控制台输入命令gulp
即可
其他插件查看官方即可。使用基本和上面所以插件一直
官方链接https://www.npmjs.com/package/gulp