有了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以后。
在OSX或Linux系统上命令行中输入。
sudo npm install -g harp
image.png
在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文件
运行
在命令行模式下执行，可以看到启动了本地服务器，端口为9000.
harp server
image.png
查看我们编写的文件内容，在浏览器中输入
http://localhost:9000/。查看效果，虽然我们并没有编写html和css文件，但是却像编写了html和css一样。
当我们修改ejs文件和less文件的时候，再次刷新浏览器，修改就生效了，可以立即查看我们做的修改。
image.png
生成html和css
实际浏览器只能解析html和css文件，我们写的不是html和css怎么办呢？
这个时候，只需要我们编译一下自己写的文件就好了。
刚开始时我们的文件内容
初始时文件内容
在命令行中输入,可以看到我们写的文件都被编译成html和css文件
harp compile
image.png
到时候，我们只需要把www目录下的内容拿去用就好了。直接把www目录下的内容放到服务器或者供后端人员使用。
其它的关于harp的高级用法，请参考Harp文档。
总结
这篇文章，力争让不懂命令行，不懂node，不懂html模板引擎，不懂sass和less的人看懂。写的稍微有些啰嗦。但是希望能达到效果，可以让刚开始学习的小白快速入门。
附录
NodeJS下载地址
官网不行的话用我的百度云
链接:http://pan.baidu.com/s/1hs6A5Ek 密码:evnp
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
