一、简介

Node是一个基于chrome V8引擎的js运行环境（服务器端的浏览器） 他是运行在服务器的。

NodeJS不是语言，是运行环境！！！！

node官网 https://nodejs.org；node中文网 http://nodejs.cn

node.js能做哪些事

1、处理文件与数据库

2、与互联网进行沟通，以标准化的格式处理请求并发送回答（处理客户端请求）

3、用来执行编译 CSS 预编译语言、预编译、压缩、混淆 JS、压缩图片、reload、deploy 等工程化任务

node.js的优点

1、处理高并发场景性能更高

2、Java 1G 服务器 每个客户端连接耗费2M资源 1024=2^10

3、node 1G 服务器 动态分配

4、采用事件驱动、异步编程，为网络服务而设计

5、轻量高效，运行速度是PHP的86倍

6、包和模块

7、便于前端学习

8、适用于I/O密集型的应用（高并发），不适用CPU（数据运算）密集型的应用。node.js作为中间层

9、现在node不用考虑兼容，放心用es6

二、使用Node.js

1. 安装

安装包：百度网盘18302827830 -- Nodejs工具文件夹 node-v10.16.3-x64.msi 或者 node-v12.13.0-x64.msi

检查是否安装成功：

命令行输入：node-v 、npm-v ，出现版本号就安装成功

输入node进入node环境，摁两次ctrl c 退出node环境，结束当前正在执行的任务

2. nvm -- node版本管理工具

安装包：百度网盘18302827830 -- Nodejs工具文件夹 nvm-setup.exe

相关命令：

nvm v 查看nvm的版本

nvm list 查看当前安装过的node版本

nvm install 8.10.0 安装8.10.0的node

nvm use 8.10.0 切换使用8.10.0 的node

在安装Node的时候会安装npm ，这是Node的包管理工具，node package manager

包：就是被封装好打包上传的工具，我们只需要下载安装就可以立即使用

npm可以对这些node的包、模块进行宏观的管理，例如下载、卸载、更新...

npm拥有最大的开源网站：https://www.npmjs.com

我们需要npm init先来创建一个package.json文件，加上-y指全部使用默认配置项

我们通过npm install 模块 来安装模块，缩写：npm i 模块,默认的会安装到目录中的node_modules；如果没有这个文件夹，会自动创建

卸载的话就是npm unintsall 模块名

全局安装 -g（全写上是--global）,全局安装之后，在任意的文件夹都可以访问到

在本地（当前目录上）安装（大多是包）不需要加-g，可以--save指的是保存在本地的package.json里

因为npm在是国外服务器，所以下载速度比较慢，所以可以使用cnpm（淘宝国内镜像）来下载

下载cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

注意，cnpm不是真正的npm，下载的资源来自与taobao服务器，下载到的东西和npm下载的是不一样;cnpm 不一定能使用list、info等等操作

3. Node.js相关模块

分为：自定义模块（CommonJS规范 ：module.exports导出、require引入）、核心模块（ os、fs、http等）和第三方模块（ gulp等，需要在命令行中执行 npm install 模块名称； 模块之间不能循环依赖）

3.1 核心模块

3.1.1 os模块：系统模块

const os = require（'os'） //引入os模块
os.cpus()  //读取到当前电脑cpu的信息

3.1.2 fs模块：文件模块

const fs = require('fs')   //引入fs模块
//如果文件不存在，会创建文件，如果文件存在，会覆盖已有内容
fs.writeFile('data.txt','hello er',(err) => { if(err) throw err;//抛出异常 
    console.log('文件被保存')
})
//如果文件不存在，会创建文件，如果文件存在，在已有的内容后面追加  这里的空格有效
fs.appendFile('data.txt','   yayaya',(err) => {
    if(err) throw err;
    console.log('文件追加成功')
})
//读文件
fs.readFile('文件路径',(err,data) => {
     if(err) throw err
    else console.log(data)
}) 
//删文件
fs.unlink('data.txt', err => {
    if(err) throw err
    else console.log('删除文件成功')
})

