1 前言
gulp是一个基于任务和流实现自动化的工具。
2 准备
2.1 初始化项目
# 使用 npm 管理项目
npm init
2.2 全局安装gulp
npm install -g gulp
2.3 安装插件
npm i gulp del gulp-autoprefixer gulp-babel gulp-clean-css gulp-concat gulp-connect gulp-eslint gulp-htmlmin gulp-imagemin gulp-less gulp-rename gulp-sass gulp-uglify-es gulp-watch @babel/core @babel/preset-env -D
3 插件使用
项目根目录创建 gulpfile.js 文件
3.1 清除dist
gulp.task('clean', function () {
return del('./dist')
})
3.2 less
gulp.task('less', () => {
return gulp
.src('./less/**/*.less') // 源目录
.pipe(less()) // 编译less
.pipe(autoPrefixer()) // 添加前缀
.pipe(cleanCSS()) // 压缩css
.pipe(gulp.dest('./dist/less')) // 目标目录
.pipe(connect.reload())
})
3.3 css
gulp.task('css', () => {
return gulp
.src('./css/**/*.css')
.pipe(autoPrefixer()) // 添加前缀
.pipe(cleanCSS()) // 压缩css
.pipe(rename({ suffix: '.min' })) // 重命名
.pipe(gulp.dest('./dist/css'))
.pipe(connect.reload())
})
3.4 js
gulp.task('js', () => {
return gulp
.src('./js/**/*.js')
.pipe(
// gulp-babel 依赖 另外两个包 @babel/core @babel/present-env 需要安装
// es6 -> es5
babel({
presets: ['@babel/env'],
})
)
.pipe(
// 丑化混淆
uglify({
ecma: 5,
ie8: false,
safari10: false,
})
)
.pipe(concat('all.js')) // 合并文件
.pipe(gulp.dest('./dist/js')) // 目标文件
.pipe(connect.reload())
})
3.5 图片
// 直接复制, 不做处理
gulp.task('img', () => {
return (
gulp
.src('./img/**/*.{jpg,png,gif}')
// .pipe(imagemin()) //压缩图片 被墙, 无法使用
.pipe(gulp.dest('./dist/img'))
.pipe(connect.reload())
)
})
3.6 json
// 直接复制, 不做处理
gulp.task('json', () => {
return gulp.src('./json/**/*.json').pipe(gulp.dest('./dist/json')).pipe(connect.reload())
})
3.7 html
gulp.task('html', () => {
return gulp
.src('./html/**/*.html')
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('./dist/html'))
.pipe(connect.reload())
})
3.8 自动监听
gulp.task('watch', async () => {
gulp.watch('./less/**/*.less', gulp.series(['less']))
gulp.watch('./css**/*.css', gulp.series(['css']))
gulp.watch('./js/**/*.js', gulp.series(['js']))
gulp.watch('./img/**/*.{jpg,png,gif}', gulp.series(['img']))
gulp.watch('./json/**/*.{json,xml}', gulp.series(['json']))
gulp.watch('./html/**/*.html', gulp.series(['html']))
})
3.9 启动服务
gulp.task('connect', async () => {
connect.server({
root: './dist', // 服务的根目录
livereload: 'true', // 热加载
port: 8888, // 端口
})
})
3.10 合并任务
// 合并任务为default
gulp.task(
'default',
gulp.series(
// 合并任务
'clean',
'less',
'css',
'js',
'img',
'json',
'html',
gulp.parallel('watch', 'connect') // 并行
)
)
4 配置汇总
- gulpfile.js
const gulp = require('gulp')
const autoPrefixer = require('gulp-autoprefixer') // css添加前缀
const rename = require('gulp-rename') // 重命名
const cleanCSS = require('gulp-clean-css') // 压缩css
const less = require('gulp-less') // 处理less
const sass = require('gulp-sass') // 处理sass
const concat = require('gulp-concat') // 合并文件
const uglify = require('gulp-uglify-es').default // terser
const imagemin = require('gulp-imagemin') // 处理图片
const connect = require('gulp-connect') // 启动服务
const htmlmin = require('gulp-htmlmin') // 处理html
const del = require('del') // 删除文件
const babel = require('gulp-babel') // es6 -> es5
// 清除dist
gulp.task('clean', function () {
return del('./dist')
})
// 处理less
gulp.task('less', () => {
return gulp
.src('./less/**/*.less') // 源目录
.pipe(less()) // 编译less
.pipe(autoPrefixer()) // 添加前缀 在package.json -> browserslist 中配置
.pipe(cleanCSS()) // 压缩css
.pipe(gulp.dest('./dist/less')) // 目标目录
.pipe(connect.reload())
})
// 处理css
gulp.task('css', () => {
return gulp
.src('./css/**/*.css')
.pipe(autoPrefixer()) // 添加前缀
.pipe(cleanCSS()) // 压缩css
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./dist/css'))
.pipe(connect.reload())
})
// 处理js
gulp.task('js', () => {
return gulp
.src('./js/**/*.js')
.pipe(
// gulp-babel 依赖 另外两个包 @babel/core @babel/present-env 需要安装
// es6 -> es5
babel({
presets: ['@babel/env'],
})
)
.pipe(
// 丑化混淆
uglify({
ecma: 5,
ie8: false,
safari10: false,
})
)
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/js')) // 目标文件
.pipe(connect.reload())
})
// 处理图片 直接复制
gulp.task('img', () => {
return (
gulp
.src('./img/**/*.{jpg,png,gif}')
// .pipe(imagemin()) //压缩图片 被墙, 无法使用
.pipe(gulp.dest('./dist/img'))
.pipe(connect.reload())
)
})
// 处理json 直接复制
gulp.task('json', () => {
return gulp.src('./json/**/*.json').pipe(gulp.dest('./dist/json')).pipe(connect.reload())
})
// 处理html
gulp.task('html', () => {
return gulp
.src('./html/**/*.html')
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('./dist/html'))
.pipe(connect.reload())
})
// 自动监听
gulp.task('watch', async () => {
gulp.watch('./less/**/*.less', gulp.series(['less']))
gulp.watch('./css**/*.css', gulp.series(['css']))
gulp.watch('./js/**/*.js', gulp.series(['js']))
gulp.watch('./img/**/*.{jpg,png,gif}', gulp.series(['img']))
gulp.watch('./json/**/*.{json,xml}', gulp.series(['json']))
gulp.watch('./html/**/*.html', gulp.series(['html']))
})
// 启动服务
gulp.task('connect', async () => {
connect.server({
root: './dist', // 服务的根目录
livereload: 'true', // 热加载
port: 8888, // 端口
})
})
// 合并任务为default
gulp.task(
'default',
gulp.series(
// 合并任务
'clean',
'less',
'css',
'js',
'img',
'json',
'html',
gulp.parallel('watch', 'connect') // 并行
)
)
- package.json
{
"name": "test-gulp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.7",
"del": "^6.0.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^8.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^4.3.0",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.7.0",
"gulp-eslint": "^6.0.0",
"gulp-htmlmin": "^5.0.1",
"gulp-imagemin": "^7.1.0",
"gulp-less": "^5.0.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^5.0.0",
"gulp-uglify-es": "^2.0.0",
"gulp-watch": "^5.0.1"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
5 开发
# 启动项目
gulp
