前端开发——NodeJs学习 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


前端开发——NodeJs学习

2019-6-20 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中,

NodeJs基础
nodejs的本质:不是一门新的编程语言,nodejs是javascript运行在服务端的运行环境,编程语言还是javascript

global模块-全局变量
Node.js 中的全局对象是 global, 类似于浏览器中的window

常用的global属性

console: 用于打印日志
setTimeout/clearTimeout: 设置清除延时器
setInterval/clearInterval: 设置清除定时器

__dirname: 当前文件的路径,不包括文件名
__filename: 获取当前文件的路径,包括文件名

//与模块化相关的,模块化的时候会用到
require
exports
module

除了global模块中的内容可以直接使用,其他模块都是需要加载的。
其他模块不是全局的,不能直接使用。因此需要导入才能使用。
fs模块
fileSystem-- 文件系统,提供了一系列操作文件的API接口,可以方便我读写文件

读取文件
语法:fs.readFile(path[, options], callback)

方式一:不传编码参数

//参数1: 文件的名字
//参数2: 读取文件的回调函数
  //参数1:错误对象,如果读取失败,err会包含错误信息,如果读取成功,err是null
  //参数2:读取成功后的数据(是一个Buffer对象)
fs.readFile("data.txt", function(err, data){
  console.log(err);
  console.log(data);
  // 可以通过data.toString() 把二进制数据转成文本,当然前提是读取的文件本来就是文本,如果是图片获取的二进制就无法转换成文本
});

方式二:传编码参数

//参数1: 文件的路径
//参数2: 编码,如果设置了,返回一个字符串,如果没有设置,会返回一个buffer对象
//参数3: 回调函数
fs.readFile("data.txt", "utf8",function(err, data){
  console.log(err);
  console.log(data);
});

关于Buffer对象

1. Buffer对象是Nodejs用于处理二进制数据的。
2. 其实任意的数据在计算机底层都是二进制数据,因为计算机只认识二进制。
3. 所以读取任意的文件,返回的结果都是二进制数据,即Buffer对象
4. Buffer对象可以调用toString()方法转换成字符串。

写文件
语法:fs.writeFile(file, data[, options], callback)

//参数1:写入的文件名(如果文件不存在,会自动创建)
//参数2:写入的文件内容(注意:写入的内容会覆盖以前的内容)
//参数3:写文件后的回调函数
fs.writeFile("2.txt", "hello world, 我是一个中国人", function(err){
  if(err) {
    return console.log("写入文件失败", err);
  }
  console.log("写入文件成功");
});
1
2
3
4
5
6
7
8
9
注意:

写文件的时候,会把原来的内容给覆盖掉
追加文件
语法:fs.appendFile(path, data[, options], callback)

//参数1:追加的文件名(如果文件不存在,会自动创建)
//参数2:追加的文件内容(注意:写入的内容会覆盖以前的内容)
//参数3:追加文件后的回调函数
fs.appendFile("2.txt", "我是追加的内容", function(err){
  if(err) {
    return console.log("追加文件内容失败");
  }
  console.log("追加文件内容成功");
})


思考:如果没有appendFile,通过readFile与writeFile应该怎么实现?

文件同步与异步的说明
fs中所有的文件操作,都提供了异步和同步两种方式

异步方式:不会阻塞代码的执行
同步方式:会阻塞代码的执行
//同步方式
console.log(111);
var result = fs.readFileSync("2.txt", "utf-8");
console.log(result);
console.log(222);

总结:同步操作使用虽然简单,但是会影响性能,因此尽量使用异步方法,尤其是在工作过程中。

stream
stream是Node.js提供的又一个仅在服务区端可用的模块,目的是支持“流”这种数据结构。

什么是流?流是一种抽象的数据结构。想象水流,当在水管中流动时,就可以从某个地方(例如自来水厂)源源不断地到达另一个地方(比如你家的洗手池)。我们也可以把数据看成是数据流,比如你敲键盘的时候,就可以把每个字符依次连起来,看成字符流。这个流是从键盘输入到应用程序,实际上它还对应着一个名字:标准输入流(stdin)。