//对于文件夹的操作
//创建文件夹
 fs.mkdir('public', err => {
   if (err) throw err   
   else console.log('创建文件夹成功')
})
//删除文件夹
//只能删除空目录  如果想要删除有内容的文件夹，要先把内容清空再删文件夹
 fs.rmdir('public', err => {
   if (err) throw err
   else console.log('done.')
})

3.1.3 http模块

//引入http模块
const http = require('http')
const fs = require('fs')

//创建一个服务器
const server = http.createServer((req, resp) => {
    //req 就是来自前端的请求信息
    //resp 就是服务器要向前端返回的响应  可以返回多个
    //resp.write('<h1>hello world</h1>')
    //resp.write('hello world')
    //resp.end()
     if (req.url === '/'){
         fs.readFile('public/index.html', (err, data) => {
        if(err) throw err
        else resp.end(data)
    })   
    }else if(req.url === 'list'){
    fs.readFile('public/list.html', (err, data) => {
        if(err) throw err
        else resp.end(data)
    }) 
  }
})
//让服务器一直处于监听状态 端口号两到四位
server.listen(端口号)

修改之后要重启服务器
$ node index

三、gulp工具

前端自动化构建工具，可以完成代码的编译、压缩、混淆等工作。与之相似的还有：grunt webpack

grunt -- js的构建工具 现在用得少

gulp webpack -- 用的比较多

1. 使用步骤：

1. 全局安装gulp

yarn add gulp@3 -g

上面那个没有用的时候用下面这个

yarn global add gulp@3

2.新建一个目录，放项目

3.进入项目目录，初始化项目。在项目里面打开命令行：

yarn init -y

采用默认方式，会多一个package.json文件

4.当前项目局部安装gulp

yarn add gulp@3

注意：

图片.png

5.规划项目目录结构

src文件放源代码

libs文件夹放其他第三方的东西

图片.png

6.在项目目录下新建一个gulpfile.js（必须要叫这个名字），在这个文件里写gulp任务来完成各种对代码的操作。

7.在gulpfile.js文件中，压缩html文件

//体验gulp
const gulp = require('gulp')
//task 制定任务，第一个参数是任务名，第二个参数是函数，函数里就是这个任务要执行的操作
//         默认
gulp.task('default', () => {
    console.log('default gulp task')
})

在命令行里执行任务

图片.png

//制定html文件
const gulp = require('gulp')
//引入htmlmin
const htmlmin = require('gulp-htmlmin')
//任务名：html
gulp.task('html', () => {
    //**所有目录  *文件  取出所有目录下后缀名为.html文件
    gulp.src('src/**/*.html') //取
    .pipe(htmlmin({
        //配置项
    }))  //压缩
    .pipe(gulp.dest('dist'))  //放到目标的dist目录里
})

配置完成后在命令行输入：

npm i gulp-htmlmin

npm i gulp-connect

然后gulp，点击Ctrl和左键 端口

8.压缩js

yarn add gulp-uglify

总结gulp

gulp

自动化构建工具（fis3、gulp、grunt）
使用：http://www.ydcss.com/archives/18
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。
使用流程：
    安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

1. 安装 nodejs
node -v
npm -v

使用 npm 安装包：node package manager
npm install <package-name> -g （--save-dev）

-g 全局安装
--save 局部安装并保存到package.json配置中
-dev  存在package.json的devDependencies配置项里，意思是生产环境依赖的模块

文件：package.json(NodeJS项目的配置文件)

选择性安装 cnpm （http://npm.taobao.org/）:
npm install -g cnpm --registry=https://registry.npm.taobao.org
可以使用 cnpm 替代 npm 来安装资源

2. 全局安装 gulp
npm install gulp@3 -g
或：
cnpm install gulp@3 -g
测试：gulp -v

以下步骤在项目目录下操作：

3. 在项目目录下生成 package.json 文件：
npm init -y
或
cnpm init -y

