gulp 打包多级目录结构

最新推荐文章于 2024-09-09 09:34:52 发布

xiaobo-921

最新推荐文章于 2024-09-09 09:34:52 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： gulp gulp-useref 打包

本文链接：https://blog.youkuaiyun.com/qq_39582021/article/details/90248950

web 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了使用Gulp进行自动化任务配置的方法，包括gulpfile.js代码示例，以及打包前后目录结构的变化。通过本文，读者可以了解如何利用Gulp优化项目构建流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这一篇三部分组成: 0. gulpfile.js 代码 1. 打包前目录结构 2.打包后目录结构

原理分析: https://blog.youkuaiyun.com/qq_39582021/article/details/90240256

0. gulpfile.js 代码 , 执行代码前最好 clear 一下命令行工具

1. 打包前目录结构:

2. 打包后 release 目录结构:

后期如果想到更好的解决方案 , 再补上 , 如果有那位大神能够解决 , 欢迎指教!

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xiaobo-921

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

gulp 打包 , 处理多级 html 目录问题

FN的博客

05-15

1803

多级目录结构图: https://blog.youkuaiyun.com/qq_39582021/article/details/90248950 html 存放在不同的目录中 , 该如何处理? , [b]起因[/b]: 我项目根目录只放了一个 index.html ,其他的 html 文件全部放在新建的 html 文件夹中 [b]经过[/b]: [code=javascript] var g...

使用gulp构建一个项目

湛庐无方

06-01

8749

gulp是前端开发过程中自动构建项目的工具，相同作用的还有grunt。构建工具依靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查、合并、重命名、压缩、格式化、浏览器自动刷新、部署文件等功能。 gulp是基于Nodejs的自动运行器，他借鉴了Unix操作系统的管道（pipe）思想，前一级的输出是后一级的输入。下面是具体流程：

参与评论您还未登录，请先登录后发表或查看评论

gulp 保持任意目录结构复制文件

CloudJay的博客

09-21

561

