使用Harp快速开发前端页面

有了node以后，像gulp，grunt等一些工具可以给我们的前端开发带来很大的便利，但是gulp和grunt对于刚学习前端的人来说有些难度，我们就使用Harp，harp使用起来非常简单，但是功能却基本满足我们的页面开发需求。

如果你正在使用预处理器来写 HTML，CSS，或者 JavaScript，Harp 将会使你的项目出奇的简单。Harp 支持 Markdown， EJS， Jade， LESS， Sass， Stylus， 以及 CoffeeScript。

安装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

快速入门

我们使用harp来初始化一个项目。

image.png

jade后缀的文件是html的一种模板引擎，可以加快html的开发，当然我们也可以使用ejs模板引擎，只需要修改文件后缀为ejs即可。
less后缀的文件是css的预处理文件，加快css的开发。当然也可以是使用sass进行开发。

我觉得ejs人刚入门的人看起来会更舒服一些，所以我将文件后缀都该为ejs结尾。

编辑ejs文件

layout.ejs文件内容

<%- yield %>等ejs的标签，可以查看ejs文档进参考。

index.ejs文件内容

编辑less文件

less是css的扩展，可以定义变量，可以继承其它的css样式等，也是十分强大。

编辑less文件

运行

1. 在命令行模式下执行，可以看到启动了本地服务器，端口为9000.

harp server

image.png

1. 查看我们编写的文件内容，在浏览器中输入 http://localhost:9000/。查看效果，虽然我们并没有编写html和css文件，但是却像编写了html和css一样。

当我们修改ejs文件和less文件的时候，再次刷新浏览器，修改就生效了，可以立即查看我们做的修改。

image.png

生成html和css

实际浏览器只能解析html和css文件，我们写的不是html和css怎么办呢？
这个时候，只需要我们编译一下自己写的文件就好了。

1. 刚开始时我们的文件内容

初始时文件内容

1. 在命令行中输入,可以看到我们写的文件都被编译成html和css文件

harp compile

image.png

1. 到时候，我们只需要把www目录下的内容拿去用就好了。直接把www目录下的内容放到服务器或者供后端人员使用。

其它的关于harp的高级用法，请参考Harp文档。

总结

这篇文章，力争让不懂命令行，不懂node，不懂html模板引擎，不懂sass和less的人看懂。写的稍微有些啰嗦。但是希望能达到效果，可以让刚开始学习的小白快速入门。

附录

• NodeJS下载地址
  官网不行的话用我的百度云
  链接:http://pan.baidu.com/s/1hs6A5Ek 密码:evnp
• 如何添加Windows10环境变量
• Less中文文档
• EJS中文文档
• 为什么要使用css预处理器