构建前端静态页面：HTML-MIX
最近的一个web项目，我又开始做前端的老本行切图，写惯了react、vue，习惯了组件化的开发习惯，我发现切图的公用部分无法自动分离，客户的需求经常改动我就要一个一个页面的改动，查了很多的前端工具，有的要安装glup，有的用到了ejs，就是个小功能不想装这么多的插件，我就用node做了一个，本人原创项目希望大家多多使用。
安装
使用 npm:
$ npm install html-mix -g
创建文件夹html-mix
$ mkdir html-mix
进入文件夹
$ cd html-mix
创建文件夹src、public、build
$ mkdir src,public,build
目录结构
src //原始html目录 public //通用html目录 build //生成文件目录
例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <body> @include(header.html)@ <div class="main"> </div> @include(footer.html)@ </body> </html>
执行合并
$ mix start
效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <body> <!-- head start --> <header class="head"> 头部 </header> <!-- head end --> <div class="main"> </div> <!-- foot start --> <footer> 底部 </footer> <!-- foot end --> </body> </html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