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

最新推荐文章于 2023-02-19 12:08:24 发布

weixin_33860737

最新推荐文章于 2023-02-19 12:08:24 发布

阅读量277

点赞数 1

文章标签：前端 javascript json ViewUI

原文链接：https://segmentfault.com/a/1190000004070021

版权

引子的引子

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

引子

随着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...