一款基于Node.js的前端开发辅助工具，该工具集成
一款基于Node.js的前端自动化构建工具，该工具集成了本地开发服务器，减少开发过程中不必要的重复工作，如批量查找替换公共部分；解决使用Ruby编译sass时中文路径报错，使用Koala有时不会自动编译等问题。
内置webpack-dev-server服务器，支持实时监听文件，文件被修改时会自动编译，并刷新浏览器 支持本地静态文件预览，内置本地开发调试服务器，以及当前目录浏览 sass预处理器，自动压缩优化css文件 自动给css样式添加相应的浏览器前缀 可设置自动生成base64编码，减小对服务器请求 自动生成css精灵图，一键合并多张小图，并更新background-position属性值。减少在开发时使用PS等工具对图片进行排列，测量计算位置 使用uglifyjs对js混淆压缩 模块化开发，分离公共部分，实现如后端语言般将例如头部尾部公共部分分离 动态加载html模块 html/js文件格式化 html/css代码质量检查 html保存快照截图基于版本：
Node.js 10.7.0 webpack-cli@3.1.0 webpack@4.16.3 webpack-dev-server@3.1.5 一、安装首先需要安装node.js
1、全局安装webpack、webpack-cli、webpack-dev-server，如不需要自动刷新（即运行guilin server命令），这步可以省略。命令：
npm install -g webpack npm install -g webpack-dev-server npm install -g webpack-cli 安装方法1：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。
安装方法2：安装在其他位置，例如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、网站不提供资料下载，如需下载请到原作者页面进行下载。
