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

wocacaca
wocacaca 发布于 2016-06-09 20:48:17 浏览:3345 类型:原创 - 随笔 分类:开发调试 - 我的工具 二维码: 作者原创 版权保护
嗯,怎么说呢,本来呢是有一直用我们公司一个大神写的一个工具的,后来因为买了mac那个工具由于使用 NW 做的界面等原因,无法兼容os系统,刚好前段时间有空,就自己动手做了一个构建工具。
    当然咯,有了工具当然希望大家来用用看嘛,顺便找找bug神马的。然后呢,我已经做成npm包了,有兴趣的可以去用用看啦。关于用法和功能,我相信在 readme 里都写的很清楚啦~~
    嗯,就这样。。。

    地址: https://www.npmjs.com/package/ms-point
接下来我来简单介绍一下用法:

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

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


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

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


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

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


有三个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 lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试</title>
	<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
	<!--#include virtual="_header.shtml" -->
		<div class="index">
			这里是index内容
		</div>
	<!--#include virtual="_footer.shtml" -->
</body>
</html>


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

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


输入3000端口号

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


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

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


点击 index.shtml

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


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

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

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

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


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

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


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

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

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


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

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


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

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


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

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


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

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


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

ps: 当然,我不是大神,只是觉得造轮子还是有助于提高自己能力的,代码神马的有bug或者不成熟的地方也欢迎吐槽。。
z
给个赞 3 人点赞
收藏 5 人收藏
评论 已有 13 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
jayjjxxx
jayjjxxx2016-06-10 20:29:3612F
前端自动化的工具好多好多,我之前把Express的views干掉了,自己组了一小套,加上gulp去打包编译,现在感觉挺爽的;
但我感觉你这个还有很多需要完善的,比如head、bottom模板里怎么绑定数据,是ajax加载还是在response里完成,这些都是问题;
如果说自动化构建工具的话,还要处理前端模块或组件的加载合并,静态资源的缓存,图片的优化等,路还很远啊!
举报 支持 (2) 回复 (1)
最新评论
wocacaca
wocacaca2016-06-11 15:08:5513F
现在都是在response里完成..写着玩啦,自己先用用,有时间会慢慢完善的,谢谢 //@jayjjxxx:前端自动化的工具好多好多,我之前把Express的views干掉了,自己组了一小套,加上gulp去打包编译,现在感觉挺爽的;
但我感觉你这个还有很多需要完善的,比如head、bottom模板里怎么绑定数据,是ajax加载还是在response里完成,这些都是问题;
如果说自动化构建工具的话,还要处理前端模块或组件的加载合并,静态资源的缓存,图片的优化等,路还很远啊!
举报 支持 (0) 回复 (0)
jayjjxxx
jayjjxxx2016-06-10 20:29:3612F
前端自动化的工具好多好多,我之前把Express的views干掉了,自己组了一小套,加上gulp去打包编译,现在感觉挺爽的;
但我感觉你这个还有很多需要完善的,比如head、bottom模板里怎么绑定数据,是ajax加载还是在response里完成,这些都是问题;
如果说自动化构建工具的话,还要处理前端模块或组件的加载合并,静态资源的缓存,图片的优化等,路还很远啊!
举报 支持 (2) 回复 (1)
张国旺
张国旺2016-06-10 13:09:1011F
你说的功能就是模板。把网页分割成很多版块和导航条。其中每一块都是一个模版。而且没有必要这么麻烦。还需要安装。
这个不是前端工具,这是后台工具。用这个工具,后台也就完成了。而前端还是需要单独写。写完了之后再分割放入模版 //@wocacaca:怎么说呢,代码还是要的,只是说这边保存玩了,网页会自动刷新,不用去按f5,然后比如一个统一的网站,头统一的导航头部和底部的,用这个工具就可以用include语法,这样如果头部底部有修改的话,我只要修改include文件就好了,不用去一个一个html的头部和底部去修改,还有就是scss编译,不用再专门去开一个编译工具,同时开启服务器的话,如果是h5页面也可以直接用手机通过电脑ip来访问。当然对于标签,样式还是需要的,我只是不明白,为什么你会觉得只适合做后台,我切了好多页面都可以基于这个呀,对于我来说确实是方便了开发的。 //@张国旺:开发后台省事,这个主要目的是套后台方便。开发前端吗?说说看,标签还要不要码,样式要不要打。这些还是要手工写吧。 //@wocacaca:不呀,只是一个开发 工具,让我们开发的时候能够方便快捷一些而已,和模板神马的倒是没啥关系。因为原先用惯了类似的工具,突然用不了了比较不习惯,就打算自己做一个。。。话说我也是闲着无聊,蛮推荐一下啦,我知道没什么人会感兴趣的,总之谢谢关注了 //@张国旺:这是一个模板管理后台。和前端没有太大的关系。前端还是要先做好,再开始写模板。 //@wocacaca:具体用法,我已经添加啦,谢谢关注~~~ //@张国旺:谢谢 //@wocacaca:其实并没有超出啦,我一会把用法写上,大家就会看懂了 //@张国旺:太专业了,已经超出了前端了。前端人员除了JS,会别的语言的太少了。好多专业名词。和听天书一样。 //@wocacaca:哦,这样的,其实我又在 npm readme里写的, 具体就是 开发的时候会自动启动express服务器,如果是有使用 scss编译的话,可以事实的在线预览,同时支持 ssi 语法 还有就是livereload刷新。 //@张国旺:你这需要安装,太麻烦,能说说它带的好处,优点在哪吗?给几张功能图片,图片介绍说明一下产品的特点,让我们了解一下,这究竟是什么东东。
举报 支持 (0) 回复 (0)
wocacaca
wocacaca2016-06-10 12:48:3010F
怎么说呢,代码还是要的,只是说这边保存玩了,网页会自动刷新,不用去按f5,然后比如一个统一的网站,头统一的导航头部和底部的,用这个工具就可以用include语法,这样如果头部底部有修改的话,我只要修改include文件就好了,不用去一个一个html的头部和底部去修改,还有就是scss编译,不用再专门去开一个编译工具,同时开启服务器的话,如果是h5页面也可以直接用手机通过电脑ip来访问。当然对于标签,样式还是需要的,我只是不明白,为什么你会觉得只适合做后台,我切了好多页面都可以基于这个呀,对于我来说确实是方便了开发的。 //@张国旺:开发后台省事,这个主要目的是套后台方便。开发前端吗?说说看,标签还要不要码,样式要不要打。这些还是要手工写吧。 //@wocacaca:不呀,只是一个开发 工具,让我们开发的时候能够方便快捷一些而已,和模板神马的倒是没啥关系。因为原先用惯了类似的工具,突然用不了了比较不习惯,就打算自己做一个。。。话说我也是闲着无聊,蛮推荐一下啦,我知道没什么人会感兴趣的,总之谢谢关注了 //@张国旺:这是一个模板管理后台。和前端没有太大的关系。前端还是要先做好,再开始写模板。 //@wocacaca:具体用法,我已经添加啦,谢谢关注~~~ //@张国旺:谢谢 //@wocacaca:其实并没有超出啦,我一会把用法写上,大家就会看懂了 //@张国旺:太专业了,已经超出了前端了。前端人员除了JS,会别的语言的太少了。好多专业名词。和听天书一样。 //@wocacaca:哦,这样的,其实我又在 npm readme里写的, 具体就是 开发的时候会自动启动express服务器,如果是有使用 scss编译的话,可以事实的在线预览,同时支持 ssi 语法 还有就是livereload刷新。 //@张国旺:你这需要安装,太麻烦,能说说它带的好处,优点在哪吗?给几张功能图片,图片介绍说明一下产品的特点,让我们了解一下,这究竟是什么东东。
举报 支持 (0) 回复 (1)
张国旺
张国旺2016-06-10 11:28:469F
开发后台省事,这个主要目的是套后台方便。开发前端吗?说说看,标签还要不要码,样式要不要打。这些还是要手工写吧。 //@wocacaca:不呀,只是一个开发 工具,让我们开发的时候能够方便快捷一些而已,和模板神马的倒是没啥关系。因为原先用惯了类似的工具,突然用不了了比较不习惯,就打算自己做一个。。。话说我也是闲着无聊,蛮推荐一下啦,我知道没什么人会感兴趣的,总之谢谢关注了 //@张国旺:这是一个模板管理后台。和前端没有太大的关系。前端还是要先做好,再开始写模板。 //@wocacaca:具体用法,我已经添加啦,谢谢关注~~~ //@张国旺:谢谢 //@wocacaca:其实并没有超出啦,我一会把用法写上,大家就会看懂了 //@张国旺:太专业了,已经超出了前端了。前端人员除了JS,会别的语言的太少了。好多专业名词。和听天书一样。 //@wocacaca:哦,这样的,其实我又在 npm readme里写的, 具体就是 开发的时候会自动启动express服务器,如果是有使用 scss编译的话,可以事实的在线预览,同时支持 ssi 语法 还有就是livereload刷新。 //@张国旺:你这需要安装,太麻烦,能说说它带的好处,优点在哪吗?给几张功能图片,图片介绍说明一下产品的特点,让我们了解一下,这究竟是什么东东。
举报 支持 (0) 回复 (1)
wocacaca
wocacaca2016-06-10 11:12:068F
不呀,只是一个开发 工具,让我们开发的时候能够方便快捷一些而已,和模板神马的倒是没啥关系。因为原先用惯了类似的工具,突然用不了了比较不习惯,就打算自己做一个。。。话说我也是闲着无聊,蛮推荐一下啦,我知道没什么人会感兴趣的,总之谢谢关注了 //@张国旺:这是一个模板管理后台。和前端没有太大的关系。前端还是要先做好,再开始写模板。 //@wocacaca:具体用法,我已经添加啦,谢谢关注~~~ //@张国旺:谢谢 //@wocacaca:其实并没有超出啦,我一会把用法写上,大家就会看懂了 //@张国旺:太专业了,已经超出了前端了。前端人员除了JS,会别的语言的太少了。好多专业名词。和听天书一样。 //@wocacaca:哦,这样的,其实我又在 npm readme里写的, 具体就是 开发的时候会自动启动express服务器,如果是有使用 scss编译的话,可以事实的在线预览,同时支持 ssi 语法 还有就是livereload刷新。 //@张国旺:你这需要安装,太麻烦,能说说它带的好处,优点在哪吗?给几张功能图片,图片介绍说明一下产品的特点,让我们了解一下,这究竟是什么东东。
举报 支持 (0) 回复 (1)
张国旺
张国旺2016-06-09 23:07:107F
这是一个模板管理后台。和前端没有太大的关系。前端还是要先做好,再开始写模板。 //@wocacaca:具体用法,我已经添加啦,谢谢关注~~~ //@张国旺:谢谢 //@wocacaca:其实并没有超出啦,我一会把用法写上,大家就会看懂了 //@张国旺:太专业了,已经超出了前端了。前端人员除了JS,会别的语言的太少了。好多专业名词。和听天书一样。 //@wocacaca:哦,这样的,其实我又在 npm readme里写的, 具体就是 开发的时候会自动启动express服务器,如果是有使用 scss编译的话,可以事实的在线预览,同时支持 ssi 语法 还有就是livereload刷新。 //@张国旺:你这需要安装,太麻烦,能说说它带的好处,优点在哪吗?给几张功能图片,图片介绍说明一下产品的特点,让我们了解一下,这究竟是什么东东。
举报 支持 (0) 回复 (1)
wocacaca
wocacaca2016-06-09 21:54:546F
具体用法,我已经添加啦,谢谢关注~~~ //@张国旺:谢谢 //@wocacaca:其实并没有超出啦,我一会把用法写上,大家就会看懂了 //@张国旺:太专业了,已经超出了前端了。前端人员除了JS,会别的语言的太少了。好多专业名词。和听天书一样。 //@wocacaca:哦,这样的,其实我又在 npm readme里写的, 具体就是 开发的时候会自动启动express服务器,如果是有使用 scss编译的话,可以事实的在线预览,同时支持 ssi 语法 还有就是livereload刷新。 //@张国旺:你这需要安装,太麻烦,能说说它带的好处,优点在哪吗?给几张功能图片,图片介绍说明一下产品的特点,让我们了解一下,这究竟是什么东东。
举报 支持 (0) 回复 (1)
张国旺
张国旺2016-06-09 21:18:515F
谢谢 //@wocacaca:其实并没有超出啦,我一会把用法写上,大家就会看懂了 //@张国旺:太专业了,已经超出了前端了。前端人员除了JS,会别的语言的太少了。好多专业名词。和听天书一样。 //@wocacaca:哦,这样的,其实我又在 npm readme里写的, 具体就是 开发的时候会自动启动express服务器,如果是有使用 scss编译的话,可以事实的在线预览,同时支持 ssi 语法 还有就是livereload刷新。 //@张国旺:你这需要安装,太麻烦,能说说它带的好处,优点在哪吗?给几张功能图片,图片介绍说明一下产品的特点,让我们了解一下,这究竟是什么东东。
举报 支持 (0) 回复 (1)
wocacaca
wocacaca2016-06-09 21:14:584F
其实并没有超出啦,我一会把用法写上,大家就会看懂了 //@张国旺:太专业了,已经超出了前端了。前端人员除了JS,会别的语言的太少了。好多专业名词。和听天书一样。 //@wocacaca:哦,这样的,其实我又在 npm readme里写的, 具体就是 开发的时候会自动启动express服务器,如果是有使用 scss编译的话,可以事实的在线预览,同时支持 ssi 语法 还有就是livereload刷新。 //@张国旺:你这需要安装,太麻烦,能说说它带的好处,优点在哪吗?给几张功能图片,图片介绍说明一下产品的特点,让我们了解一下,这究竟是什么东东。
举报 支持 (0) 回复 (1)
张国旺
张国旺2016-06-09 21:11:493F
太专业了,已经超出了前端了。前端人员除了JS,会别的语言的太少了。好多专业名词。和听天书一样。 //@wocacaca:哦,这样的,其实我又在 npm readme里写的, 具体就是 开发的时候会自动启动express服务器,如果是有使用 scss编译的话,可以事实的在线预览,同时支持 ssi 语法 还有就是livereload刷新。 //@张国旺:你这需要安装,太麻烦,能说说它带的好处,优点在哪吗?给几张功能图片,图片介绍说明一下产品的特点,让我们了解一下,这究竟是什么东东。
举报 支持 (0) 回复 (1)
wocacaca
wocacaca2016-06-09 21:08:372F
哦,这样的,其实我又在 npm readme里写的, 具体就是 开发的时候会自动启动express服务器,如果是有使用 scss编译的话,可以事实的在线预览,同时支持 ssi 语法 还有就是livereload刷新。 //@张国旺:你这需要安装,太麻烦,能说说它带的好处,优点在哪吗?给几张功能图片,图片介绍说明一下产品的特点,让我们了解一下,这究竟是什么东东。
举报 支持 (0) 回复 (1)
张国旺
张国旺2016-06-09 21:05:281F
你这需要安装,太麻烦,能说说它带的好处,优点在哪吗?给几张功能图片,图片介绍说明一下产品的特点,让我们了解一下,这究竟是什么东东。
举报 支持 (0) 回复 (1)
wocacaca wocacaca 作者

快闪开,我要帅炸了!

作者最新