NodeJs能给前端小白带来什么。(一)

in 编程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

引子的引子

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

引子

随着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="https://segmentfault.com/a/1190000004070021/example.less" />
<script src="https://segmentfault.com/a/1190000004070021/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...

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看