4. 在项目目录中本地安装 gulp：
npm install gulp@3 --save-dev
本地安装成功后，会生成 node_modules 文件夹

5. 在项目目录中本地安装 gulp 插件(https://www.npmjs.com)：

压缩CSS：gulp-clean-css
npm install gulp-clean-css --save-dev

压缩JS：gulp-uglify
npm install --save-dev gulp-uglify

压缩Html：gulp-htmlmin
npm install --save-dev gulp-htmlmin


gulpfile.js

const gulp = require('gulp');
const cleanCss = require('gulp-clean-css');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const htmlmin = require('gulp-htmlmin');

gulp.task('default', function() {
    // 将你的默认的任务代码放在这
    console.log('gulp启动成功');
});

gulp.task("hello", function(){
    console.log("hello gulp");
});

gulp.task("html", function(){
    gulp.src("src/index.html")
        .pipe(htmlmin({
               removeComments: true,//清除HTML注释
               collapseWhitespace: true,//压缩HTML
               collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
               removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
               removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
               removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
               minifyJS: true,//压缩页面JS
               minifyCSS: true//压缩页面CSS 
           })
        )
        .pipe(gulp.dest("dist"))
});

gulp.task("css", function(){
    gulp.src("src/css/*.css")
        .pipe(cleanCss())
        .pipe(gulp.dest("dist/css"));
});

gulp.task("js", function(){
    gulp.src("src/js/*.js")
    .pipe(uglify())
    .pipe(gulp.dest("dist/js"));
});


将ES6转换为ES5：gulp-babel

npm install --save-dev gulp-babel @babel/core @babel/preset-env

gulpfile.js中修改js任务
var babel = require('gulp-babel');
gulp.task('js', function(){
    gulp.src('src/**/*.js')
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
});


服务器：gulp-connect

npm install --save-dev gulp-connect

gulpfile.js中新增代码

var connect = require('gulp-connect');

gulp.task('server', function() {
    connect.server({
        livereload: true,
        port: 2333,
        root: 'dist'
    });
});


gulpfile.js中修改js任务
var concat = require("gulp-concat");
gulp.task("js", function(){
    gulp.src("src/js/**/*.js")
 .pipe(babel({
   presets: ['@babel/env']
 }))
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest("dist/js"))
    .pipe(connect.reload());
});


watch：监听文件的的变化执行对应的任务

给每一个任务加上pipe(connect.reload())

gulp.task('watch',function(){
    gulp.watch('./src/css/*.scss',['sass']);
    gulp.watch('./src/*.html',['html']);
    gulp.watch('./src/css/*.css',['css']);
    gulp.watch('./src/js/*.js',['js']);
})

gulp.task("default", ["sass", "html", "js", "connect", "watch"]);


处理图片

gulp.task("img", function(){
    gulp.src('src/images/**/*')
    .pipe(gulp.dest('dist/images'))
})
gulp.task("default", ["sass", "html", "minijs", "connect", "watch", "img"]);


sass转css  gulp-sass

npm install node-sass gulp-sass --save-dev

var sass = require('gulp-sass');

gulp.task('sass', function(){
    gulp.src('src/css/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'))
});


另：文件合并（项目当中暂时用不着，但是要熟悉）

cnpm install --save-dev gulp-concat

项目中的注意事项

• 我们在npm或者yarn安装的时候依赖包和版本号会存入package.json的dependencies字段里，我们在项目传输的时候不需要传输node_modules这个目录，别人拿到这个项目以后直接运行 npm install 或者yarn 命令就可以根据依赖把这些依赖包全部自动安装好。
• 在安装的时候 npm install [包] --save-dev 这里的 --save指的是将依赖的说明信息保存在package.json里（现在用的高版本npm会自动save，咱们就不用加这个参数了）， -dev 参数指的是开发依赖（将来上线不需要的依赖包） ，对应的yarn的参数 yarn add [包] -D （yarn也会自动save）

四、sass工具

