2019-6-20 seo達人
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
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
藍藍設計( ssll180.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。