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

liuchengxu 发布于2019-08-28 18:26 / 3372人阅读

摘要：引子的引子第一次写博客，本文是写给和我一样的小白的，大牛请谨慎食用，欢迎拍砖。是称霸全平台的伟大的一步，当然对于我们普通前端小白并不太关心会怎么发展，我们只想高高兴兴上班平平安安回家，所谓老板和我谈理想，我说我的理想是不上班。

引子的引子

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

引子

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

前端自动化

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

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

嗯，然后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...

云服务器 GPU云服务器数据统计带来什么物联网将带来什么什么加速器能给网页加速能给

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111227.html

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

摘要：引子的引子第一次写博客，本文是写给和我一样的小白的，大牛请谨慎食用，欢迎拍砖。是称霸全平台的伟大的一步，当然对于我们普通前端小白并不太关心会怎么发展，我们只想高高兴兴上班平平安安回家，所谓老板和我谈理想，我说我的理想是不上班。引子的引子第一次写博客，本文是写给和我一样的小白的，大牛请谨慎食用，欢迎拍砖。引子随着Node.js 4.0 的发布，这次是nodejs和iojs合并后的...

Binguner 2019-08-19 17:08 评论0 收藏0
（小白指南）在 Linux 服务器上安装 Nodejs、Nginx 以及部署 Web 应用

摘要：首先，的命令和并不能在全局使用。文章有意将浏览器不能访问服务器的两个问题写出来，是因为作者在排查问题的时候，发现在服务器直接访问的页面，能很好地检查排除问题在百度寻找问题答案的时候，发现这种做法也得到了不少人的肯定。前段时间要把项目部署到服务器，期间踩了不少的坑。故写下这篇文章，从零开始把自己部署的过程都记录下来，希望能给其他像我一样的小白一点帮助。如果有疏漏的地方，请各位客官指出，...

glumes 2019-07-25 14:06 评论0 收藏0
浅谈前后端分离与实践之 nodejs 中间层服务（二）

摘要：服务端任需要进行校验来达到数据的可靠性前端的路由可能在服务端并不存在等等这一系列重用性的问题。串行并行，大幅缩短请求时间。关于作者本人主页本文部分图片段落参考文章淘宝前后端分离实践微信公众号会不定期推送前端技术文章，欢迎关注一、背景书接上文，浅谈前后端分离与实践(一) 我们用mock服务器搭建起来了自己的前端数据模拟服务，前后端开发过程中只需定义好接口规范，便可以相互进行各自的开发...

ddongjian0000 2019-08-21 17:13 评论0 收藏0