npm i init -y
npm i gulp@3.0.0 -S
npm i
"server":"gulp"
配置文件
1.创建一个 gulpfile.js
2.引入 var gulp = requrire("gulp")
3.切换node版本10.0版本的,因为版本太高不支持
4.nvm ls
5.查看node版本
6.nvm use ^10.24.1
7切换弄得版本为10.21.1
8.把需要配置gulp文件的版本号在发开环境中,版本有一下几个
9.然后创建一给gupl文件夹->鼠标右击再环中原型 然后npm i 把一下版本全下载下来
"gulp":"4.0.2"
"beowser-sync":"^2.27.10"
"gulp-load-plugins":"^2.0.7"
"gulp-concat":"^3.6.1"
"gulp-reanem":"^3.0.2"
"gulp-babel":"^2.0.0"
"gulp-babel":"^8.0.0"
"@babel/preset-env":"^7.18.6"
"sass":"^1.53.0"
"gulp-sass":"^5.1.0"
"gulp-minify-css":"^1.2.4"
5.然后再 npm i 把这些差劲下载定下来
6.然后创建一给再gupl文件夹->在创建一src文件夹->在创建一个js文件夹->在创建一个html文件夹-
7.然后开始配置路径进行编辑压缩解析等
8.再gulp文件下创建一个gulpfile.js文件,在这个文件里面进行配置
9.第一步:需要先引通过结构的方式进行进入
var {src,dest,parallel,series,watch} = require('gulp')
var {concat,uglify,rename,babel,minifyCss} = require("gulp-load0pluging")()//后面这个小括号是立即执行
var browser = require().create()//会创建一个临时的的服务器
var sass = require("gulp-sass")(require("sass"))
10.第二部,开始搭建
async function init(){
browser.init({
server:"./dist",
port:4001
});
//需要保证css html 实时更新的
watch("./src/js/**/*.js",changejs);
watch("./src/**/*.html",changeHtml);
watch("./src/scss/**/*.scss",changeCss);
}
11.//解析js部分
async function changejs () {
src("./src/js/**/*.js")
.pipe(concat("main.js"))
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(rename("main.min.js"))
.pipe(dest("./dist/js"))
.on("end", browser.reload);
}
12.//解析acss部分
async function changeCss () {
src("./src/scss/**/*.scss")
.pipe(sass())
.pipe(concat("main.css"))
.pipe(minifyCss())
.pipe(rename("main.min.css"))
.pipe(dest("./dist/css"))
.on("end", browser.reload);
}
13.//解析html部分
async function changeHtml () {
src("./src/**/*.html")
.pipe(dest("./dist/"))
.on("end", browser.reload);
}
14.exports.default = series([changejs, changeHtml, changeCss], init);//需要进行导出
注意:需要再src下面创建scss.scss文件
10.先执行前置任务,直接写gulp执行的是默认的任务
11.改名,压缩 ,切换 等等任务都可以
gulp版本号解释
"gulp": "4.0.2",
"browser-sync": "^2.27.10",
->表示hi浏览器 css html 文档实时更新的
"gulp-load-plugins": "^2.0.7",
从包依赖项中加载 gulp 插件,并将它们附加到您选择的对象。
"gulp-concat": "^2.6.1",
这将通过您的操作系统 newLine 连接文件。它将从通过它的第一个文件中获取基目录。
"gulp-uglify": "^3.0.2",
为了帮助正确处理 Node 流的错误情况,此项目建议使用来自可读流的管道。
"gulp-rename": "2.0.0",
gulp-rename 提供了简单的文件重命名方法。
"gulp-babel": "^8.0.0",
"@babel/core": "^7.18.6",
编辑核心
"@babel/preset-env": "^7.18.6",
预设环境的认识
"sass": "^1.53.0",
创建sass包解析sass样式
"gulp-sass": "^5.1.0",
也是解析sass
"gulp-minify-css": "^1.2.4"
这只是一个简单的gulp插件,这意味着它只不过是一个薄薄的包装器。如果您遇到与 CSS 相关的问题,请联系 clean-css。仅当插件本身出现问题时才创建新问题。clean-css
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7JRGCg5w-1656684923609)(C:\Users\26029\AppData\Roaming\Typora\typora-user-images\image-20220701220816904.png)]1.需要自己创建的文件夹
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ACm3aktl-1656684923610)(C:\Users\26029\AppData\Roaming\Typora\typora-user-images\image-20220701220850285.png)]2.解析好的文件格式
配置文件啊:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9qXSL7OR-1656684923610)(C:\Users\26029\AppData\Roaming\Typora\typora-user-images\image-20220701221003690.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-biEzerxY-1656684923611)(C:\Users\26029\AppData\Roaming\Typora\typora-user-images\image-20220701221012038.png)]
json文件的配置 写下来npm i 直接下载
置文件啊:[外链图片转存中…(img-9qXSL7OR-1656684923610)]
[外链图片转存中…(img-biEzerxY-1656684923611)]
json文件的配置 写下来npm i 直接下载
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kEmRTmEr-1656684923612)(C:\Users\26029\AppData\Roaming\Typora\typora-user-images\image-20220701221051632.png)]