LESSNODEJS环境搭建和LESS应用.docx

1 LESS概述1.1 搭建nodejs环境必备条件CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。LESS的目标是简化CSS使用，降低CSS维护成本，让CSS可编程，让更少的CSS代码做更多的事。2 NODEJS环境搭建2.1 Window环境下载NODEJS（稳定版），直接安装2.2 Linux环境win7为开发环境。Vbox虚拟机+Ubuntu搭建nodejs编译环境。然后通过securecrt远程连接到虚拟机进行开发。如果securecrt远程链接被拒绝需要sudo apt-get install openssh-server2.2.1 第一步：安装依赖包1. 安装python 2.6版或者更高（ubuntu默认都已安装，可以在terminal中使用 python -v 命令查看python版本）。2. 安装其他依赖包:sudo apt-get install g+ curl libssl-dev apache2-utils3. 安装git工具：sudo apt-get install git2.2.2 第二步：获取源码git clone git://joyent/node.git2.2.3 第三步：指定编译版本1.先进入存放下载源码的文件夹：cd node2. 指定迁出版本：git checkout v0.6.12 （版本的选择，遵循稳定原则）3. 指定路径，编译执行:mkdir/local./configureprefix=$HOME/local/nodemakemakeinstallechoexportPATH=$HOME/local/node/bin:$PATH/.profileechoexportNODE_PATH=$HOME/local/node:$HOME/local/node/lib/node_modules/.profilesource/.profile2.2.4 第四步：设置环境变量如果想重启后还能继续直接使用node命令,那么需要设置环境变量:使用命令 sudo gedit /etc/profile 打开配置文件，在文件最后中添加如下两行：exportPATH=$HOME/local/node/bin:$PATHexportNODE_PATH=$HOME/local/node:$HOME/local/node/lib/node_modules保存后重启系统使设置生效。2.2.5 第五步：安装npmcurl/install.sh| sh根据需要，安装相应的包，例如express：npm install express -gd-g代表安装到NODE_PATH的lib里面，而-d代表把相依性套件也一起安装。如果沒有-g的话会安装目前所在的目录(会建立一个node_modules的文件夹)2.2.6 第六步：通过npm按需安装文件包这里我们可以引用一个实例来说明。提供一个练习Demo/cmarin/MongoDB-Node-Express-Blog这个DEMO需要安装的依赖包已经标明，咱们按照命令操作即可首先cd到自己的工作目录 git clonegit://cmarin/MongoDB-Node-Express-Blog.git获取源码。然后首先安装数据库直接在命令行里输入sudo apt-get install mongodb(参考/3391516/833535)即可，安装完成后测试方法，终端命令行中输入：mongodb.foo.save(a:1)db.foo.findOne()然后npminstallexpressnpminstallexpress-messagesnpminstallejsnpminstallsassnpminstallmongooseThencdintothedirectoryandrun:nodeapp.js此时会看到终端的log提示You can debug your app with http:/localhost:3000表明已经安装成功。此时通过ip就可以访问了。如06:3000/2.2.7 注意事项1. 有时候由于异常关机会导致mongodb数据库被锁住。提示Error: couldnt connect to server 。解决方案：sudorm/var/lib/mongodb/mongod.locksudochown-Rmongodb:mongodb/var/lib/mongodb/sudo-umongodbmongod-f/etc/mongodb.conf-repairsudoservicemongodbstart2. 在nodejs开发阶段 如果用node xxx.js 来运行时不能时时检测js文件的变化，这样调试起来就很麻烦，所以需要安装一个开发调试脚本npminstall-gnode-dev使用 node-devapp.js 来调试2.2.8 如果需要在nodeserver之前再搭建一层nginx，基础配置如下：1安装pcresudoapt-getinstalllibpcre3-dev2安装zlib$tarxzfzlib-1.2.3.tar.gz$cdzlib-1.2.3/$./configure$make$sudomakeinstall3nginx-1.0.8$./configure -prefix=nginx-1.0.8$makenginx-1.0.8$sudomakeinstall4检查配置是否正确rootubuntu:/home/#/usr/local/nginx/sbin/nginx-t 根据上面不同的-prefix需要找不同的路径。此处是默认安装不指定prefix的默认目录nginx:theconfigurationfile/usr/local/nginx/conf/nginx.confsyntaxisoknginx:configurationfile/usr/local/nginx/conf/nginx.conftestissuccessful5启动nginxrootubuntu:/home/#/usr/local/nginx/sbin/nginxrootubuntu:/home/#ps-ef|grepnginxroot14361004:58?00:00:00nginx:masterprocess/usr/local/nginx/sbin/nginxnobod58?00:00:00nginx:workerprocessroo58pts/000:00:00grep-color=autonginx6测试rootubuntu:/home/#curlhttp:/localhostWelcometonginx!Welcometonginx!或者rootubuntu:/home/xiong#ifconfigeth0Linkencap:EthernetHWaddr00:0c:29:7b:80:c2inetaddr:31Bcast:55Mask:浏览器输入：31/关闭nginx：nginx-sstop快速关闭Nginx，可能不保存相关信息，并迅速终止web服务。（quickexit）nginx-squit平稳关闭Nginx，保存相关信息，有安排的结束web服务。（gracefulexit）重启nginx：nginx-sreload因改变了Nginx相关配置，需要重新加载配置而重载。（changingconfiguration，startanewworker,quittinganoldworkergracefully.)nginx-sreopen重新打开日志文件。(reopenginglogfiles)以上nginx基本配置完毕，可以启动了。简单放一个基础的nginx.conf文件#usernobody;worker_processes1;#error_loglogs/error.log;#error_loglogs/error.lognotice;#error_loglogs/error.loginfo;error_loglogs/error.logdebug;#第一处修改开启日志pidlogs/nginx.pid;eventsworker_connections1024;httpincludemime.types;default_typeapplication/octet-stream;#第二处开启日志格式化log_formatmain$remote_addr-$remote_user$time_local$request$status$body_bytes_sent$http_referer$http_user_agent$http_x_forwarded_for;access_loglogs/access.logmain;sendfileon;#tcp_nopushon;#keepalive_timeout0;keepalive_timeout65;#gzipon;serverlisten9199;#第三处修改修改默认80端口，不然启动nginx需要root权限server_namelocalhost;#charsetkoi8-r;#access_loglogs/host.access.logmain;location/xxxroothtml;indexindex.htmlindex.htm;#error_page404/404.html;#redirectservererrorpagestothestaticpage/50x.html#error_page500502503504/50x.html;location=/50x.htmlroothtml;#proxythePHPscriptstoApachelisteningon:80#location/proxy_pass:3001;#第四处所有9199端口下直接proxy_pass到其他服务端#passthePHPscriptstoFastCGIserverlisteningon:9000#location.php$#roothtml;#fastcgi_pass:9000;#fastcgi_indexindex.php;#fastcgi_paramSCRIPT_FILENAME/scripts$fastcgi_script_name;#includefastcgi_params;#denyaccessto.htaccessfiles,ifApachesdocumentroot#concurswithnginxsone#location/.ht#denyall;#anothervirtualhostusingmixofIP-,name-,andport-basedconfiguration#server#listen8000;#listensomename:8080;#server_namesomenamealiasanother.alias;#location/#roothtml;#indexindex.htmlindex.htm;#HTTPSserver#server#listen443;#server_namelocalhost;#sslon;#ssl_certificatecert.pem;#ssl_certificate_keycert.key;#ssl_session_timeo