为了方便开发,自己动手完成一个前端自动化构建工具

(没东西写,发布一个自己再w3cfuns发布的文章)  

原文地址

嗯,怎么说呢,本来呢是有一直用我们公司一个大神写的一个工具的,后来因为买了mac那个工具由于使用 NW 做的界面等原因,无法兼容os系统,刚好前段时间有空,就自己动手做了一个构建工具。
    当然咯,有了工具当然希望大家来用用看嘛,顺便找找bug神马的。然后呢,我已经做成npm包了,有兴趣的可以去用用看啦。关于用法和功能,我相信在 readme 里都写的很清楚啦~~
    嗯,就这样。。。

  地址: https://www.npmjs.com/package/ms-point

(新增ES6编译功能具体介绍请看NPM上readme介绍)
接下来我来简单介绍一下用法:

我在test目录下打开cmd命令(已全局安装ms-point)

m1.png
执行 msp init 此时会在目录下创建一个 wwwroot 文件夹(该文件夹用于存放你的项目文件),如果已经存在则会提示 已存在
  m2.png

接下来,在文件夹里创建几个文件如下图:

m3.png

有三个shtml文件分别为 _header.shtml , _footer.shtml  和 index.shtml 代码分别如下:

_header.shtml:

<div>这里是header内容<div>

_footer.shtml:

<div class="footer">
    这里是 footer 内容
</div>

index.shtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <link href="css/style.css" rel="stylesheet"/>
</head>
<body>
    <!--#include virtual="_header.shtml" -->
        <div>
            这里是index内容
        </div>
    <!--#include virtual="_footer.shtml" -->
</body>
</html>

此时我们在命令行里输入 msp start(该命令默认打开80端口,如果已被占用,则会弹出提示,输入端口号)

m4.png

输入3000端口号

m5.png

同时会自动打开默认浏览器如下图

m6.png

点击 index.shtml

m7.png

可以看到 此时的index 包含了 header和footer文件,这是简单的shtml文件 ssi的用法,当然在这个工具里用.html后缀也行

还有就是对于sass文件的预编译实时预览。有时候一些大的项目,或者使用rem来实现响应式的话,sass还是很必要的

此时 index.shtml 文件源码不变,在 css 目录下创建一个style.scss 文件来观察变化代码如下:

m8.png

此时保存文件后可以看到浏览器自动刷新样式如下:

m9.png

以上:包含功能为 sass 预编译 和 ssi 语法兼容(注意此时index文件里的css链接为<link href="css/style.css" rel="stylesheet"/> 无需将后缀名改成.scss!)

接下来是打包功能 执行 msp pack (这个功能有几个参数,可以查看readme里的介绍,具体就是选择打包时是否压缩 css 和js)

m10.jpg

打包后会在当前目录下生成 dist 文件夹,打包后的代码将在dist内

m11.png

进入dist可以看到原先后缀名为.shtml 的文件全部被重命名为 .html (开发的时候如果直接用的.html则不变)

m12.png

对比源码可以看出 打包后的index文件已经包含了原先 include到文件里的 header和footer的代码。

m13.jpg

同时原先的.scss文件也被改名为.css文件且编译过

m14.png

以上就是这个工具的功能和用法,如果有bug可以告诉我或者到github上通知我,如果有什么新功能需要添加的话,也请告知我,如果有必要的话,我会添加的

ps: 当然,我不是大神,只是觉得造轮子还是有助于提高自己能力的,代码神马的有bug或者不成熟的地方也欢迎吐槽。。

发表评论

电子邮件地址不会被公开。 必填项已用*标注