目录
生产环境：用户访问的项目环境
开发环境：开发人员进行程序代码开发使用的环境
一、gulp项目自动化打包构建工具
--操作对象
项目
--构建打包
将开发环境写的代码构建打包部署到生产环境
二、使用
1、安装gulp
全局安装使用gulp命令：
npm i gulp -g
本地安装使用gulp提供的api，编写任务：
npm i gulp
是否安装成功
gulp --version
2、gulp项目目录结构
gulpdemo 项目名
src
-css
-js
index.js
-pages
index.html
dist(部署到生产环境的包文件)
gulpfile.js(gulp配置文件)
package.json (项目包描述文件)
3、开发项目前
初始化项目
npm init [-y]
4、引入gulp包
const gulp = require('gulp')
三、gulp API
1、gulp.task('任务名',function(){})
2、gulp.src('需要取的文件路径'):创建一个流，用于从文件系统读取
3、gulp.dest('需要存放的路径'):创建一个用于将数据对象写入文件系统的流
4、.pipe()：管道(src取的文件通过pipe管道存放到dest的文件中)
5、gulp.series('任务名')：将多个任务组合起来，按顺序执行(同步任务),返回一个回调函数
6、gulp.parellel('任务名')：多个任务组合，并发执行(异步任务)，iuiiui返回一个回调函数
7、gulp.watch()：监听文件系统，自动打包
四：打包操作
1、打包压缩css
--引入本地gulp
--安装gulp-cssmin 下载 npm i -D gulp-cssmin
--创建task任务
2、打包压缩sass文件
--引入本地gulp
--安装
npm i sass -D
npm i gulp-sass -D
--引入sass、引入gulp-sass
gulp-sass(sass)
--创建任务
3、打包js任务
压缩
--引入本地gulp
--安装
npm i -D gulp-uglify
--引入gulp-uglify
es6转es5
--引入本地gulp
--安装
npm i -D gulp-babel@7.0.1
npm i -D babel-core
npm i -D babel-preset-es2015
--引入gulp-babel
4、打包html
--引入本地gulp
--安装
npm i -D gulp-htmlmin
--创建任务
....
.pipe(htmlmin({
removeEmptyAttributes:true //移出所有空属性
collapseWhitespace:true //压缩html
}
))
5、处理LIB和STATIC文件
直接传送
6、按顺序执行
gulp.task('任务名',gulp.servies('任务名','任务名'....))
7、并发执行
默认任务exports.default
exports.default = gulp.parellel('任务名','任务名'...)
执行gulp
8、清除dist任务包
--安装
npm i gulp-clean -D
--引入gulp-clean
当dist不存在时
{allowEmpty:true} //允许为空
9、自动打开浏览器
--安装
npm i gulp-webserver -D
--引入gulp-webserver
--创建一个任务
创建一个task
src读取dist文件
.pipe(webserver({
host:'localhost',
port:3000,
livereload:true,
open:'需要打开的页面'
}))
10、更改自动刷新
--创建watch任务
--改写exports.default(默认任务)