关于Glup_gulp使用教程

关于Glup_gulp使用教程gulp—-项目工程化的工具一,作用:(1)能够完成代码的压缩(2)合并,复制,监听,ES6的代码转换,启动服务器等等二,gulp使用步骤:搭建环境(1)安装nodeJS(2)安装node的目的是为了测试npm(npm是nodeJS的包管理工具全称:nodeJSPackageManager)使用npm的原因:a.如果一个项目中使用的第三方js代码非常多,…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

gulp —-项目工程化的工具

一,作用:
(1) 能够完成代码的压缩
(2) 合并,复制,监听,ES6的代码转换,启动服务器等等

二,gulp 使用步骤:
搭建环境
(1)安装nodeJS
(2) 安装node的目的是为了测试npm (npm是nodeJS的包管理工具 全 称:nodeJS Package Manager)
使用npm的原因:
a.如果一个项目中使用的第三方js代码非常多,意味着,我们需要在不同的网站下载不同的js代码(js库), 非常麻烦,而且,如果js代码之间互相有依赖,那么还需要把依赖的js下载下来。
b.所以Npm把所有第三方js库收集在一起,放在npm的服务器上,这样,程序员每次下载时,统一从npm下载。而且,npm还可以管理js之间的依赖关系。一个包就是一个js库。所以,nodeJS Package Manager(npm)就是nodeJS专门管理js库的一个工具。

搭建gulp环境步骤

一. 打开cmd命令行
2.输入 node -v
3.输入 npm -v
4. npm install gulp -g //安装全局gulp
5.Gulp -v //测试是否安装gulp
6.本地安装gulp
进入项目目录(如:D:\gulpprj)
随后在项目目录在输入cmd命令行
输入npm init //生成package.json 随后一路回车,此时在项目中有一个package.json的文件
7.输入 npm install gulp –save-dev //表示安装成功 随后在项目中产生 node_moudles 的文件

开发目录和发布目录理解图
在开发目录下建立文件 “gulpfile.js”,记住:这个文件一定是放在项目根目录下。不要放在项目的其它子文件里,文件名就是“gulpfile.js”,不要乱起。
在gulpfile.js中实现如下代码:
**

① 复制文件:**

(将开发目录拷贝到发布目录 均在本地)在这里插入图片描述(其中 const 相当于int 定义变量 )
在这里插入图片描述随后在 cmd 命令行中输入 gulp opy -html
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200203192159522.png

③ 压缩js文件:*

Gulp本身只能完成复制文件,监听文件等简单功能,如果要完成更多的功能,gulp提供很多接口,可以使用插件
压缩js文件,就需要 gulp-uglify 插件。
在cmd命令行输入 npm install gulp-uglify –save-dev //安装 gulp-uglify 插件

随后在gulpfile.js的文件中输入如下 (即将插件引入)
在这里插入图片描述
在这里插入图片描述***随后在cmd中输入 gulp copy-html
然后输入
gulp uglifyjs
在这里插入图片描述缺点 :复制html文件+压缩js文件的方法在每次更改代码都要运行如上两条命令,过于繁琐,因此采用监听文件的方法 (每次改动文件都会自动拷贝和压缩)
**

② 监听文件: 使用watch

在这里插入图片描述
随后在cmd中输入 gulp watchall
在这里插入图片描述待修改代码后则一直会监听

④ 合并js文件

使用gulp-concat 插件,把若干个小js文件合并成一个大的js文件,可以减少http的请求(提高项目的性能)。
在cmd中输入 npm install gulp-concat –save-dev //安装gulp-concat 插件
在这里插入图片描述随后在gulpfile.js的文件中输入 const concat = require(“gulp-concat”);
在这里插入图片描述
随后如果要合并index.js和tools.js两个文件 则继续在gulpfile.js的文件中输入如下所示
( 接着上面的启动监听)
在这里插入图片描述若要压缩则如上所示,在合并后进行压缩,在合并的文件common.js若再次更改,则继续压缩 执行.pipe(uglify())
随后在cmd命令行输入 gulp watchall 进行监听

⑤ 重命名(js文件)

使用gulp-rename 插件
在cmd命令行输入 npm install gulp-rename –save-dev //安装gulp-rename 插件
在这里插入图片描述
待安装完成后 在gulpfile.js的文件中输入const rename = require(“gulp-rename”);
在这里插入图片描述后继续在gulpfile.js的文件中输入如下所示
(接着上面的合并)
在这里插入图片描述随后再次启动监听 在cmd命令行输入** gulp watchall

⑥ 压缩css

使用Gulp-minify-css 插件
在cmd命令行中输入 npm install gulp-minify-css –save-dev //安装Gulp-minify-css 插件
待安装成功后在gulpfile.js的文件中输入const minifycss = require(“gulp-minify-css”)
(继续在重命名js文件下添加)
在这里插入图片描述后继续在gulpfile.js的文件中输入如下所示
(接着上面的重命名js)
在这里插入图片描述随后再次启动监听 在cmd命令行输入** gulp watchall ,后检验在发布目录中的css压缩文件。

gulpfile.js的文件中所用插件的在这里插入图片描述

在这里插入图片描述

⑦ 编译sass 或 less

添加链接描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/223440.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • java和html_如何区别html和html5

    java和html_如何区别html和html5JSP和HTMLJSP代表JavaServerPages;它主要用于开发动态网页,文件的扩展名为.jsp。JSP的主要优点是程序员可以在HTML中插入Java代码;使用JSP标签插入Java代码。程序员可以编写<%标签来启动Java代码,并在Java代码的末尾写入%>标签。JSP允许在HTML文件中插入Java代码HTML代表超文本标记语言。它是众所周知的用于开发网页的标记语言,有助于构建网页结构。JSP和HTML之间的区别1、采用的技术不同HTML是客户端技术,提供

    2022年10月23日
  • socket粘包解决方案_socket 传输文件

    socket粘包解决方案_socket 传输文件一 .两个简单概念长连接与短连接:1.长连接   Client方与Server方先建立通讯连接,连接建立后不断开, 然后再进行报文发送和接收。2.短连接   Client方与Server每进行一次报文收发交易时才进行通讯连接,交易完毕后立即断开连接。此种方式常用于一点对多点通讯,比如多个Client连接一个Server.二 ….

  • HttpCanary下载_HTML自我介绍

    HttpCanary下载_HTML自我介绍前言首先,我们无论学习哪个框架,都要带着问题,带着思考去学习思考1:HttpRunner是什么?思考2:HttpRunner的设计模式是什么?思考3:为什么我们要学习HttpRunner?他的

  • import duties(Python import变量)

    最近在读《编程之美》,打算用C#实现其中一个题目,就是如何控制CPU的使用率在50%,使得在资源管理器中CPU利用率维持在一条直线。单核的还容易办到,但是现在的机器一般都是多核的,这样就需要调用Win32API SetThreadAffinityMask 来给线程制定CPU去执行。但这个API只能在C++调用,那么在C#里如何调用呢?更进一步,就是在C#里为什么没有全部的WIN32API可

  • 理解和使用SQL Server中的并行

    理解和使用SQL Server中的并行

    2021年11月28日
  • idea2021.5激活码 mac【在线注册码/序列号/破解码】

    idea2021.5激活码 mac【在线注册码/序列号/破解码】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号