在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
前端自动化构建工具一款基于Node.js的前端自动化构建工具,该工具集成了本地开发服务器,减少开发过程中不必要的重复工作,如批量查找替换公共部分;解决使用Ruby编译sass时中文路径报错,使用Koala有时不会自动编译等问题。
基于版本:
一、安装首先需要安装node.js 1、全局安装webpack、webpack-cli、webpack-dev-server,如不需要自动刷新(即运行guilin server命令),这步可以省略。命令:
安装方法1:1.2、将文件夹 1.3、最重要的一点:将目录下的 以上安装可参内容中的图片1.jpg。 安装方法2:安装在其他位置,例如clone下来的文件位置 目录下包含了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 3、guilin server 4、guilin watch 5、guilin sprites 6、guilin stylelint 7、guilin htmlhint 8、guilin help 三、配置说明
四、模块化开发对于一个页面,除自身的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 |
请发表评论