CoffeeScript利用Harp火速支付前端页面

高速入门

咱俩应用harp来开头化一个连串。

image.png

jade后缀的公文是html的一种模板引擎,能够加速html的支付,当然大家也得以行使ejs模板引擎,只供给修改文件后缀为ejs即可。
less后缀的文书是css的预处理文件,加快css的支付。当然也得以是选择sass进行付出。

小编觉得ejs人刚入门的人看起来会更舒心一些,所以本人将文件后缀都该为ejs结尾。

安装Harp

先是,你要安装NodeJS,NodeJs在国内的下载速度还算能够,使用Harp并不要求对Node掌握多少,简单的用法,能用npm就行了。

安装完Node以后。

  1. 在OSX或Linux系统上命令行中输入。

sudo npm install -g harp

image.png

  1. 在windows系统中,点击左下角的开端菜单,在寻觅框中输入cmd,打开cmd界面。

npm install -g harp

Windows的命令行界面是以>标记进步输入。

注意:在输入npm命令从前,请配置环境变量,将node.exe可执行程序的门路添加到系统变量PATH中去,本文附录中有啥安顿Windows环境变量。

设置完harp之后在命令行输入harp,会有如下指示。即会油然则生内容。

image.png

附录

假定你正在利用预处理器来写 HTML,CSS,只怕 JavaScript,Harp
将会使您的品类非凡的简短。Harp 帮忙
Markdown
EJS
Jade
LESS
Sass
Stylus
以及
CoffeeScript

运行

  1. 在命令行情势下实行,能够看来运营了本地服务器,端口为柒仟.

harp server

image.png

  1. 查阅我们编辑的文件内容,在浏览器中输入
    http://localhost:9000/。查看效果,纵然大家并不曾编写制定html和css文件,可是却像编写了html和css一样。

当我们修改ejs文件和less文件的时候,再次刷新浏览器,修改就见效了,可以立时查看大家做的改动。

image.png

总结

那篇小说,力争让不懂命令行,不懂node,不懂html模板引擎,不懂sass和less的人看懂。写的略微有个别啰嗦。然则期望能达到效果,能够让刚初阶读书的小白赶快入门。

生成html和css

实际上浏览器只好解析html和css文件,我们写的不是html和css咋做呢?
这么些时候,只要求我们编写翻译一下协调写的文本就好了。

  1. 刚起首时大家的文件内容

始发时文件内容

  1. 在命令行中输入,能够看看我们写的文书都被编写翻译成html和css文件

harp compile

image.png

  1. 到时候,大家只需求把www目录下的剧情拿去用就好了。间接把www目录下的始末放到服务器大概供后端职员运用。

任何的有关harp的高等级用法,请参见Harp文档。

编辑less文件

less是css的扩张,能够定义变量,能够继承别的的css样式等,也是十二分无敌。

编辑less文件

有了node今后,像gulp,grunt等一些工具得以给大家的前端开发带来一点都不小的便宜,然而gulp和grunt对于刚先生上学前端的人来说多少难度,大家就使用Harp,harp使用起来十分简单,不过意义却基本满意咱们的页面开发须求。

编辑ejs文件

layout.ejs文件内容

<%- yield %>等ejs的标签,能够查看ejs文书档案进参考。

index.ejs文件内容