sass是需要编译的，sass不能直接用于页面。它可以极大地提高编程效率（对于使用熟练的人来说）。

sass想要应用在项目中需要编译成css文件。用gulp！

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。本节课所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。

1.导入

sass中如导入其他sass文件，最后编译为一个css文件，优于纯css的@import

@import "reset";

二、变量

必须以$开头， 后面加上！default那就代表这个是当前变量的默认值。

$font-size:16px;
div{
  font-size: $font-size;
}

2.1 复杂变量的使用

$linkColor: #b6b6b6 #ddd!default;
div{
  color: nth($linkColor,1);
  &:hover{
    color:nth($linkColor,2);
  }
}

一般我们都将变量当做属性值来使用， 但是也有极特殊情况下我们会将变量当做class里的类来使用。 这时候， 我们必须以#{$name}的方式来使用变量名；

$name:top !default;
.class-#{$name}{
  border-#{name}:1px solid #b6b6b6;
}

2.2 多值变量：map 和 list(复杂变量)

多值变量代表的是多维数据的存储方式，换句话说，list相当于js中的数组map相当于js中的对象。 list数据一般用空格分割， 但是也可以用 逗号 或者小括号分割多个值。

2.2.1 list:

$list : (20px 40px)(30px 20px)(40px 30px);//相当于多维数组，其他格式同理；
$list : 20px 30px 40px 50px 60px;
$list : 20px,30px,40px,50px,60px;

使用：
对于list的使用那， 我们可以使用 nth($list,num)去调用； 当然我们还可以去使用其他方式；

length($list)                                                  返回list的长度

nth($list, $n)                                                 返回索引的项目

set-nth($list, $n, $value)                              设置list中第n个的值

join($list1, $list2, [$separator])                     将两个列表链接在一起

append($list1, $val, [$separator])               追加一个值到列表最后

zip($lists…)                          将几个列表组合成多维列表

index($list, $value)                返回一个列表中值的位置

2.2.2 map:

map的数据是以键值对形式出现的， 期中value可以是list。 格式为：

$map : ( key1 : value1 , key2 : value2 ,key3:value3 )

最常用的取值方法就是用

map-get（$map,$key）

进行取值。

关于map还有很多函数：

map-get($map, $key)                返回key值；

map-merge($map1, $map2)      合并两个$map；

map-remove($map, $keys…)         删除某个value并返回value值；

map-keys($map)      以list形式返回所有$map 的key;

map-values($map)      以list形式返回所有$map中的value;

map-has-key($map, $key)     查看当前的$map是否有这个key

keywords($args)         返回一个关键字

$headers:(h1:20px,h2:30px,h3:40px);

@each $key, $value in $headers{
  #{$key}{
    font-size: $value;
  }
}

这里的each用法那和我们js中的for in 用法基本一致，只不过写法不同。 $key 相当于for in 中的 变量 $value相当于 for in 中的 obj[i]；

2.3嵌套

sass可以进行选择器的嵌套，表示层级关系，看起来很有bigger。

选择器嵌套：

ul{
  li{
    list-style: none;
    color:nth($linkColor,1);
  }
}

属性嵌套：

.class{
  border:{
    style:solid;
    left:none;
    right:1px;
    color:#b6b6b6;
  }
}

@at-root

跳出当前选择器嵌套。

.class{
  color:f10;
  .child{
    width:100px;
  }
}
.class2{
  @at-root .child{
    color:#b6b6b6;
  }
}

@at-root (without: ...)和 @at-root (with: ...)

默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以对其忽略）。我们默认的@at-root其实就是@at-root (without:rule)。

@media screen and (max-width:641px){
    .parent{
      color:#b6b6b6;
      @at-root .child{
        width:100px;
      }
    }
}

在这里.child只会跳出.parent 和.parent类作为同级，而不会跳出@media 那么我们如何让他跳出@media那？

@media screen and (max-width:641px){
    .parent{
      color:#b6b6b6;
      @at-root (without:media) {
        .child{
          width:100px;
        }
      }
    }
}

