NodeJs能给前端小白带来什么。（一）

引子的引子

第一次写博客，本文是写给和我同样的小白的，大牛请谨慎食用，欢迎拍砖。

引子

随着Node.js 4.0 的发布，此次是nodejs和iojs合并后的第一个稳定版本。关于nodejs和iojs的那点事能够看这个Node.js与io.js那些事儿 ,天下大势，分久必合，合久必分。总之最后结局是好的。
Node.js是JavaScript称霸全平台的伟大的一步，固然对于咱们普通前端小白并不太关心JavaScript会怎么发展，咱们只想 高高兴兴上班 平平安安回家，所谓老板和我谈理想，我说个人理想是不上班。因此咱们更多追求的是效率和质量。尽可能在下班前把今天的任务写完。

前端自动化

这个标题有点大，所谓自动化就是把咱们的双手从无心义的重复劳动解放出来，能够干其余事（嘿嘿嘿）。相信入门了的前端都会有一款本身使用熟的css预处理器，若是还不知道预处理器是啥玩意？赶忙戳这里，珍爱生命，早用早享受，这里拿我用熟的LESS举例。我使用LESS预编译CSS分三个时期。

第一时期，less.js直接引入浏览器

<link rel="stylesheet/less" href="example.less" />
<script src="lesscss-1.4.0.min.js"></script>

嗯，而后chrome直接本地不能调试？！WTF？一查文档

须要特别注意的是，因为浏览器端使用时是使用ajax来拉取.less文件，所以直接在本机文件系统打开（即地址是file://开头）或者是有跨域的状况下会拉取不到.less文件，致使样式没法生效。

这里有两个解决方案，一是换浏览器，最新的火狐是支持跨域的。二是用webstorm打开。然而对于我并不喜欢FF，和打开时间超过30s的webstorm。最后是这个方式并不能直接部署到服务器，容易出各类错，所以我进入了第二个时期。

第二时期，cmd编译less文件

这里要请出咱们的神器 Nodejs 了。这里以windows开发平台为例，下载官方的msi文件，安装。
打开界面cmd输入

npm install -g less

很好，接下来只要cd到你的less文件夹

lessc example.less example.css

你的html里只须要引用这个css就能够了，很好！那么问题又来了，根本不是我要的效果嘛。万一你有多个less文件，咋办？并且你改一次就得lessc一次，能把你整奔溃。好在机智（懒惰）的歪果仁早就发现这个问题了，因而进入第三个时期自动化！

第三个时期，自动化编译less

先想一想咱们要什么效果，嗯，最好是less文件一改，就帮我编译，最好还能编译合并多个文件，固然能压缩下代码就更nice了。固然生产环境下方便调试咱们是不会压缩代码的。
好，接下来请出咱们的第二款神器 gulp！

npm install --g gulp

通常说gulp咱们都会扯扯nodejs的stream，流开发，具体理论看这里，我简单理解为gulp不会重复帮咱们编译less文件没有改变的部分，只编译改变的部分。简直过高大上了，嗨起来！
嗨回来咱们先来看看gulp是如何作到上面的要求的。固然咱们须要规范咱们的编程环境。

创建如图的目录结构

而后cd到你的目录执行

npm init //懒得写package.json，这里会跳出各类填空题，按需填写。
npm install gulp --save-dev  //这里开始装插件gulp，--save-dev 将存入package.json

很好已经和咱们的目标很接近了，而后在根目录新建gulpfile.js ，这个文件是咱们自动化的主文件。把下面的代码复制到这个文件(最好本身手打一遍加深印象)

var gulp    = require('gulp'); //
var concat  = require('gulp-concat'); //合拼文件的插件
var less = require('gulp-less'); //编译less
var plumber = require('gulp-plumber'); //和下面这个构成less编译报错插件
var notify = require('gulp-notify');

gulp.task('compileLess',function(){ //task传二个参数，第一个是这个任务的名字，第二个是执行的函数
    gulp.src("./source/less/*.less") //你的less文件放在哪里
        .pipe(plumber(
        {errorHandler: notify.onError('Error: <%= error.message %>')}
        ))//报错触发
        .pipe(less())//编译你的less文件
        .pipe(concat("base.css"))//合拼less文件并重命名为base.css
        .pipe(gulp.dest("./build/css"))//编译后的css文件放哪啊
})

到这里咱们已经完成了一大部分,运行

gulp compileLess

很棒！已经能够合拼编译less文件而且less报错的时候不会中断。接下来就是自动编译了

gulp.task('watchLess',function(){
    gulp.watch("./source/less/*.less",["compileLess"]); 
    //简单粗暴的函数名watch，帮我盯着！第一个参数是盯着的位置，第二个是要执行的task
    //这里的全部参数都是能够经过数组传值的

To be continue...