如果应用程序把字符一个一个输出到显示器上,这也可以看成是一个流,这个流也有名字:标准输出流(stdout)。流的特点是数据是有序的,而且必须依次读取,或者依次写入,不能像Array那样随机定位。

有些流用来读取数据,比如从文件读取数据时,可以打开一个文件流,然后从文件流中不断地读取数据。有些流用来写入数据,比如向文件写入数据时,只需要把数据不断地往文件流中写进去就可以了。

在Node.js中,流也是一个对象,我们只需要响应流的事件就可以了:data事件表示流的数据已经可以读取了,end事件表示这个流已经到末尾了,没有数据可以读取了,error事件表示出错了。

下面是一个从文件流读取文本内容的示例:

'use strict';

var fs = require('fs');

// 打开一个流:
var rs = fs.createReadStream('sample.txt', 'utf-8');

rs.on('data', function (chunk) {
    console.log('DATA:')
    console.log(chunk);
});

rs.on('end', function () {
    console.log('END');
});

rs.on('error', function (err) {
    console.log('ERROR: ' + err);
});

要注意,data事件可能会有多次,每次传递的chunk是流的一部分数据。

要以流的形式写入文件,只需要不断调用write()方法,最后以end()结束:

'use strict';

var fs = require('fs');

var ws1 = fs.createWriteStream('output1.txt', 'utf-8');
ws1.write('使用Stream写入文本数据...\n');
ws1.write('END.');
ws1.end();

var ws2 = fs.createWriteStream('output2.txt');
ws2.write(new Buffer('使用Stream写入二进制数据...\n', 'utf-8'));
ws2.write(new Buffer('END.', 'utf-8'));
ws2.end();


所有可以读取数据的流都继承自stream.Readable,所有可以写入的流都继承自stream.Writable。

pipe
就像可以把两个水管串成一个更长的水管一样,两个流也可以串起来。一个Readable流和一个Writable流串起来后,所有的数据自动从Readable流进入Writable流,这种操作叫pipe。

在Node.js中,Readable流有一个pipe()方法,就是用来干这件事的。

让我们用pipe()把一个文件流和另一个文件流串起来,这样源文件的所有数据就自动写入到目标文件里了,所以,这实际上是一个复制文件的程序:

'use strict';

var fs = require('fs');

var rs = fs.createReadStream('sample.txt');
var ws = fs.createWriteStream('copied.txt');

rs.pipe(ws);

默认情况下,当Readable流的数据读取完毕,end事件触发后,将自动关闭Writable流。如果我们不希望自动关闭Writable流,需要传入参数:

readable.pipe(writable, { end: false });
1
path模块
路径操作的问题
具体的说明可以参考 NodeJs学习.md

在读写文件的时候,文件路径可以写相对路径或者绝对路径

//data.txt是相对路径,读取当前目录下的data.txt, 相对路径相对的是指向node命令的路径
//如果node命令不是在当前目录下执行就会报错, 在当前执行node命令的目录下查找data.txt,找不到
fs.readFile("data.txt", "utf8", function(err, data) {
  if(err) {
    console.log("读取文件失败", err);
  }

  console.log(data);
});

相对路径:相对于执行node命令的路径

绝对路径:__dirname: 当前文件的目录,__filename: 当前文件的目录,包含文件名

path模块的常用方法
关于路径,在linux系统中,路径分隔符使用的是/,但是在windows系统中,路径使用的\

在我们拼写路径的时候会带来很多的麻烦,经常会出现windows下写的代码,在linux操作系统下执行不了,path模块就是为了解决这个问题而存在的。

常用方法:

path.join();//拼接路径

//windows系统下
> path.join("abc","def","gg", "index.html")
"abc\def\gg\a.html"

//linux系统下
> path.join("abc","def","gg", "index.html")
'abc/def/gg/index.html'

http模块
创建服务器步骤

