文章目录
文档
Gulp插件使用步骤
- 安装插件
npm i 插件名称
- 导入
const xx = require('插件名称')
- 调用
xx.方法()
使用示例
gulp-htmlmin htm压缩插件使用
npm i gulp
npm i gulp-htmlmin
导入
const htmlmin = require('gulp-htmlmin')
示例
把src下面的所要html都压缩 输出到dist文件夹
const gulp = require('gulp')
const htmlmin = require("gulp-htmlmin")
gulp.task('html',done=>{
// 获取src目录下的所有html文件
gulp.src('./src/*.html')
// 调用htmlmin插件 压缩html文件 collapseWhitespace:折叠空
.pipe(htmlmin({ collapseWhitespace:true }))
.pipe(gulp.dest('dist'))
done()
})
效果
gulp-file-include 抽取文件公共部分
npm i gulp-file-include
const fileinclude = require("gulp-file-include")
把html的相同部分 截取出来 例如header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gulp项目源代码</title>
<link rel="stylesheel" href="./css/index.css"/>
</head>
<body>
<!-- <header>
公共头部
</header> -->
@@include('./common/header.html')
<div class="ff">ccccccccccccccccccccccccc</div>
</body>
</html>
把header部分内容放置到 一个html文件里面 然后在对应位置 放入标记@@include('./common/header.html')
<header> 公共头部 </header>
任务
const gulp = require('gulp')
const htmlmin = require("gulp-htmlmin")
const fileinclude = require("gulp-file-include")
gulp.task('html',done=>{
// 获取src目录下的所有html文件
gulp.src('./src/*.html')
// 抽取公共代码 把header部分替换回来
.pipe(fileinclude())
// 调用htmlmin插件 压缩html文件 collapseWhitespace:折叠空
.pipe(htmlmin({ collapseWhitespace:true }))
.pipe(gulp.dest('dist'))
done()
})
效果
gulp-less gulp-csso less转css css压缩
npm i gulp-less
npm i gulp-css
const less = require("gulp-less")
const csso = require("gulp-csso")
建立任务
// css 任务
// less语法转换
// css代码压缩
const less = require("gulp-less")
const csso = require("gulp-csso")
gulp.task('cssmin',done=>{
// 获取所有的less文件
// gulp.src('./src/css/*.less')
// 获取多个路径 同时选中src/css下的less 和 css 文件
gulp.src(['./src/css/*.less','./src/css/*.css'])
// less 转换 css
.pipe(less())
// css 压缩
.pipe(csso())
// 输出目录
.pipe(gulp.dest('dist/css'))
done()
})
执行任务
gulp cssmin
效果
gulp-babel es6转es5 gulp-uglify 代码压缩混淆
npm i gulp-babel @babel/core @babel/preset-env
或
npm install --save-dev gulp-babel@7 babel-core babel-preset-env
npm i gulp-uglify
const babel= require("gulp-babel")
const uglify= require("gulp-uglify")
任务
es6转es5
代码压缩混淆
const babel = require("gulp-babel")
const uglify = require("gulp-uglify")
gulp.task('jsmin',done=>{
gulp.src('src/js/*.js')
.pipe(babel({
// 它可以判断当前代码的运行环境 件代码转换为当前运行环境所支持的代码
presets: ['@babel/env']
}))
.pipe(gulp.dest('dist/js'))
done()
})
效果
es6 转es5
压缩
复制文件
// 复制文件夹
gulp.task('copy',done=>{
// 获取src/images/文件夹下的所有文件
gulp.src('./src/images/*')
.pipe(gulp.dest('dist/images'));
gulp.src('./src/lib/*')
.pipe(gulp.dest('dist/lib'));
done()
})
运行任务
gulp copy
构建任务 执行多个任务
执行default 任务的时候 会依次执行后面的任务
gulp.task('default',gulp.series('html','file','cssmin','jsmin','copy'))
执行
gulp
或
gulp default