dist包编译html_gulp4 多页面项目管理打包(html, es6,less编译压缩版本控制)
1.如何使用
gulp4自动化构建工具,让所有变的简单起来,那么需要怎么使用呢?
官网入口 按照官网安装工具与依赖
2.项目结构
-- gulp4
-- gulpfile.babel.js
- index.js
- **其他配置项
-- node_modules
-- project 项目地址
- css
- js
- pages
- images
- .babelrc
- package-lock.json
- package.json
- webpack.config.js
3. 多页面配置
入口文件做最后处理
// gulpfile.babel.js -- index.js
import {
series,
parallel,
watch,
} from 'gulp';
import del from 'del';
// 本地服务同步刷新
import browser from 'browser-sync';
const browserSync = browser.create();
// 引入功能组件
import convertLess from './convert-less';
import convertJs from './convert-js';
import convertHtml from './convert-html';
import copyFile from './static-copy';
// 是否开发环境
let isDev = true;
// 开发项目类型
const devType = 'pc';
// 本地目录
const filePath = 'project/' + devType + '/';
// 生产目录
const distResourcesPath = 'dist/' + devType + '/assets/';
const distPagesPath = 'dist/' + devType + '/view/';
// 资源路径
const basePath = '../assets/';
// 删除css文件
export const delCssFile = () => {
return del([
distResourcesPath + 'css'
])
}
// 删除js文件
export const delJsFile = () => {
return del([
distResourcesPath + 'js'
])
}
// 删除资源文件夹
export const delStaticFile = () => {
return del([
distResourcesPath + 'images',
distResourcesPath + 'fonts',
])
}
// 导出任务
// 复制文件
export const copyStatic = cb => {
copyFile(filePath, distResourcesPath);
cb();
}
// 编译css
export const compileCss = series(delCssFile, cb => {
convertLess(filePath, distResourcesPath);
cb();
});
// 编译js
export const compileJs = series(delJsFile, cb => {
convertJs(filePath, distResourcesPath);
cb();
});
// 编译html
export const freshHtml = cb => {
convertHtml(filePath, distPagesPath, basePath);
cb();
};
// 监测文件变化
let watchFiles = () => {
browserSync.init({});
watch(filePath + 'css/**/*.less', {
delay: 500,
}, compileCss);
watch(filePath + 'js/**/*.js', {
delay: 500,
}, compileJs);
watch(filePath + 'pages/**', {
delay: 500,
}, freshHtml);
watch(filePath + 'mapjson/**/*.json', {
delay: 500,
}, freshHtml);
}
// 默认任务
exports.default = series(parallel(compileCss, compileJs), freshHtml, copyStatic, watchFiles);
不同任务可以提取出不同文件,例如less转译压缩功能convert-less.js, 代码如下:
/*
* @Author: ZLL
* @Date: 2020-01-18 18:18:52
* @Last Modified by: Liliang Zhu
* @Last Modified time: 2020-01-18 18:18:52
* 编译less
*/
// gulp模块
import {
src,
dest,
lastRun
} from 'gulp';
// less语法转译
import less from 'gulp-less';
// css添加前缀
import lessAutoperfix from 'less-plugin-autoprefix';
// 压缩css
import mixCss from 'gulp-clean-css';
// 仅编译改变的文件
import changed from 'gulp-changed';
// 重命名
import rename from 'gulp-rename';
// 生成版本号
import rev from 'gulp-rev';
// 本地服务同步刷新
import browser from 'browser-sync';
const browserSync = browser.create();
// css编译前缀
const autoprefix = new lessAutoperfix({
browsers: [
">0.25%",
"last 2 version",
]
});
let convertLess = (file, dist) => {
return src(file + 'css/*.less', {
since: lastRun(convertLess, 100)
})
.pipe(less({
plugins: [autoprefix]
// 生成前缀
}))
.pipe(mixCss({
keepSpecialComments: '*'
//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
}))
.pipe(rename(path => path.basename += '.min'))
.pipe(rev())
.pipe(dest(dist + 'css'))
.pipe(rev.manifest())
.pipe(dest(file + 'mapjson/css'))
.pipe(browserSync.reload({
stream: true
}));
}
export default convertLess;
在入口index.js中引入调用即可,
4. 全部gulp4代码
代码全部托管在github,项目忙碌,抽空写下博客,有问题可以直接留言
dist包编译html_gulp4 多页面项目管理打包(html, es6,less编译压缩版本控制)相关推荐
- 鸿蒙系统编译怎样收费的,深度解析鸿蒙系统的编译流程
1.准备工作 我的本地代码是基于最新发布的OpenHarmony 1.1.0 LTS(2021-04-01)版本抓取的,代码根目录OHOS1_1_0LTS: $repo init -u https:/ ...
- nginx部署dist包
第一步:下载nginx压缩包 在这里可以去nginx官网下载->点我下载nginx 也可以直接使用wget命令下载,指令如下所示(请根据自己的需求进行下载) wget -c https://ng ...
- 使用 go 服务启动前端dist包
一般的前后端分离,都是前端部署一份,后端部署一份.对于小型的项目,可以将两个合在一起打成一个exe启动,使用一个端口号.步骤如下: 一.构建出来前端的dist包 按照前端的打包流程输出dist包,基本 ...
- android+apk+反编译和再签名打包,Android:apk反编译步骤,打包、签名和逆向工程经验总结...
思路一.apktool1.通过apktool反编译出资源和smaliapktool d MobileManager.apkF:\Android\decompile\apktoolapktool d M ...
- 发布nuget包的正确姿势---cicd自动打包发布
最轻便的发布nuget包方式,方便cicd自动打包发布nuget包 首先新建项目 项目名随便取,这里就叫它GuiH.ClassLibrary 默认即可,需要改目标版本时,等创建好再改 项目创建好了 随 ...
- APK应用程序的解包、修改、编辑、打包及应用(三)
第一部分:apk应用介绍,解包和打包,常用软件 http://blog.csdn.net/kuangren_01/article/details/9318977 第二部分:三星闭源系统apk文件的处理 ...
- PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
在这里分享一些技巧和经验给大家.辛苦撰文分享,转载或引用请保留本文作者信息及文章链接. 作者的环境: win7+python3.5(anaconda3) 理论上,win7及以上的系统和python ...
- Android反编译apk修改版本号重新打包签名详细教程(超详细)
文章目录 一.反编译工具介绍 1:apktool 获取资源文件 2:dex2jar(源码文件获取) 3:jd-gui 查看APK中classes.dex转化成出的jar文件,即源码文件 二.apkto ...
- 【Flutter】从安卓与iOS包体优化到一键自动打包脚本的一条龙服务
系统信息 System version: MacOS 12 Flutter version: 1.22.5 Dart version: 2.10.4 Android Studio version: 4 ...
最新文章
- IO多路复用之epoll总结
- c#使用CefSharp开发winform——环境搭建
- Android系统中震动功能的测试
- python滚动条翻页爬取数据_[Selenium2+python2.7][Scrap]爬虫和selenium方式下拉滚动条获取简书作者目录并且生成Markdown格式目录...
- GBK/GBK2312字库寻址及使用原理
- Nutch 深入浅出
- 分辨率、像素、像素尺寸、GSD、图片文件大小
- 《数学之美》读书笔记
- Hologres性能调优
- MC34063在扩展后的降压应用
- mysql backup 使用_MySQLBackup 使用说明
- 【RL系列】马尔可夫决策过程——Gambler's Problem
- 校园网GiWiFi模拟登陆
- yahoo.cn邮箱foxmail收发攻略
- 风骚的操作:区块链监控个人账户即时在线充值
- 【技术类】【ArcGIS对国产卫星的支持2:高分一号卫星】篇1、ArcGIS RasterType Extension for Chinese Satellites 2.0插件介绍
- OneNote快捷键大全
- python3新式类_Python之新式类与经典类
- Android 10.0 自定义开机向导app
- google android o官方,谷歌中国发布:Android O首个开发者预览镜像下载
热门文章
- Daivik VM 和 JVM 的比较
- #includebits/stdc++.h包含C++的所有头文件
- kdd cup 2019
- 关于oracle的基础增删改查操作总结
- ${pageContext.request.contextPath}无效
- DllImport dll中有些啥函数 及 dll中是否用到了别的dll
- fastJson的使用
- [YY题]HDOJ5288 OO’s Sequence
- C02-程序设计基础提高班(C++)第9周上机任务-类和对象
- Oracle10g客户端远程连接数据库全过程[转]