// 移入http模块
const http = require('http')
// 调用创建http 服务器的方法
const server = http.createServe()
// 给服务器注册request事件监听,每次浏览器像服务器发送请求的时候都会被监听到
server.on('request', function(request, response){
    // request 浏览器请求的数据,包括请求方式method 请求的地址 url等
    // response 浏览器的响应,可以设置响应头、响应体、响应状态码
    const method = request.method
    const url = request.url
    
    // 设置响应的状态码
    response.StatusCode = 404
    // 设置响应的头
    response.setHeader('Content-Type', 'text/html');
    // 设置响应体内容,write可以调用多次
    response.write('hello world!')
    // 响应结束
    response.end()
    
    // 如果在end(content),这样的写法相当于是让write和end的合写
    response.end('hello world!')
})
// 给服务器设置监听,相当于启动服务器
server.listen(8888,function(){
    console.log('服务器启动成功')
})

// 简写方式

http.createServer((req,res) => {
    ....
}).listen(8888,() => {
    ....
})

详细说明

给服务器注册request事件,只要服务器接收到了客户端的请求,就会触发request事件
request事件有两个参数,request表示请求对象,可以获取所有与请求相关的信息,response是响应对象,可以获取所有与响应相关的信息。
服务器监听的端口范围为:1-65535之间,推荐使用3000以上的端口,因为3000以下的端口一般留给系统使用
response对象详解
常见的属性和方法:

res.write(data): 给浏览器发送请求体,可以调用多次,从而提供连续的请求体
res.end();   通知服务器,所有响应头和响应主体都已被发送,即服务器将其视为已完成。
res.end(data); 结束请求,并且响应一段内容,相当于res.write(data) + res.end()
res.statusCode: 响应的的状态码 200 404 500
res.statusMessage: 响应的状态信息, OK Not Found ,会根据statusCode自动设置。
res.setHeader(name, value); 设置响应头信息, 比如content-type
res.writeHead(statusCode, statusMessage, options); 设置响应头,同时可以设置状态码和状态信息。
1
2
3
4
5
6
7
注意:必须先设置响应头,才能设置响应。

实现静态WEB服务器
服务器响应帝皇彩票
注意:浏览器中输入的URL地址,仅仅是一个标识,不与服务器中的目录一致。也就是说:返回什么内容是由服务端的逻辑决定
server.on('request', function(req, res) {
  var url = req.url
  if(url === '/') {
    fs.readFile('./index.html', function(err, data) {
      if(err) {
        return res.end('您访问的资源不存在~')
      }

      res.end(data)
    })
  }
})

根据根据不同url,响应不同文件
content-type设置-MIME类型
MIME(Multipurpose Internet Mail Extensions)多用途Internet邮件扩展类型 是一种表示文档性质和格式的标准化方式
浏览器通常使用MIME类型(而不是文件扩展名)来确定如何处理文档;因此服务器将正确的MIME类型附加到响应对象的头部是非常重要的
MIME类型的通用处理-mime模块
作用:获取文件的MIME类型
安装:npm i mime
var mime = require('mime')

// 获取路径对应的MIME类型
mime.getType('txt')                    // ⇨ 'text/plain'
// 根据MIME获取到文件后缀名
mime.getExtension('text/plain')        // ⇨ 'txt'
1
2
3
4
5
6
有了这个模块我们就可以把设置响应头的代码改写成下面

// mime 不仅可以只写一个后缀名,还可以通过url来解析出后缀名来,因此这里可以直接写url
response.setHeader('content-type',mime.getType(request.url))
1
2
npm - Node包管理工具
初始化包
npm init;    //这个命令用于初始化一个包,创建一个package.json文件,我们的项目都应该先执行npm init
npm init -y;  //快速的初始化一个包, 不能是一个中文名
1
2
安装包
npm install 包名;  //安装指定的包名的最新版本到项目中
npm install 包名@版本号;  //安装指定包的指定版本

npm i 包名; //简写

