-
Notifications
You must be signed in to change notification settings - Fork 7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
使用posthtml实现html和css模块化 #6
Comments
看不懂这样子写有什么便利,你还不如直接使用SSI |
@kujian 这个不用服务端支持,定义好组件结构和样式依赖,打包完的样式是最精简的。不用结构和样式都分别 |
Open
可以同时对多个html打包了。不指定html文件名,指定某个文件夹吗? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
上两篇文章介绍了postcss,这篇文章介绍下posthtml,这东西还比较新,但是有些东西已经可以用起来了。
在这之前模块化我都是用slim+scss来做的,现在换posthtml,来看看差别在哪里。
我们的目录结构如下
component
下放了所有组件,把html和css放一起,button.html
代码button.css
代码box.html
代码box.css
代码�index.html
代码代码里面可以看到
include
和css
指令,我们需要装一些插件来转换。首先安装node,npm在命令行输入
在根目录下新建一个
posthtml.js
文件,内容如下由于
posthtml-include
插件还没有gulp版本,所有我们先用node命令来执行,在命令行输入接着会在根目录生成
output.html
文件,内容如下node已经帮我们把多个html文件合并起来了。
然后在根目录新建一个
gulpfile.js
文件,内容如下在命令行输入
gulp posthtml
,gulp会在dest目录下生成两个文件output.html
代码style.css
代码gulp帮我们把用
<css>
引入的语句去掉,并打包成一个样式文件。有了这两个插件,我们开发的时候只要定义好组件的结构和样式,需要用到的时候
<include>
进来就好了,最终都会打成一个文件,确实方便了好多。The text was updated successfully, but these errors were encountered: