Gulp入门
Gulp入门
Gulp入门：https://www.bilibili.com/video/BV1yA411s72G
01_了解gulp
gulp 挂p
了解 gulp
-
前端自动化打包构建工具
=>打包：把文件压缩，整合，移动，混淆 -
了解一下前端的打包构建工具
-
gulp：基于流的打包构建工具
-
webpack：基于js文件的打包构建工具
-
什么是流
流文件：流
一种文件传输的格式
一段一段的文件传输
流格式：流
=> 从头到尾的一个过程
=> 需要从 源 开始一步一步经过加工
-> 每一个步骤需要依赖上一步的结果
->最终给出一个完整的成品
gulp 是基于流格式的一种打包构建工具
gulp 的依赖环境
依赖于 node 环境进行开发
底层封装的内容就是 node 里面的读写文件
gulp 的作用
+对于css文件
=> 压缩
=> 转码（自动添加前缀）
对于 js 文件
=> 压缩
转码（ES6 转 ES5）
对于 html 文件
=> 压缩
=>转码（对格式的转换）
对于静态资源文件的处理
对于第三方文件的处理
....
gulp 的安装
是一个 JavaScript 相关的工具就可以直接使用 npm 进行安装需要安装再你的电脑环境里面，一次安装多次使用打开命令行，输入指令
=> $ npm install--global gulp
gulp 的版本+ gulp@3
=> 安装成功检测版本号，gulp 3.9.1
gulp@4
=> 安装成功检测版本号，gulp cli 2.2.0
=> MAC：$ sudo npm install--global gulp gulp 的检测
打开命令行，输入指令
=> $ gulp--version
=> CLI version：2.3.0
Local version：Unknown gulp 的卸载
打开命令行，输入指令
=> $ npm uninstall--global gulp
gulp 全局工具安装完毕
能给你的电脑提供一个启动 gulp 的环境
私人：可以再 cmd 里面运行 gulp xxx 的指令
02_准备使用gulp
源码和打包以后的内容
pages/index.html 开发源码
打包完毕放在哪？
同级目录下，再次新建一个叫做 pages 的文件夹
=> 不行？不能创建同名文件夹
同级目录下，创建一个叫做 views 的文件
=> 不行？
必须要保证打包前后的目录结构一致
=> 创建一个叫做 src 的目录（表示源码）
=> 创建一个叫做 dist 的目录（存放打包后的文件）
准备使用 gulp
+作用：帮我们打包自己的项目
1.准备一个项目
需求：你要确定好自己的目录结构
你要分开源码和打包以后的内容
确定自己的目录结构
xiaomi src源码
+ pages html
+ cSs CSS
+ js js sasssass images图片
+ videos视频
+ audios音频
+ lib第三方文件（jquery，swiper，….）
+ fonts字体图标文件
2.准备一个 gulpfile.js 的文件
必须有
gulp 进行打包的依据
每一个项目需要一个 gulpfile.js
我们再这个文件里面进行本项目的打包配置
gulp 再运行的时候，会自动读取 gulpfile.js 文件里面的配置
按照你再 gulpfile.js 文件里面的配置进行打包工作
注意：**直接写在项目根目录，和 src 同级**
3.再项目里面再次安装 gulp
注意：**项目里面的 gulp 是以第三方模块的形式出现的*
专门给你提供配置打包流程的 API 的
每一个项目都要安装一次
4.再 gulpfile.js 里面书写配置文件书写你该项目的打包流程
+ 书写完毕以后，按照打包流程去执行 gulp 指令运行 gulpfile.js 文件
gulp
1.全局依赖环境 gulp
- 一台电脑安装一次，以后使用就可以了再命令行提供 gulp xxx 的能力指令 $ npm install--global gulp
2.项目依赖第三方 gulp I每一个项目都要安装一次
作为第三方包出现，在你导入以后，可以使用 gulp.xxx（）方法切换到项目目录，输入指令 $ npm install gulp -D
书写我本个项目的打包配置流程
按照 gulp 的语法来进行配置
gulp 指令运行的时候才会认识
03_gulp常用的API
1.gulp.task（）
=> 语法：gulp.task（任务名称，任务处理函数）
=> 作用：创建一个基于流的任务
=> 例子：gulp.task（'htmlHandler'，function（）{
//找到 html 源文件，进行压缩，打包，放入指定目录
}）
2.gulp.src（）
=> 语法：gulp.src（路径信息）
作用：找到源文件
书写方式
2-1.gulp.src（'./a/b.html'）
-> 找到指定一个文件
2-2.gulp.src（'./a/*.html'）
>找到指定目录下，指定后缀的文件2-3.gulp.src（'./a/**'）
-> 找到指令目录下的所有文件
2-4.gulp.src（'./a/**/*'）
-> 找到 a 目录下所有子目录里面的所有文件2-5.gulp.src（'./a/**/*.html'）
-> 找到 a 目录下所有子目录里面的所有.html 文件
3.gulp.dest（）
=> 语法：gulp.dest（路径信息）
=> 作用：把一个内容放入指定目录内
=> 例子：gulp.dest（'./abc'）
-> 把他接收到的内容放到 abc 目录下
4.gulp.watch（）
=> 语法：gulp.watch（路径信息，任务名称）
=> 作用：监控指定目录下的文件，一旦发生变化，从新执行后面的任务
=> 例子：gulp.watch（'./src/pages/*.html'，htmlHandler）
当指定目录下的 html 文件发生变化，就会执行 htmlHandler 这个任务
5.gulp.series（）
语法：gulp.series（任务1，任务2，任务3，…..）
作用：逐个执行多个任务，前一个任务结束，第二个任务开始
6.gulp.parallel（）
=> 语法：gulp.parallel（任务1，任务2，任务3，...）
=> 作用：并行开始多个任务
7.pipe（）
管道函数
所有的 gulp API 都是基于流
=> 接收当前流，进入下一个流过程的管道函数
=> 例子：
gulp.src（）.pipe（压缩任务）.pipe（转码）.pipe（gulp.dest（'abc'））
gulpI 常用插件
gulp 的各种插件就是用来执行各种各样的压缩混淆转码任务的
1.gulp-cssmin
=> 下载：npm i gulp-cssmin-D
=> 导入：const cssmin = require（'gulp-cssmin'）
=> 导入以后得到一个处理流文件的函数
=> 直接再管道函数里面执行就好了
04_gulp初体验
gulp cssHandler
node gulpfile.js
需要捕获到该任务的结束，需要把这个流 return 出去，task 就会处理流
import { src, dest } from 'gulp';
import cssmin from 'gulp-cssmin';
import fs from 'fs'; //引入文件系统模块
// 1.创建一个打包 css 的任务 gulp cli 2.0 gulp3.0
// gulp.task('cssHandler',function(){
// //找源文件 //压缩文件 //输出到目标文件夹
// return gulp.src('./src/css/*.css').pipe(cssmin()).pipe(gulp.dest('./dist/css/'));
// })
//1.创建一个打包 css 的任务
// gulp@4 的标准书写，需要再 gulpfile.js 文件里面把这个函数名导出 //gulp@3返回return gulp@4写done()
export function cssH (done) {
const outputDir = './dist/css';
if (!fs.existsSync(outputDir)) {
fs.mkdirSync(outputDir, { recursive: true }); // 确保目录存在
}
// *.css 找不到 语法变了
src('./src/css/index.css').pipe(cssmin()).pipe(dest(outputDir));
done();
}
gulpfile.js
├─dist
│ └─css
└─src
└─css
05_ 添加一个打包css的任务
2.gulp-autoprefixer
=> 下载：npm i gulp-autoprefixer-D
=> 导入：const autoPrefixer = require（'gulp-autoprefixer'）
=> 导入以后得到一个处理流文件的函数
直接再管道函数里面使用，需要传递参数
browsers:[要兼容的浏览器]}
//gulpfile.js
import { src, dest } from 'gulp';
import cssmin from 'gulp-cssmin';
import fs from 'fs'; //引入文件系统模块
import autoPrefixer from 'gulp-autoprefixer';
// 1.创建一个打包 css 的任务 gulp cli 2.0 gulp3.0
// gulp.task('cssHandler',function(){
// //找源文件 //压缩文件 //输出到目标文件夹
// return gulp.src('./src/css/*.css').pipe(cssmin()).pipe(gulp.dest('./dist/css/'));
// })
//1.创建一个打包 css 的任务
// gulp@4 的标准书写，需要再 gulpfile.js 文件里面把这个函数名导出 //gulp@3返回return gulp@4写done()
export function cssH (done) {
const outputDir = './dist/css';
if (!fs.existsSync(outputDir)) {
fs.mkdirSync(outputDir, { recursive: true }); // 确保目录存在
}
// *.css 找不到 语法变了
src('./src/css/index.css') //找源文件
// .pipe(autoPrefixer({browsers: ['last 2 versions']})) //package.json 里面添加了依赖 这不需要
.pipe(autoPrefixer()) //自动加前缀
// .pipe(cssmin()) //压缩文件
.pipe(dest(outputDir)); //输出到目标文件夹
done();
}
package.json
{
"name": "demo",
"version": "1.0.0",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"gulp": "^5.0.0",
"gulp-autoprefixer": "^9.0.0",
"gulp-cssmin": "^0.2.0"
},
"browserslist": [
"last 2 versions",
"FireFox < 20",
"IOS < 7"
]
}
06_添加一个打包sass的任务
sass转换的问题
有一个电脑上的工具叫做 sass
=>可以转换和编译 sass 文件为 css 文件gulp 里面配置一个任务，也可以转换 sass文件
写项目的时候使用哪一个？
如果你需要使用 gulp 来配置你的项目，那么不需要使用 sass 工具
如果你不需要使用 gulp来配置你的项目，那么就需要使用 sass 工具
写项目
=>使用 sass 工具转换 sass 文件为 css
=> 使用 gulp 对 css，js，html 等文件进行打包
写项目不要多个工具（完成一个工作的多个工具）混着使用
3.gulp-sass
=> 下载：npm i gulp-sass-D很容易报错，基本下载不成功
3.gulp-sass
=> 下载：npm i gulp-sass-D
-> 很容易报错，基本下载不成功
-> 为什么：因为 gulp-sass 依赖另一个第三方，node-sass I
=> node-sass 很难下载成功
=> 以前都是再一个地方下载，后来 node-sass 自己单独有一个下载地址
=> 如果你不进行单独的 node-sass 下载地址配置，就很容易失败
-> 解决：给 node-sass 单独配置一个下载地址
=> 下载 node-sass 从这个单独的地址下载，下载其他的东西还是统一地址
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass
https://npm.taobao.org/mirrors/node-sass
set SASS_BINARY_SITE=https://registry.npmmirror.com/node-sass
npm i node-sass -D
npm i gulp-sass -D
/*! 强力注释 */
sass 转码的使用
有一种方式叫做 导入 sass 文件
如果你需要用到导入
你可以把变量和混合器定义在.sass 后缀的文件中
=> 你设置的变量和混合器文件不会被转码
=> 你的 gulp 配置的只会转码.scss 文件但是，当他转码.scss 文件的时候，会自动读取.sass 文件里面的变量
=> 会给你解析以后使用
gulpfile.js
import { src, dest } from 'gulp';
import cssmin from 'gulp-cssmin';
import fs from 'fs'; //引入文件系统模块
import autoPrefixer from 'gulp-autoprefixer';
// const sass = require('gulp-sass')(require('sass'));
import one from 'gulp-sass'
import two from 'sass'
let sass=one(two)
export function sassH (done) {
const outputDir = './dist/css';
if (!fs.existsSync(outputDir)) {
fs.mkdirSync(outputDir, { recursive: true });
}
src('./src/css/index.scss')
.pipe(sass())
.pipe(autoPrefixer())
// .pipe(cssmin())
.pipe(dest(outputDir));
done();
}
07_添加一个打包js的任务
4.gulp-uglify
=> 把 JS 文件压缩的
=> 下载：npm i-D gulp-uglify
=> 导入：const uglify = require（'gulp-uglify'）
=> 导入以后得到一个可以处理流文件的函数
直接再管道函数中使用就可以了
注意：你不能写 ES6 语法，一旦有了 ES6 语法就会报错
现在直接支持了 新版
5.gulp-babel
=> 专门进行 ES6 转 ES5 的插件
=> gulp-babel 的版本
-> gulp-babel@7：大部分使用再 gulp@3 里面
-> gulp-babel@8：大部分使用再 gulp@4 里面
=> 下载：gulp-babel 需要依赖另外两个包，我们要一起下载
另外两个包：@babel/core @babel/preset-env
导入：
-> 只要导入一个包就够了，他会自动导入另外两个包
-> const babel = require（'gulp-babel'）
=> 导入以后得到一个可以处理流文件的函数直接再管道函数内部使用，需要传递参数
npm i -D @babel/core
cnpm i -D @babel/preset-env
import { src, dest } from 'gulp';
import cssmin from 'gulp-cssmin';
import fs from 'fs'; //引入文件系统模块
import autoPrefixer from 'gulp-autoprefixer';
import gulpUglify from 'gulp-uglify';
import babel from 'gulp-babel';
export function jsH (done) {
src('./src/js/index.js')
.pipe(babel({
// babel@7.x presets: ['es2015'] => babel@8.x presets: ['@babel/env']
presets: ['@babel/env']
}))
.pipe(gulpUglify())
.pipe(dest('./dist/js/'));
done();
}
shell>gulp jsH
08_添加一个打包html的任务
6.gulp-htmlmin
=> 下载：npm i-D gulp-htmlmin
=> 导入：const htmlmin = require（'gulp-htmlmin'）
=> 导入以后得到一个可以处理流文件的函数
直接再管道函数里面调用，需要传递参数
标签一个属性可以不用双引号
.pipe（htmlmin（f/1 通过你配置的参数来进行压缩
collapseWhitespace：true，11 表示移出空格removeEmptyAttributes：true，11 表示移出空的属性（仅限于原生属性）
collapseBooleanAttributes：true，//移出 checked 类似的布尔值属性
]removeAttributeQuotes：true，11 移出属性上的双引号
minifyCSS：true，//压缩内嵌式 css 代码（只能基本压缩，不能自动添加前缀）
minifyJS:true，//压缩内嵌式 JS 代码（只能基本压缩，不能进行转码）
removeStyleLinkTypeAttributes：true，11 移出 style 和 link 标签上的 type
removeScriptTypeAttributes：true，11 移出 script 标签上默认的 type 属性
import htmlmin from 'gulp-htmlmin';
export function htmlH (done) {
src('./src/pages/index.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(dest('./dist/pages/'));
done();
}
gulp htmlH
09_添加其他任务的移动
图片问题
再开发环境中
图片是不需要我们压缩的=> 直接使用线上地址
=> 图片是 UI 处理好给我们的gulp-imagemin
=> 专门用来压缩图片（无损压缩）
=> 下载需要很好的网络环境压缩程度最高是 7 级，1024K 变成 1023K
10_创建一个默认任务
3.配置一个默认任务
默认任务的作用就是把所有的任务给我一起执行了要吗使用 gulp.series（），要吗使用 gulp.parallel（）这两个方法的返回值是一个函数，返回值可以直接被当作任务函数使用使用 task 的方式创建一个 default 任务方式1：
gulp.task（'default'，（）=>{}）
方式2：
module.exports.default =（）=>{}
默认任务为什么一定要叫做 default
因为你使用 gulp 指令的时候
=> 应该是 $ gulp 任务名称
当你有一个叫做 default 的任务的时候
=> 你可以直接执行指令 $ gulp
=>他会自动去指定你gulpfile.js文件中的 default
任务
import { src, dest,parallel } from 'gulp';
import cssmin from 'gulp-cssmin';
import fs from 'fs'; //引入文件系统模块
import autoPrefixer from 'gulp-autoprefixer';
import gulpUglify from 'gulp-uglify';
import babel from 'gulp-babel';
import htmlmin from 'gulp-htmlmin';
// const sass = require('gulp-sass')(require('sass'));
import one from 'gulp-sass'
import two from 'sass'
let sass=one(two)
export function sassH (done) {
const outputDir = './dist/css';
if (!fs.existsSync(outputDir)) {
fs.mkdirSync(outputDir, { recursive: true });
}
src('./src/css/index.scss')
.pipe(sass())
.pipe(autoPrefixer())
// .pipe(cssmin())
.pipe(dest(outputDir));
done();
}
export function jsH (done) {
src('./src/js/index.js')
.pipe(babel({
// babel@7.x presets: ['es2015'] => babel@8.x presets: ['@babel/env']
presets: ['@babel/env']
}))
.pipe(gulpUglify())
.pipe(dest('./dist/js/'));
done();
}
export function htmlH (done) {
src('./src/pages/index.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(dest('./dist/pages/'));
done();
}
//audio video image font 同样处理方式 一个打包第三方的任务创建libs文件夹
export function otherH (done) {
src('./src/images/**')
.pipe(dest('./dist/images/'));
done();
}
export default parallel(sassH,jsH,htmlH);
gulp
gulp dafalut
11_创建一个删除任务
为什么会多一个文件
+我们再执行gulp任务的时候
不会进行文件夹清理的
都是按照当前的 src 目录，和你配置的内容进行打包放到你指定的目录，如果这个目录已经存在，那么直接放进去如果这个目录不存在，就创建一个目录再放进去
当我们第二修改名称以后打包
+ 本身 dist/css 里面就有一个 index.css 的文件
+又打包了一个 abcd.css 的文件，发现 dist/css 目录存在，就直接放进去d所以就会出现两个文件同时存在
需要的结果
+ 只有一个文件
7.del
=> 下载：npm i-D del
=> 作用：删除文件目录
=> 导入：const del = require（'del'）
导入以后得到一个函数，直接使用传递参数就可以了
export function delH (done) {
//del直接执行就可以了，不需要流参数以数组的形式传递你要删除的文件夹
del(['./dist/']);
done();
}
查del 文档
12_gulp启动服务
利用 gulp 启动一个服务器
-
gulp 是基于 node 环境的工具
-
node 就是可以做服务器的语言gulp 可以启动一个基于 node 的服务器启动服务器，用哪个目录当作服务器根目录
-
dist 目录，如果你使用 src 目录当作根目录，sass 文件怎么办
8.gulp-webserver
=> 作用：启动一个基于 node 书写的服务器
=> 下载：npm i-D gulp-webserver
=> 导入：const webserver = require（'gulp-webserver'）
=> 导入以后得到一个处理流文件的函数
=> 我们再管道函数内调用就可以了，需要传递参数
import webserver from 'gulp-webserver';
export const webH=(done)=>{
src('./dist/')
.pipe(webserver({
host: 'localhost',
port: 8080,
livereload: true,//true开启实时刷新
path: '/dist/pages/index.html',
open: true
}))
done();
}
13_gulp配置代理
export const webH=(done)=>{
src('./dist/')
.pipe(webserver({
host: 'localhost',
port: 8088,
livereload: true,//true开启实时刷新
path: './pages/index.html',
open: true,
proxies:[
{
source: '/api',
target: 'http://localhost:3000'
}
]
}))
done();
}
14_gulp添加监控文件变化任务
// watchH 监听任务，监视文件变化自动执行打包任务
export const watchH=(done)=>{
watch('./src/css/**/*.scss',sassH);
watch('./src/js/**/*.js',jsH);
watch('./src/pages/**/*.html',htmlH);
watch('./src/images/**',otherH);
}
15_gulp配置导入组件
gulp 打包组件
场景
=> 把重复的位置单独拿出来，写成一个 html 片段
=> 单独拿出来的片段可以包含 css 和 js
-> 也可以不包含
组件
一段可以包含（css/js）一整套 html 结构片段
把页面的每一部分分成一段一段的 html 片段
最后组装在一起
gulp-file-include
=> 作用：再一个 html 页面里面导入一个 html 片段
=> 下载：npm i-D gulp-file-include
=> 导入：const fileInclude = require（'gulp-file-include'）
=> 导入以后得到一个处理流文件的函数
=>我们再管道函数内调用就可以了，需要传递参数
import fileinclude from 'gulp-file-include';
export function htmlH (done) {
src('./src/pages/index.html')
.pipe(fileinclude({prefix: '@-@', basepath: './src/components'}))
// .pipe(htmlmin({collapseWhitespace: true}))
.pipe(dest('./dist/pages/'));
done();
}
html
<!-- 第二个传值 用也是标@@+title -->
@-@include("./header.html",{title:"Home"})
浙公网安备 33010602011771号