直接上代码了,请根据自己的需要修改 const { src, dest, series } = require('gulp') const path = require('path') const build_dir = './dist' const rootPath = 'pdfh5' function copyToDist () { return src(['css/**', 'js/**','index.html']).pipe( dest(function (file) {

gulp教程之gulp-imagemin压缩图片

最新发布

06-07

但是需要注意的是，这些插件通常默认不会保持多级目录结构，因此我们需要进行配置。步骤：1.在`pom.xml`中配置插件，用于压缩JS和CSS文件。2.指定输入目录（通常是`src/main/webapp`）和输出目录（通常是WAR包构建的...

完美解决调用上级目录中的css样式文件的路径问题

09-25

尤其是当项目结构层次较多，且需要跨多级目录引用资源时，路径问题就显得尤为突出。在给定的文件内容中，提到了一个具体的例子：HTML文件放置在uploads/jhsy/zyzd目录下，而CSS文件存放在uploads/css目录下。由于...

jQuery网站后台常用多级侧边栏导航菜单代码

06-05

可以使用工具如Webpack或Gulp进行自动化打包。总之，这个项目结合了Bootstrap的样式和jQuery的功能，为网站后台构建了一个实用且美观的多级侧边栏导航菜单。通过对HTML结构的合理组织，以及jQuery对事件的灵活处理...

商城网站右侧高效多级弹出菜单实现

资源摘要信息:"简洁版放购物商城网站右侧多级弹出菜单" 知识点一：多级弹出菜单的实现原理 ...开发者可以使用各种工具，如Webpack、Gulp或在线压缩工具，来减少文件大小并保持或提高代码的执行效率。

gulp的使用

jenyzhang的专栏

07-27

683

gulp：自动化构建工具可以用来处理常见任务，如：文件保存时自动重载浏览器使用预处理器如Sass、LESS优化资源，比如压缩CSS、JavaScript、压缩图片等等。下面演示的是清除文件，以及压缩文件。 1. 清除文件下面的代码可以实现清除test.js文件的任务。把下面的代码保存为gulpfile.js var clean = require('gulp

gulp打包全攻略

Mr-yang的随笔

07-01

3784

虽然文章很长，但内容绝不冗余~ 目录 gulp 的下载第三方模块完整代码书写 gulp 打包的配置文件，需要按照 node 的模块化语法规则进行书写 gulp 的下载如果你想使用 gulp 对你的项目进行打包 1. 需要安装一个全局工具 => 打开命令行, 目录无所谓 => 输入指令: $ npm install --global gulp => 作用: 在你的电脑内安装一个环境, 让你可以在命令行书写 gulp xxx 这样的指令 ...

项目打包之gulp 打包工具

weixin_43314255的博客

03-11

1000

我们在做项目的时候，往往一个项目将要上线的时候都涉及到项目打包，即使不是一个完整的项目。小型未完成的项目在上线的时候我们也可以进行打包，打包项目可以大大压缩我们的项目体积。比如我们在写js和css代码的时候，为了美化好看，我们往往会进行缩进换行，一来好看，二来也是符合我们正常人的编程思维。项目打包就是把文件中多余的东西去掉，比如换行，空格之类的。大大压缩我们的代码体积，这是我们打包项目较大的意义之处了。常见的打包工具有两种 gulp打包工具 webpack 打包工具这里我们只介绍有关gulp工具相关

wepy开发微信小程序的优化之gulp打包

qq_36259513的博客

11-09

1304

小程序限制每个包不得超过2M,经常写着写着就会发现预览的时候报错，文件超过2M，这时可用分包的方法来解决这问题如图，分为pages,packageA,packageB,具体分包实现可看小程序文档另外代码压缩也可以解决这问题，并且能优化项目，小程序开发工具自带了一个“上传代码时自动压缩”，可当你文件超过两M时，打开这个选项再进行预览，一样会报超过2M的错误，另外在wepy开发小程序时，打...

基于gulp自动化打包流程

weixin_34348174的博客

04-04

2466

背景：为什么要搞自动化呢？因为项目上测试环境的时候，频繁打包，有时候如果bug等级高的话，就算是改一处代码也要打包一版，打完包把svn上原来的项目删除，再把新的包上传到svn，这个步骤太繁琐了，如果项目大的话，打包的时间还长，等的很焦急啊，我这么懒的一个人，少等一下是一下，能少写一行代码绝不多写一行，so看到同事用，自己也去学习了一下，之前一直觉得可能比较难，可是写完之后真的就是炒鸡简单又好用呀...

Gulp-2022 项目搭建与使用指南

gitblog_00288的博客

09-09

990

Gulp-2022 项目搭建与使用指南一、项目目录结构及介绍本项目基于 Gulp, Webpack, 和 ESBuild-Loader 进行前端构建，确保了高效且灵活的开发流程。以下是其主要的目录结构及其简介： .gitignore: 忽略不需要提交到版本控制系统的文件。 editorconfig: 确保代码风格一致性的配置文件。 prettierrc: Prettier 的配置文件，用于自...

gulp 打包 _ 最新 - 完整版

Mr.小灰狼_随笔

08-05

4904

2021年 8 月份更新版 , 使用建议观看目录 1. 认识 gulp 2. gulp打包项目的工作流程 3. gulp 使用前的准备工作 4.gulp第三方包的常用方法: 5. 配置打包任务 1.配置打包css的任务 2.配置打包 sass的任务最新版打包 sass 任务总结 : 3.配置打包 js 的任务打包 js任务总结 : 1. 认识 gulp +是一个前端打包工具 +打包 : => 代码转码压缩混淆 +gulp的...

gulp构建项目（一）：环境准备及项目基础结构搭建

猿始森林

11-30

4498

一、创建package.json文件 npm init // 一路回车就行（默认已安装node） package.json内容如下: { &amp;amp;quot;name&amp;amp;quot;: &amp;amp;quot;gulp-project&amp;amp;quot;, &amp;amp;quot;version&amp;amp;quot;: &a

利用gulp打包------解决ES6代码打包出错问题

wiki_Wei的博客

05-16

4364

利用gulp打包------解决ES6代码打包出错问题在项目中使用gulp对源码及项目进行压缩和打包是很常见的做法，但是实际中可能会遇见uglify执行出错的问题，本文只针对由于项目中使用ES6语法而造成uglify失败的问题。解决这个问题主要是借助于babel。直接上操作流程。 1、全局安装babel。使用命令npminstall...