一款基于Node.js的前端自动化构建工具,该工具集成了本地开发服务器,减少开发过程中不必要的重复工作,如批量查找替换公共部分;解决使用Ruby编译sass时中文路径报错,使用Koala有时不会自动编译等问题。
基于版本:
首先需要安装node.js
1、全局安装webpack、webpack-cli、webpack-dev-server,如不需要自动刷新(即运行guilin server命令),这步可以省略。命令:
1.2、将文件夹guilin
复制到以下路径C:\Users\当前用户名\AppData\Roaming\npm\node_modules
,
然后进入C:\Users\当前用户名\AppData\Roaming\npm\node_modules\guilin
目录,执行npm install
命令安装依懒。
1.3、最重要的一点:将目录下的guilin.cmd
复制到以下目录C:\Users\当前用户名\AppData\Roaming\npm
,才能使用下面的所有命令。
以上安装可参内容中的图片1.jpg。
安装在其他位置,例如clone下来的文件位置D:\Automated-build-tools-for-front-end
;
2.2、进入D:\Automated-build-tools-for-front-end\guilin
, 执行npm install
命令安装依懒。
2.3、添加系统环境变量,添加D:\Automated-build-tools-for-front-end\guilin
安装方法2可参考图2.jpg
目录下包含了static文件夹,guilin init初始化时会将目录下的文件复制到当前项目目录,因此可以将一些常用的脚本样式图片等放到对应的目录去,初始化时就不用再次复制了。
在适合的地方新建文件夹,例如my-project。然后在此目录下执行项目初始化命令:
1、guilin init 这条命令会在项目目录在创建基本目录结构:
my-project
-- build 打包发布后的目录
--src 发开源文件目录
--css
--images
--js
--sass
--model 存放公共模块,如header.html
--sprites 需要合并的icon小图标放置目录
--webpack webpack配置相关文件,如不需要自动刷新可删除
-- package.json 项目配置信息
2、guilin build
简写为guilin b
此命令可将src下的文件编译并复制到指定目录下如build。
3、guilin server
简写为 guilin s
启动服务,执行后可在浏览器输入 http://localhost:8080 查看页面,修改了源文件会自动刷新页面。
4、guilin watch
简写为 guilin w
开启监听命令,类似于server,不同的在于它不会启动http服务。
5、guilin sprites
简写为 guilin cs
合并小图片命令,将指定目录下的所有小图片合并为sprites.png并精准计算其对应的background-position位置。
6、guilin stylelint
简写为 guilin sl
src/sass/*.scss进行检查,主要检查一些拼写错误
7、guilin htmlhint
简写为 guilin hl
对html文件进行质量检查,并可保存页面快照截图
8、guilin help
简写为 guilin h
输出帮助信息
对于一个页面,除自身的html模板,样式和脚本外,同时还包括如header,footer等公共的部分,要使用一个公共header,只需在页面引用模块html即可, 如model下新建header.html。内容为:
<div class="header">这是公共头部</div>
在src下新建index.html,内容为:
<body>
<!-- include href="header.html" -->
<p>这里是当前页面内容</p>
</body>
如果已经开启了server或是watch命令,此时build目录下会生成index.html文件,内容为:即已把头部内容包括进来了
<body>
<div class="header">这里是公共头部</div>
<p>这里是当前页面内容</p>
</body>
很多时候header.html也是需要针对不同的页面有一些小改变,例如菜单导航显示当前位置。加载动态时只需要传参数即可,然后在公共模板如header.html里接收参数,并作相应的处理,它需要一个url将参数传过去。引入动态模板如
<!-- include href="header.html?a=1" -->
然后在header.html里接收参数a。 这里有个特殊的地方,因为是url访问,header.html需要一个完整的html页面结构,即包括html,head,body这些标签,否则访问到的有可能是乱码,因此带有参数访问时,只会返回header.html里面id=page”的内容,其它的不会被返回
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body id="page">
<div class="header">header</div>
</body>
</html>
1、打包下载360会提示有木马,可能是因为使用了NodeJS的fs文件系统。因为要对文件进行复制粘贴修改等,请放心使用;
2、使用过程有疑问请留言,https://github.com/337547038/Automated-build-tools-for-front-end
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型