安装
1、全局环境依赖 gulp
$ npm install -- global gulp
一台电脑安装一次，以后直接使用
命令行提供 gulp xxx 的能力
2、项目依赖第三方 gulp
每个项目都需要安装一次
作为第三方包出现，在你导入以后，可以使用 gulp.xxx() 方法
切换到项目目录，输入命令 $ npm install gulp -D
3、package.json 记录第三方依赖
dependencies：表示项目依赖，指项目运行需要用到的内容，上线之后也需要
devDependencies：项目的开发依赖，上线之后不需要用到的
4、gulp 第三方包放在 devDependencies
在你安装第三方依赖的时候，书写 $ npm install --dev 包名
就会把依赖项目记录在 devDependencies
5、在 gulpfile.js 里面书写配置文件
书写该项目的打包流程
书写完毕，按照打包流程去执行 gulp 指令运行 gulpfile.js 文件
配置文件
gulp 是依赖 node 环境运行的
书写 gulpfile.js 文件就按照 node 的模块化语法进行书写（CommonJs）
项目结构图
c849ead117bac9786780a8d78d20ae3.png
gulpfile.js 文件
// gulp 配置文件
// 引入gulp
const gulp = require('gulp')
/*
1. css压缩
$ npm i gulp-cssmin -D
*/
const cssmin = require('gulp-cssmin')
/*
2. css添加前缀
$ npm i gulp-autoprefixer -D
*/
const autoprefixer = require('gulp-autoprefixer')
/*
3. sass 转换css 需要依赖node-sass
如果下载失败，先下载node-sass
1. $ set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
2. $ npm i node-sass -D
下载 gulp-sass
$ npm i gulp-sass -D
*/
const sass = require('gulp-sass')
/*
4. js压缩 gulp-uglify
$ npm i -D gulp-uglify
*/
const uglify = require('gulp-uglify')
/*
*/
// 5. js es6转es5 gulp-babel
// 依赖两个包：@babel/core @babel/preset-env
// $ npm i -D @babel/core
// $ npm i -D @babel/preset-env
// $ npm i -D gulp-babel
const babel = require('gulp-babel')
/*
6. html 压缩 gulp-htmlmin
$ npm i -D gulp-htmlmin
*/
const htmlmin = require('gulp-htmlmin')
/*
7. 图片压缩（无损压缩） gulp-imagemin
压缩程度最高7级
$ npm i -D gulp-imagemin
*/
/*
8. 删除 del
$ npm i -D del
*/
const del = require('del')
/*
9. gulp-webserver
启动一个基于node书写的服务器
npm i -D gulp-webserver
导入之后得到一个处理流文件的函数，再管道函数内调用就可以了，需要传递参数
*/
const webserver = require('gulp-webserver')
/*
10. gulp-file-include
作用： 在一个HTML页面导入一个html片段
下载： npm i -D gulp-file-include
*/
const fileInclude = require('gulp-file-include')
// gulp@4 写法
// css打包任务
const cssHandler = function cssHandler() {
return gulp
.src('./src/css/*.css') // 1.找到内容
.pipe(autoprefixer()) // 2.自动添加前缀
.pipe(cssmin()) // 3.压缩
.pipe(gulp.dest('./dist/css/')) // 4.放到指定目录
}
// sass打包任务
const sassHandler = function sassHandler() {
return gulp
.src('./src/sass/*.scss') // 1.找到内容
.pipe(sass()) // 2. 转换成css
.pipe(autoprefixer()) // 3.自动添加前缀
.pipe(cssmin()) // 4.压缩
.pipe(gulp.dest('./dist/sass/')) // 5.放到指定目录
}
// 打包js文件的任务
const jsHandler = function jsHandler() {
return gulp
.src('./src/js/*.js') // 1. 找到js文件
.pipe(babel({
presets: ['@babel/env']
})) // 2. es6转换es5
.pipe(uglify()) // 2.压缩
.pipe(gulp.dest('./dist/js/')) // 3. 放到指定目录
}
// 打包html任务
const htmlHandler = function () {
return gulp
.src('./src/pages/*.html')
.pipe(fileinclude({ // 根据配置导入对应的html片段
prefix: '@-@', // 自定义标识符
basepath: './src/components', // 基准目录，组件文件都在哪一个目录里面
}))
.pipe(htmlmin({
// collapseWhitespace: true, // 移除空格
removeEmptyAttributes: true, // 移除空属性（仅限原生）
collapseBooleanAttributes: true, // 移除 checked 类似的布尔值
removeAttributeQuotes: true, // 移除属性上的双引号
minifyCSS: true, // 压缩内嵌css代码（基本压缩，不能自动添加前缀）
minifyJS: true, // 压缩内嵌js代码（基本压缩，不能转码）
removeStyleLinkTypeAttributes: true, // 移除 style 和 link 上的 type 属性
removeScriptTypeAttributes: true, // 移除 script 上的 type 属性
}))
.pipe(gulp.dest('./dist/pages/'))
}
// 打包images文件的任务
const imgHandler = function () {
return gulp
.src('./src/images/**')
.pipe('./dist/images/')
}
// 默认先删除dist文件夹
const delHandler = function () {
return del(['./dist/'])
}
// 配置启动服务器任务
// 利用gulp启动一个服务器
// gulp是基于node环境的工具
// node就是可以做服务器的语言
// gulp可以启动一个基于node的服务器
// 用dist目录当做服务器根目录
const webHandler = function () {
return gulp
.src('./dist')
.pipe(webserver({
host: 'localhost', // 域名(可以配置自定义域名)
port: '8080', // 端口号
livereload: true, // 当文件修改的时候是否刷新页面
open: './pages/index.html', // 默认打开哪一个文件（从dist 目录以后的目录开始书写）
// proxies: [ // 配置所有代理
// // 每一个代理就是一个对象数据类型
// {
// source: '', // 代理标识符
// target: '', // 代理目标地址
// }
// ]
}))
}
// 创建一个监控任务
const watchhandler = function () {
//使用 gulp.watch
gulp.watch('./src/sass/*.scss', sassHandler)
gulp.watch('./src/css/*.css', cssHandler)
gulp.watch('./src/pages/*.html', htmlHandler)
}
module.exports = {
cssHandler: cssHandler,
sassHandler: sassHandler,
jsHandler: jsHandler,
htmlHandler: htmlHandler,
imgHandler: imgHandler,
delHandler: delHandler,
webHandler: webHandler
}
// 创建默认任务
// 作用：把所有的任务一起执行
// 依次执行：g ulp.series() 并行：gulp.parallel()
// 返回值是一个函数，返回值可以被直接当做任务函数使用
// 使用 task 创建一个 default 任务
// gulp.task('default', () => { })
// 或
// module.exports.default = gulp.series(
// delHandler,
// gulp.parallel(cssHandler, sassHandler, jsHandler, htmlHandler)
// )
// 添加完毕服务器任务以后，修改 default 任务
module.exports.default = gulp.series(
delHandler,
gulp.parallel(cssHandler, sassHandler, jsHandler, htmlHandler),
webHandler,
watchhandler
)