卸载包
npm uninstall 包名;  //卸载已经安装的包
1
清除缓存
npm cache clean -f // 如果npm安装失败了,可以用这个命令来清除缓存
1
package.json文件
package.json文件,包(项目)描述文件,用来管理组织一个包(项目),它是一个纯JSON格式的。

作用:描述当前项目(包)的信息,描述当前包(项目)的依赖项
如何生成:npm init或者npm init -y
作用
作为一个标准的包,必须要有package.json文件进行描述
一个项目的node_modules目录通常都会很大,不用拷贝node_modules目录,可以通过package.json文件配合npm install直接安装项目所有的依赖项
描述内容
{
  "name": "03-npm",  //描述了包的名字,不能有中文
  "version": "1.0.0",  //描述了包的的版本信息, x.y.z  如果只是修复bug,需要更新Z位。如果是新增了功能,但是向下兼容,需要更新Y位。如果有大变动,向下不兼容,需要更新X位。
  "description": "", //包的描述信息
  "main": "index.js", //入口文件(模块化加载规则的时候详细的讲)
  "scripts": {  //配置一些脚本,在vue的时候会用到,现在体会不到
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],  //关键字(方便搜索)
  "author": "",  //作者的信息
  "license": "ISC",  //许可证,开源协议
  "dependencies": {   //重要,项目的依赖, 方便代码的共享  通过 npm install可以直接安装所有的依赖项
    "bootstrap": "^3.3.7",
    "jquery": "^3.3.1"
  }
}

注意:一个合法的package.json,必须要有name和version两个属性

本地安装和全局安装
有两种方式用来安装 npm 包:本地安装和全局安装。选用哪种方式来安装,取决于你如何使用这个包。

全局安装:如果你想将其作为一个命令行工具,那么你应该将其安装到全局。这种安装方式后可以让你在任何目录下使用这个命令。比如less命令,webpack命令,hcc-md命令 。
本地安装:如果你自己的模块依赖于某个包,并通过 Node.js 的 require 加载,那么你应该选择本地安装,这种方式也是 npm install 命令的默认行为。
// 全局安装,会把npm包安装到C:\Users\HUCC\AppData\Roaming\npm目录下,作为命令行工具使用
npm install -g 包名;

//本地安装,会把npm包安装到当前项目的node_modules文件中,作为项目的依赖
npm install 包名;  

常见的命令行工具
nrm
nrm:npm registry manager(npm仓库地址管理工具)
安装:npm i -g nrm
# 带*表示当前正在使用的地址

# 查看仓库地址列表
nrm ls

# 切换仓库地址
nrm use taobao

nodemon 自动重启
作用:监视到js文件修改后,自动重启node程序
安装:npm i -g nodemon
使用:nodemon app.js 运行node程序
模块化(module)
基本概念
在nodejs中,应用由模块组成,nodejs中采用commonJS模块规范。

一个js文件就是一个模块
每个模块都是一个独立的作用域,在这个而文件中定义的变量、函数、对象都是私有的,对其他文件不可见。
node中模块分类
1 核心模块
由 node 本身提供,不需要单独安装(npm),可直接引入使用
2 第三方模块
由社区或个人提供,需要通过npm安装后使用
3 自定义模块
由我们自己创建,比如:tool.js 、 user.js
核心模块
fs:文件操作模块
http:网络操作模块
path:路径操作模块
url: 解析地址的模块
querystring: 解析参数字符串的模块
基本使用:1 先引入 2 再使用
// 引入模块
var fs = require('fs');
1
2
第三方模块
第三方模块是由 社区或个人 提供的
比如:mime模块/art-template/jquery…
基本使用:1 先通过npm下载 2 再引入 3 最后使用
用户自定义模块
由开发人员创建的模块(JS文件)
基本使用:1 创建模块 2 引入模块
注意:自定义模块的路径必须以./获取../开头
// 加载模块
require('./a')     // 推荐使用,省略.js后缀!