这种编译模式会将我们的css编译成

@media screen and (max-width: 641px) {
  .parent {
    color: #b6b6b6;
  }
}
.parent .child {
  width: 100px;
}

也就是说， 这时候我们的 .child 带着他的父级跳出了media嵌套。

@media screen and (max-width:641px){
    .parent{
      color:#b6b6b6;
      @at-root (without:all) {
        .child{
          width:100px;
        }
      }
    }
}

和刚才的执行结果有稍微的一点差异,变成了这个样子；

@media screen and (max-width: 641px) {
  .parent {
    color: #b6b6b6;
  }
}
.child {
  width: 100px;
}

注意：这次的跳出是不带父级的。

小技巧：

@at-root 其实有很多的组合配合，和 &配合可以改变css的从属关系；

.parent{
  @at-root .child &{
    color:#b6b6b6;
  }
}

mixin（混合）

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。

无参数 mixin :

@mixin marginCenter{
  margin-left:auto;
  margin-right:auto;
}
.container{
  @include marginCenter;
}

有参数 minxin

1）必须传参数的应用

@mixin transform($type){
  -webkit-transform:$type;
  -moz-transform: $type;
  -ms-transform: $type; 
  -o-transform: $type;
  transform:$type;
}
div{
  @include transform(scale(1.2))
}

2）设置默认情况的mixin

当你不传入参数直接使用的话那会调用默认值。

@mixin opacity($opacity:50){
  opacity: $opacity/100;
  filter:alpha(opacity=$opacity)
}
.box{
  @include opacity(80)
}

多个参数mixin

调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

@mixin line($border:1px dashed #ccc, $padding:10px){
  border-bottom:$border;
  padding-top:$padding;
  padding-bottom:$padding;
}
.imgtext-h li{
  @include line(1px solid #ccc);
}
.imgtext-h--product li{
  @include line($padding:15px);
}

多组值参数mixin

如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables...。

@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}

@content

@content在sass3.2.0中引入，它可以使@mixin接受一整块样式，接受的样式从@content开始。

@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}
@include max-screen(480px) {
  body { color: red }
}

扩展/继承

sass可通过@extend来实现代码组合声明，使代码更加优越简洁。

.active{
  border:1px solid #b6b6b6;
  padding:10px;
  color: #333;
}

.success{
  @extend .active;
  width:100px;
}

颜色

sass中集成了大量的颜色函数，让变换颜色更加简单。

$linkColor:(red,green);
a{
  color: nth($linkColor,1);
  &:hover{
    color:darken(nth($linkColor,1),20%)
  }
}

运算

sass可进行简单的加减乘除运算等 , 当我们拿到一张需要转换成百分比布局的设计稿， 这时候我们有福了。

.container{
  width: 100%;
}
.aside{
  width:600px/960px*100%;
}
article{
  width:300px/960px*100%;
}

函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。

$baseFontSize:10px;
$gray:#ccc;
@function pxToRem($px){
@return $px/$baseFontSize*1rem;
}
body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}

这个和我们JS中的函数那非常的相似，可以和我们js中的函数一样使用。 同时注意， 这里的返回值几乎是必须的所以请在每个函数结束时，使用@return去返回需要的返回值。

@if判断

@if可一个条件单独使用，也可以和@else结合多条件使用

$lte7: true;
$type: monster;
.ib{
  display:inline-block;
  @if $lte7 {
    *display:inline;
    *zoom:1;
  }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

三目判断

语法为：if($condition, $if_true, $if_false)。三个参数分别表示：条件，条件为真的值，条件为假的值。

if(true, 1px, 2px) => 1px

if(false, 1px, 2px) => 2px

for循环

for循环有两种形式，分别为：@for $var from <start> through <end>和@for $var from <start> to <end>。$var表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

@each循环

语法为：@each $var in <list or map>。其中$var表示变量，而list和map表示list类型数据和map类型数据。

$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

多个字段list循环；

$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

多字段map循环；

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}