每天推荐一个 GitHub 优质开源项目和一篇精选英文科技或编程文章原文,欢迎关注开源日报。交流QQ群:202790710;微博:https://weibo.com/openingsource;电报群 https://t.me/OpeningSourceOrg

2018年7月27日:开源日报第141期

今日推荐开源项目:《一次收工一本万利 Taro》传送门:GitHub链接

推荐理由:这个项目当然不是泰罗奥特曼,而是一个使用 React 开发方式的多端统一的开发框架。简而言之,就是你可以只编写一份代码,比如说写一份 HTML5 的代码,然后它能帮你转换成微信小程序的代码丢过去接着用,之后还会支持更多平台,可以期待今后使用它的便利性。

2018年7月27日:开源日报第141期

今日推荐英文原文:《Pug.js to make your life easier with HTML templates》作者:Uday Hiwarale

原文链接:https://itnext.io/pug-js-to-make-your-life-easier-with-html-templates-9c62273626e0

推荐理由:介绍了一个 HTML 模版引擎 Pug.js ,有很多应用程序需要在服务器或浏览器上生成 HTML 代码,而它很适合做这样的工作。

Pug.js to make your life easier with HTML templates

Pug.js is a HTML templating engine, which means you can write much simpler Pug code, which Pug compiler will compile into HTML code, that browser can understand. But why not write HTML code in the first place?

Pug has powerful features like conditions, loops, includes, mixins using which we can render HTML code based on user input or reference data. Pug also support JavaScript natively, hence using JavaScript expressions, we can format HTML code.

An application of that would be Email Templates to send email customized to particular user. We can make an email template using Pug with variables that can be changed based on user to whom we are sending that email. Before sending email,we can compile Pug to HTML code with user data to fill the gaps where that dynamic information should go. Trust me, this will save you lot of time.

There are lot of applications where HTML code needs to be generated on server or browser and Pug fits perfectly for those kind of environments. So let’s get started.

Pug.js, as from its name is a JavaScript library. Hence, we can run it inside browser or on node.js. Here, I am using node.js to demonstrate few examples.

Pug provides two npm packages viz.pug and pug-cli. pug is a general purpose package and pug-cli are command line interface to compile pug code into HTML code from command line without writing any JavaScript code. I am going to start with pug-cli because this is very easy to do.

Hence, let’s install pug-cli package with command npm install -g pug-cli, -g because we need to install it globally as to access Pug commands from command prompt or terminal. Pug files ends with extension .pug and compiles to files with extension .html

If you have index.pug file in a folder, you can open terminal there and execute command pug index.pug which should compile index.pug into index.html file. If you have a separate folder for all .pug files, let’s say src then you should use pug src command which should place all compiled .html files in the same folder. I like all compiled files to be located in separate folder, like dist. Hence I used pug src --pretty --out dist command. You can visit repo page on GitHub at https://github.com/pugjs/pug-cli to know more about pug CLI command flags.

Let’s see how pug code looks like.

As you can see from above, for the beginner it doesn’t make any sense. But give me a chance to walk you through it. doctype html is a syntax which Pug compiles to <!DOCTYPE html> and html, head and body are regular tags which compiled to <html></html>, <head></head> and <body></body>. Like python, Pug uses tabs to make code blocks. Hence as head and body tags are inside html tabbed block, they will be included in html tag, while head and body will be siblings. Please read the code and comments carefully from here on, because most of the stuff is explained inside the code itself in form of comments.

When you will compile above code, it will look like

Take few moments to understand how it happened, because after this, everything is pretty simple.

HTML code is mostly about tags, attributes and text. Hence Pug mostly focuses on that, making is injectable with dynamic data. Let’s see how tags and text works. Pug uses same HTML tags so no worry there.

Writing attributes in Pug can be little bit tricky. But I am sure, it won’t be too hard to understand after reading comments.

From here on, I am formatting the code little bit so that you can compare Pug code with HTML.

The powerful thing about Pug is inline JavaScript code. This is where dynamic data comes from. Binding this dynamic data to HTML can be tricky using custom approach, but with Pug, it’s kind of no brainier.

If you are familiar with Angular or React, then this must not make you crazy.

You mostly won’t hardcode data in the Pug code. This data is mostly dynamic and can come from any source, like SQL Database or REST api. We will learn about how to inject data into Pug template in upcoming topic once we are done with all features of Pug.

If you are used to PHP, then you must know that we can include other PHP files into the code. Pug also support including code from other Pug and non Pug files.

If you are wondering what if I need to use same piece of code over and over again, then don’t worry. If you are familiar with SASS, then you must know about mixin. Pug also provide similar kind of feature to add code re-usability in your program. Mixin in Pug is wrapper or functional wrapper around a block of Pug code.

You probably want to define mixins in separate file and include them in the file when needed to make them truly resuable.


So far we have seen inline JavaScript code, but trust me, you will be hardy using it. Instead, your data can come from any source and can be dynamic in nature. Hence, while running an application, for example, an email server, you want to get compiled email code with user data hard-coded when some event fires so that you could send that email to the user. Here, pug-cli can not help you. You need to use pug package to compile Pug code into HTML on the fly.

But compilation is CPU and Memory intensive. Is it really wise to compile a template 1000 times per minute for 1000 email send requests of 1000 users? Don’t worry, Pug fixes that by caching the template.

This is much well explained at https://pugjs.org/api/getting-started.html


So far, we have explored many things in Pug and hopefully you are now comfortable to work with it. But there are many things to explore in Pug.js, hence you should check out their official documentation on https://pugjs.org


每天推荐一个 GitHub 优质开源项目和一篇精选英文科技或编程文章原文,欢迎关注开源日报。交流QQ群:202790710;微博:https://weibo.com/openingsource;电报群 https://t.me/OpeningSourceOrg