require('./a.js')
1
2
3
4
模块导入
/* 
  nodejs中模块分为3大类
    1. nodejs本身提供的核心模块   fs http path url querystring
      核心模块不需要安装,直接导入即可。
      核心模块的加载语法: const fs = require('fs')
    
    2. 第三方模块  mime art-template
      第三方模块: 必须先安装(npm install XXX)  才能导入
      第三方模块的加载语法: npm install XXX   const mime = require('mime')
    
    3. 自定义的模块 一个js文件 
      不需要安装  只需要自己创建一个js文件
      自定义模块的加载语法:  require('模块的路径')  模块不能是名字,必须是路径  ./ ../ .js后缀是可以省略

  require加载规则(以mime模块为例)
  1. 判断是否是路径, 如果是  就是自定义模块
  2. 如果是名字 判断是否是核心模块
  3. 如果是第三方模块  在当前目录找node_modules
  4. 在node_modules中查找mime文件夹
  5. 查找是否有package.json, 查看是否main属性
  6. 判断是否有main, 如果没有,默认查找index.js  index.json index.node
  7. 如果没有
  8. 如果找不到,就去上一层目录,一直找到根目录
  9, 如果还没有,就说明模块不存在
*/

模块导出
/* 
  1. 模块中定义的变量和函数都是私有的
  2. 任意的一个模块中, 都有自带一个属性 module (全局属性) module代表的就是当前的这个模块。
  3. module中有一个属性  exports ,这个exports属性是一个对象,代表的就是当前模块的导出 module.exports当前模块唯一能够被外界访问到的

*/
//通过module.exports对外导出一些值
module.exports = 值  只能导出一个值
module.exports = {}  可以把所有要导出的内容都放到一个新的对象中
module.export.xxx = 值
/* 
  在任意的模块中 module.exports表示该模块的导出
  为了我们方便导出, 每个模块中还提供了 exports  
  exports 初始状态下,和module.exports指向了同一个对象。

  注意点: 如果通过exports的方式来导出内容,只能给对象增加属性 不能替换这个对象
*/
// 我们真正到处的对象是module.exports指向的对象
exports = {} // 这样只是改了exports的指向,而module.exports的指向没有改变,所以这样是不对的
// 以下这种是允许的
exports.xxx = '值'

express与mysql
首先需要安装mysql模块

npm i mysql
1
基本使用
// 导入第三方包
const mysql = require('mysql')
// 创建连接
var connection = mysql.createConnection({
  // 本地
  host: 'localhost',
  user: 'root',
  password: 'root',
  // 数据库名称
  database: 'mydb',
  port: 3306
})

// 连接数据库
connection.connect()

// 执行sql语句
connection.query('select * from user where id = 8', (err, result) => {
  if (err) return console.log('查询失败', err)
  // result返回的是数组, 数组中是一个对象
  console.log(result)
})

// 关闭连接
connection.end()


查询语句
var name = 'zs'
// 使用?表示占位,可以防止sql注入
connect.query(`select * from user where name=?`, name, (err, result) => {
  if (err) return console.log('错误了', err)
  console.log(result)
})
1
2
3
4
5
6
插入语句
connect.query(
  'insert into user (name, age, gender, content) values (?, ?, ?, ?)',
  ['zs', 18, '男', '哈哈哈哈'],
  err => {
    if (err) return console.log('错误', err)
    console.log('添加成功了')
  }
)

// 方式2
connect.query(
  'insert into user set ?',
  {
    name: 'zs',
    age: 30,
    gender: '男',
    content: '哈哈哈'
  },
  (err, result) => {
    if (err) return console.log('错误', err)
    console.log('添加成功了', result)
  }
)


修改语句
connect.query(
  'update user set ? where id = ?',
  [
    {
      name: 'zs',
      age: 30,
      gender: '男',
      content: '哈哈哈'
    },
    10
  ],
  (err, result) => {
    if (err) return console.log('错误', err)
    console.log('添加成功了', result)
  }
)

