gulp配置

努力的程序员30*15k

于 2022-07-01 22:16:49 发布

阅读量383

点赞数

分类专栏： gulp 文章标签： gulp 前端 npm

本文链接：https://blog.csdn.net/weixin_45712583/article/details/125566655

版权

gulp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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)]