gulp 打包多级目录结构

最新推荐文章于 2022-02-26 17:43:19 发布
最新推荐文章于 2022-02-26 17:43:19 发布
阅读量1.9k 收藏
点赞数
分类专栏： web 文章标签： gulp gulp-useref 打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39582021/article/details/90248950
版权

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

原理分析: https://blog.csdn.net/qq_39582021/article/details/90240256

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

1. 打包前目录结构:

 

2. 打包后 release 目录结构: 

 

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

 

xiaobo-921
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
gulp 打包 , 处理多级 html 目录问题
FN的博客
05-15 1716
多级目录结构图: https://blog.csdn.net/qq_39582021/article/details/90248950 html 存放在不同的目录中 , 该如何处理? , [b]起因[/b]: 我项目根目录只放了一个 index.html ,其他的 html 文件全部放在新建的 html 文件夹中 [b]经过[/b]: [code=javascript] var g...
使用gulp构建一个项目
湛庐无方
06-01 8630
gulp是前端开发过程中自动构建项目的工具，相同作用的还有grunt。构建工具依靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查、合并、重命名、压缩、格式化、浏览器自动刷新、部署文件等功能。 gulp是基于Nodejs的自动运行器，他借鉴了Unix操作系统的管道（pipe）思想，前一级的输出是后一级的输入。下面是具体流程：
gulp 保持任意目录结构复制文件
CloudJay的博客
09-21 426
直接上代码了,请根据自己的需要修改 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压缩图片
小圣贤君的博客
11-18 1万+
简介： 使用gulp-imagemin压缩图片文件（包括PNG、JPEG、GIF和SVG图片），很多人安装gulp-imagemin都会出现错误，我也查了很多资料，也不知道所以然，我的做法是出错再重新安装，如果你知道问题所在，请一定告诉我！ 1、安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件 本示例目录结构如下： 2、本地安
gulp打包（含第三方模块下载教学）
qq_45799465的博客
02-26 4227
目录 一、创建项目文件夹 二、项目文件夹初始化 三、 依赖包的下载 3.1 事前准备 3.2全局依赖包的下载 3.2.1 下载gulp全局依赖包 3.2.2 下载全局 node-sass依赖包 3.3 开发依赖包的下载 3.3.1 下载gulp开发依赖包 3.3.2 css文件打包压缩依赖包 3.3.3JavaScript文件 打包压缩需要的依赖包 3 3.3.4html文件打包压缩需要的依赖包 3.3.5sass文件 打包压缩需要的依赖包 ...
gulp的使用
jenyzhang的专栏
07-27 611
gulp：自动化构建工具 可以用来处理常见任务，如： 文件保存时自动重载浏览器使用预处理器如Sass、LESS优化资源，比如压缩CSS、JavaScript、压缩图片等等。 下面演示的是清除文件，以及压缩文件。 1. 清除文件 下面的代码可以实现清除test.js文件的任务。把下面的代码保存为gulpfile.js var clean = require('gulp
项目打包之gulp 打包工具
weixin_43314255的博客
03-11 899
我们在做项目的时候，往往一个项目将要上线的时候都涉及到项目打包，即使不是一个完整的项目。小型未完成的项目在上线的时候我们也可以进行打包，打包项目可以大大压缩我们的项目体积。 比如我们在写js和css代码的时候，为了美化好看，我们往往会进行缩进换行，一来好看，二来也是符合我们正常人的编程思维。项目打包就是把文件中多余的东西去掉，比如换行，空格之类的。大大压缩我们的代码体积，这是我们打包项目较大的意义之处了。 常见的打包工具有两种 gulp打包工具 webpack 打包工具 这里我们只介绍有关gulp工具相关
基于gulp自动化打包流程
weixin_34348174的博客
04-04 2423
背景： 为什么要搞自动化呢？因为项目上测试环境的时候，频繁打包，有时候如果bug等级高的话，就算是改一处代码也要打包一版，打完包把svn上原来的项目删除，再把新的包上传到svn，这个步骤太繁琐了，如果项目大的话，打包的时间还长，等的很焦急啊，我这么懒的一个人，少等一下是一下，能少写一行代码绝不多写一行，so看到同事用，自己也去学习了一下，之前一直觉得可能比较难，可是写完之后真的就是炒鸡简单又好用呀...
gulp 打包 _ 最新 - 完整版
Mr.小灰狼_随笔
08-05 4363
2021年 8 月份 更新版 , 使用建议观看 目录 1. 认识 gulp 2. gulp打包项目的工作流程 3. gulp 使用前的准备工作 4.gulp第三方包的常用方法: 5. 配置打包任务 1.配置打包css的任务 2.配置打包 sass的任务 最新版打包 sass 任务总结 : 3.配置打包 js 的任务 打包 js任务总结 : 1. 认识 gulp +是一个前端打包工具 +打包 : => 代码转码压缩混淆 +gulp的...
gulp打包全攻略
Mr-yang的随笔
07-01 3119
虽然文章很长，但内容绝不冗余~ 目录 gulp 的下载 第三方模块 完整代码 书写 gulp 打包的配置文件，需要按照 node 的 模块化 语法规则进行书写 gulp 的下载 如果你想使用 gulp 对你的项目进行打包 1. 需要安装一个全局工具 => 打开命令行, 目录无所谓 => 输入指令: $ npm install --global gulp => 作用: 在你的电脑内安装一个环境, 让你可以在命令行书写 gulp xxx 这样的指令 ...
web前端工程化工具_gulp的路径问题，路径通配符 ** * ，拷贝所有文件夹及其子文件夹下的文件，项目的所有文件
jiang7701037的博客
07-05 7320
一、关于gulp在使用时的路径问题：      我们在写gulp的任务时，有的人为了偷懒。或者为了快，想把目录下是所文件拷贝到服务器端的目录下。可以通配符 ** 和 *。注意，两个星号和一个星号都是通配符，不是敏感词汇的替换。       如：     gulp.task("copyfile",function(){     gulp.src(".\\**\\*").pipe(gulp.dest(...
gulp获取目录下所有符合条件文件路径并保存
灵魂画师牧码
07-21 5275
var through = require('through2'); var commands = []; // 获取路径并保存 gulp.task('getPaths', function () { return gulp.src('src/*.md') .pipe(through.obj(function (file, enc, callback) { this.pus...
gulp自动化打包（上）
热门推荐
j_bleach的博客
11-05 1万+
gulp自动化打包（上）文章概述本文分为上下两篇，上篇主要介绍一些常用的gulp插件（也是此次打包主要用的gulp插件），而下篇主要以一个demo项目为例，从本地checkout出合适的git版本，压缩、合并、到最后打成zip包，发送至指定目录，做一个全面的演示。
gulp实现静态资源压缩，打包，上传总结
konglei1996的博客
07-20 1万+
本文只是对gulp构建工具的一些常用功能的总结。 1.实现文件（css，js，image）压缩 2.实现文件合并 3.版本控制 引用插件如下：var gulp = require('gulp'), eslint = require('gulp-eslint'), minify = require('gulp-minify-css'),//css压缩 concat =
gulp.src复制整个文件夹或文件到指定目录（包括拷贝单个文件）
雾里看花叹朦胧
10-27 1万+
整个目录：gulp.task(‘copy’, function() { return gulp.src(‘src/*/‘) .pipe(gulp.dest(‘dist’)) }); gulp拷贝文件的时候如何保持路径?效果：保留static/jquery/路径信息，即拷贝后的文件路径是 dist/static/jquery/jquery.js1、在 gulp.src 加一个ba
用gulp打包发布项目
泠泠似水
03-08 1万+
在发布之前还可以做代码优化： 1.压缩 2.合并 3.增加版本号首先，手动打包发布的网站比如：https://javascript-minifier.com 显然，手动打包麻烦费时费力的，那自从node.js出来以后，方便快捷，自动化处理。打包的主流3个工具： 1.Grunt 自动化构建工具 2.gulp 自动化构建工具 3.webpack 静态资源打包工具这里主要先
gulp自动化构建工具之src, dist通配符*,**
u010869754的专栏
08-10 4608
* : 匹配该路径段中0个或多个任意字符  ** : 不仅可以匹配任何内容,但**不仅匹配路径中的某一段,而且可以匹配 'a/b/c' 这样带有'/'的内容,所以,它还可以匹配子文件夹下的文件 目录结构：app / src /  js  /a.js                     app / src /  js / b.js                    app / src
使用gulp打包
qq_35275077的博客
04-29 381
安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 更换镜像 //更换 npm config set registry "http://registry.npm.taobao.org/" //查看 npm config get registry 在项目下安装cnpm的node_modules ...
gulp打包js多个文件夹并压缩混淆，编译ES6语法，及多个import依赖由一个入口打包成一个cdn...
weixin_30430169的博客
05-24 1086
感觉和webpack的步骤差不多 首先安装gulp：参考上一篇 安装完之后 新建一个文件目录起名 在当前目录下打开cmd 执行：npm init 创建package.json文件 然后安装第一个插件gulp-uglify 执行： cnpm install gulp-uglify --save-dev （这里暂时都用淘宝镜像cnpm） 这时候已经可以开始压缩es5的j...
gulp打包报错ReferenceError: primordials is not defined
最新发布
10-10
这个错误通常是由于在使用较新版本的 Node.js 时，旧版本的 Gulp 包引起的兼容性问题。primordials 是在 Node.js 10 之前的版本中引入的一个内部模块，但在 Node.js 10 及以后的版本中被删除了。要解决这个问题，有两种方法可以尝试： 1. 升级 Gulp 版本：将 Gulp 升级到最新版本，这样它将与当前使用的 Node.js 版本兼容。 2. 安装 `util` 模块：在项目的根目录下的 package.json 文件中，添加以下内容： ```json "resolutions": { "graceful-fs": "^4.2.4" } ``` 然后运行以下命令来安装依赖项并重建包： ```shell npm install npm rebuild ``` 以上方法应该可以解决这个错误。如果仍然遇到问题，请提供更多信息，例如您使用的 Gulp 版本以及其他相关的错误消息。 **
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值