删除语句
connect.query('delete from user where id = ?', 10, (err, result) => {
  if (err) return console.log('失败', err)
  console.log(result)
})
1
2
3
4
登录状态保持
http是无状态的,但是随着技术的发展,我们需要记住某些东西,但是因为http是无状态的,无法让服务器记住东西,因此就引入了cookie和session这两个东西,cookie用于浏览器端,session用于服务器端。

以用户登录为例:

当用户登录时,浏览器会给服务器发送请求,这时候服务器就会开辟一个空间用于存放session数据,并且会把生成的sessionId返回给浏览器,存放在浏览器的cookie中,之后浏览器在请求服务器的时候,就会去比对是否存在这个session。这样你的登录状态就已经保持下来了

cookie的特点

cookie大小只有4k
cookie每次请求的时候,都会自动携带
cookie可以设置过期时间
为了方便使用,我们可以使用express-session这个包,可以很方便使用session

express-session步骤:
1. 下载  npm i express-session
2. 导入  const session = require("express-session")
3. 使用session中间件
app.use(session({
    secret: 'itcast',
    // 设置浏览器端cookie的名字, 默认connect.sid
    name: 'itcast',
    resave: false,
    // 在浏览器和服务器连接的第一时间,分配session  给浏览器指定一个cookie
    saveUninitialized: true
}))
可以通过req.session访问到session
4. 登录成功,把登录成功的用户信息存储到 req.session.xxx中
5. 提供一个中间件,这个中间件在路由的前面,判断 req.session.xxx是否有值,有值,放走,没值,去登录,细节: 如果是/login 直接放走
6. 退出功能:  把req.session.xxx 清空即可


浏览器登录和退出
1. 登录做什么  把用户名和密码给服务器
2. 退出做什么, 1. 告诉服务器,要退出   2.(清缓存也行)

yarn和npm的说明
官网:https://yarn.bootcss.com/

Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ,Yarn 是为了弥补 npm 的一些缺陷而出现的。

Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。
同时利用并行下载以最大化资源利用率,因此安装速度更快。
yarn的用法和npm的用法差不多
yarn命令
初始化一个新项目
yarn init
1
添加依赖包
yarn add 包名
1
升级依赖包
yarn upgrade 包名
1
移除依赖包
yarn remove 包名
1
安装项目的全部依赖
yarn
1
全局安装
yarn global add 包名
1
使用gulp自动化构建
官网:https://gulpjs.com/

中文文档:https://www.gulpjs.com.cn/

用自动化构建工具增强你的工作流程!

在开发过程中,有很多重复性的工作需要执行。

less转成css
对css代码压缩混淆
对js代码压缩混淆
写完代码后需要刷新浏览器
无法共用模版
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

gulp -----> grunt ------>webpack

环境安装
初始化项目
npm init -y
1
全局安装gulp
npm install gulp -g 
yarn global add gulp
1
2
作为项目的依赖进行安装
yarn add gulp --save-dev      或者    
yarn add gulp --save-dev
--save-dev 等同于 -D
如果这个依赖包只是在开发阶段需要用到,需要加-D
1
2
3
4
新建gulpfile.js文件
// 参数1: 任务名
// 参数2: 任务需要执行的内容
gulp.task('aa', function() {
  console.log('哈哈')
})
1
2
3
4
5
执行任务
gulp 任务名;

gulp; 如果不接任务名,那么会执行默认的 default任务
1
2
3
glup任务-文件拷贝-lib
文件拷贝使用到了gulp提供的几个核心方法
gulp.task: 定义任务

gulp.src() 读取文件

gulp.pipe() 把文件交给管道处理

gulp.dest() 输出文件到某个目录

gulp.task定义任务
gulp.src('./src/lib/**/*.*')把文件读取成一个文件流
gulp.pipe() 把文件流交给下一个流
gulp.dest('./dist/lib')输出文件
// 简单拷贝, 处理 lib文件夹, lib文件不需要做任何的处理,只需要拷贝到dist目录
// 任务需要加一个return, 表示任务完成
gulp.task('lib', function() {
  // 读取文件
  // gulp.src() 读取文件
  // gulp.pipe() 管道
  // gulp.dest() 放到哪儿
  return gulp.src('./src/lib/**/*.*').pipe(gulp.dest('./dist/lib'))
})
1
2
3
4
5
6
7
8
9
gulp任务-js代码压缩与混淆
gulp-uglify-es: 给js代码进行压缩,处理ES6的代码

gulp-rename: 重命名

安装依赖
yarn add gulp-uglify-es --save-dev 
1
配置任务
const uglify = require('gulp-uglify-es').default

gulp.task('js', function() {
  return gulp
    .src('./js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))
})
1
2
3
4
5
6
7
8
安装重命名依赖
yarn add gulp-rename -D
1
重命名配置
task('js', function() {
  return src('./js/*.js')
    .pipe(dest('./dist/js'))
    .pipe(uglify())
    .pipe(
      rename({
        // 配置重命名的后缀名
        suffix: '.min'
      })
    )
    .pipe(dest('./dist/js'))
})
1
2
3
4
5
6
7
8
9
10
11
12
gulp任务-less处理
gulp-less: 把less变成css

gulp-rename: 重命名

gulp-minify-css: 压缩css代码

安装依赖包
yarn add gulp-less -D
1
less任务
// less任务
task('less', function() {
  return src('./less/*.less')
    .pipe(less())
    .pipe(
      rename({
        extname: '.css'
      })
    )
    .pipe(dest('./dist/css'))
})
1
2
3
4
5
6
7
8
9
10
11
安装css压缩处理包
yarn add gulp-minify-css -D
1
压缩css
// less任务
task('less', function() {
  return src('./less/*.less')
    .pipe(less())
    .pipe(
      rename({
        extname: '.css'
      })
    )
    .pipe(dest('./dist/css'))
    .pipe(minifycss())
    .pipe(
      rename({
        suffix: '.min'
      })
    )
    .pipe(dest('./dist/css'))
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
gulp任务-图片压缩
gulp-imagemin: 可以对图片进行压缩

gulp-cache: 图片压缩比较耗时的一个任务, 如果每次都对所有的图片进行重新压缩,比较浪费时间, 会缓存下来所有已经压缩过的图片

安装依赖
yarn add gulp-imagemin -D
1
压缩图片的任务
task('image', function() {
  return src('./img/*')
    .pipe(imagemin())
    .pipe(dest('./dist/img'))
})
1
2
3
4
5
安装gulp-cachae
yarn add  gulp-cache -D
1
压缩图片是比较耗时的,我们可以使用gulp-cache来缓存已经压缩过的图片
task('image', function() {
  return src('./img/*')
    .pipe(cache(imagemin()))
    .pipe(dest('./dist/img'))
})
1
2
3
4
5
参考资料:https://www.cnblogs.com/yuzhongwusan/p/5417090.html

gulp任务-处理html
gulp-minify-html: 压缩html文件

gulp-html-extend: 语句当前html去导入另一个html

压缩html
yarn add gulp-minify-html -D
1
使用
// 处理html
task('html', function() {
  return src('./src/*.html')
    .pipe(minifyHtml())
    .pipe(dest('./dist'))
})
1
2
3
4
5
6
导入html
yarn add gulp-html-extend -D
1
// 处理html
task('html', function() {
  return src('./src/*.html')
    .pipe(extender())
    .pipe(minifyHtml())
    .pipe(dest('./dist'))
})
1
2
3
4
5
6
7
在页面中,如何导入html

<!-- @@include ./template/header.html -->
1
gulp任务-清空任务
安装
yarn add del -D
1
配置任务
task('clean', function() {
  return del('./dist')
})
1
2
3
gulp-任务整合series
task('build', gulp.series('clean', 'html', 'less', 'js', 'image', 'lib'))
1
gulp任务-监听文件的变化
// 实现一个,修改代码,会自动执行任务
// 监听的任务,,,,,,做一件事件,当我们修改了对应的文件,需要执行对应的任务
// gulp.watch() 监视文件
task('watch', function() {
  // 参数1:监视的文件
  // 参数2: 对应的任务, 多个任务
  watch('./src/**/*.html', series('html'))
  watch('./src/less/*.less', series('less'))
  watch('./src/js/*.js', series('js'))
  watch('./src/lib/**/*.*', series('lib'))
  watch('./src/img/*.*', series('img'))
})

gulp任务-自动刷新
安装
yarn add gulp-connect -D
蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: 帝皇彩票官网前端开发——NodeJs学习 « 帝皇彩票官网细说B端后台产品UI设计那些小结 | 帝皇彩票官网图片排版找不到灵感?送你17个实用技巧!»


蓝蓝帝皇彩票官网 http://www.bjhbys.com

  1. 帝皇彩票官网2019年9月(22)
  2. 2019年8月(63)
  3. 2019年7月(61)
  4. 2019年6月(59)
  5. 帝皇彩票官网2019年5月(32)
  6. 2019年4月(37)
  7. 2019年3月(43)
  8. 2019年2月(26)
  9. 2019年1月(45)
  10. 2018年12月(41)
  11. 2018年11月(40)
  12. 2018年10月(29)
  13. 2018年9月(40)
  14. 2018年8月(87)
  15. 2018年7月(107)
  16. 2018年6月(86)
  17. 2018年5月(110)
  18. 2018年4月(40)
  19. 帝皇彩票官网2018年3月(35)
  20. 2017年8月(35)
  21. 2017年7月(45)
  22. 2017年6月(7)
  23. 帝皇彩票官网2017年5月(27)
  24. 2017年4月(51)
  25. 2017年3月(70)
  26. 2017年2月(65)
  27. 2017年1月(69)
  28. 2016年12月(55)
  29. 2016年11月(111)
  30. 2016年10月(92)
  31. 2016年9月(53)
  32. 2016年8月(9)
  33. 2016年7月(4)
  34. 2016年6月(9)
  35. 2016年3月(19)
  36. 2016年2月(26)
  37. 2016年1月(30)
  38. 2015年12月(33)
  39. 帝皇彩票官网2015年11月(35)
  40. 2015年10月(46)
  41. 2015年9月(43)
  42. 2015年8月(40)
  43. 2015年7月(33)
  44. 2015年6月(46)
  45. 帝皇彩票官网2015年5月(58)
  46. 2015年4月(70)
  47. 2015年3月(55)
  48. 2015年2月(17)
  49. 2015年1月(33)
  50. 2014年12月(21)
  51. 帝皇彩票官网2014年11月(84)
  52. 2014年10月(94)
  53. 2014年9月(6)
  54. 2014年8月(1)
  55. 2014年7月(13)
  56. 帝皇彩票官网2014年6月(66)
  57. 2014年5月(99)
  58. 2014年4月(88)
  59. 2014年3月(102)
  60. 2014年2月(68)
  61. 2014年1月(83)
  62. 2013年12月(106)
  63. 2013年11月(112)
  64. 2013年10月(61)
  65. 2013年9月(20)
  66. 2013年7月(13)
  67. 帝皇彩票官网2013年6月(27)
  68. 帝皇彩票官网2013年5月(48)
  69. 2013年4月(39)
  70. 2013年3月(8)
  71. 2013年2月(20)
  72. 2013年1月(31)
  73. 2012年12月(33)
  74. 2012年11月(31)
  75. 2012年10月(23)
  76. 2012年9月(8)
  77. 2012年7月(14)
  78. 2012年6月(15)
  79. 2012年5月(31)
  80. 2012年4月(24)
  81. 2012年2月(4)
  82. 2012年1月(8)
  83. 2011年12月(35)
  84. 2011年11月(32)
  85. 2011年10月(13)
  86. 2011年8月(1)
  87. 2011年6月(1)
订阅Rss
博发彩票开奖 帝皇彩票 吉利彩票开奖 湖南快乐十分 桔子彩票登陆 海南4+1 山东群英会app 状元彩票计划 博发彩票开户 博发彩票APP下载