從開(kāi)發(fā)一款基于Vue技術(shù)棧的全棧熱重載生產(chǎn)環(huán)境腳手架，我學(xué)到了什么？
瀏覽文章前
這一期，我分享給大家三點(diǎn)看源碼的小技巧，這也是從別的大佬那總結(jié)的。
1.被反復(fù)使用的代碼
這樣的代碼是一個(gè)軟件的重點(diǎn)函數(shù)，一個(gè)大神的寫(xiě)法有很多精華值得學(xué)習(xí)。
2.穿越時(shí)間的代碼
如果一段代碼10年甚至15年，都還在使用。說(shuō)明它的設(shè)計(jì)思想一定很棒。
3.好調(diào)試的代碼
一個(gè)程序的代碼很容易就調(diào)試成功，說(shuō)明作者的項(xiàng)目結(jié)構(gòu)能力很強(qiáng)，值得學(xué)習(xí)。
前言
今天，我們來(lái)搞一個(gè)新東西，名字叫基于Vue技術(shù)棧的全棧熱重載生產(chǎn)環(huán)境腳手架。實(shí)話說(shuō)，這個(gè)名字我想了很久。最終，還是以這個(gè)名字作為文章標(biāo)題。我先拆分解釋下：全棧的意思是支持前后端;熱重載這個(gè)名詞相信大家很熟悉，就是頁(yè)面每次改動(dòng)，不需要手動(dòng)去刷新，可自動(dòng)刷新;生產(chǎn)環(huán)境這里你可以理解成線上環(huán)境，用戶使用的環(huán)境。
緣起
為什么會(huì)想到開(kāi)發(fā)這樣的一款項(xiàng)目呢?我們平時(shí)可能更多地使用VueCLI或者Vite來(lái)開(kāi)發(fā)Vue項(xiàng)目，但是如果就單純開(kāi)發(fā)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，未免有點(diǎn)小題大作了。
這時(shí)，我們可能會(huì)用到Vue的生產(chǎn)環(huán)境版本。但是，這樣的話我們就不能用VueCLI、Vite那樣的熱重載功能，就需要不停的刷新網(wǎng)頁(yè)。如果在編輯器中對(duì)html文件增加或刪除了元素，或者是在css文件中修改了某個(gè)元素的某個(gè)樣式，然后想在瀏覽器中看到效果，通常的步驟是：把窗口切換到瀏覽器，然后按鍵盤(pán)上的F5刷新頁(yè)面。在制作頁(yè)面的時(shí)候這個(gè)動(dòng)作可能會(huì)重復(fù)很多次。我們開(kāi)發(fā)效率就大大地減少了。
所以，我們有必要開(kāi)發(fā)一款可熱重載的生產(chǎn)環(huán)境腳手架。如果增加模擬數(shù)據(jù)接口服務(wù)，那就更完美了。光說(shuō)不練假把式，我們就開(kāi)發(fā)一款基于Vue技術(shù)棧的全棧熱重載生產(chǎn)環(huán)境腳手架。
實(shí)戰(zhàn)
一、初始化項(xiàng)目
首先，我們建一個(gè)空文件夾，名字可以叫g(shù)ulp-vue-cli，這就是項(xiàng)目根文件夾。相信聰明的小伙伴可以看出，我們今天的主角是gulp。建完項(xiàng)目根文件夾之后，我們會(huì)使用命令快速生成package.json文件。
- npm init -y
二、創(chuàng)建前端項(xiàng)目與后端項(xiàng)目
下一步，我們會(huì)在創(chuàng)建好的項(xiàng)目根文件夾內(nèi)創(chuàng)建一個(gè)前端項(xiàng)目文件夾，名字可以叫src。另外，后端項(xiàng)目文件夾名字叫server。
下一步，我們先在src文件夾下創(chuàng)建一個(gè)前端項(xiàng)目，以下為目錄詳情：
- css ---存放樣式目錄
- js ---存放邏輯文件目錄
- imgs ---存放圖片目錄
- index.html ---項(xiàng)目主頁(yè)面
index.html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Simple Vue</title>
- <link rel="icon" href="/imgs/favicon.ico" />
- <link rel="stylesheet" href="/css/index.css" />
- </head>
- <body>
- <div id="app">
- <img src="/imgs/logo.png" alt="" />
- <p class="mes">{{ message }}</p>
- <p class="author">{{txt}}</p>
- <p class="status">{{status}}</p>
- <button @click="sendData">send</button>
- <p>{{resTxt}}</p>
- </div>
- </body>
- <script src="/js/vue.js"></script>
- <script type="module">
- import {addTxt} from './js/utils.js';
- const app = new Vue({
- el: "#app",
- data: {
- message: "Hello Simple Vue!",
- resTxt:"",
- status:"",
- txt:addTxt()
- },
- methods: {
- sendData() {
- fetch("http://localhost:3000/send/", {
- method: "POST",
- headers: {
- "Content-Type": "application/x-www-form-urlencoded",
- },
- body: `username=maomincoding&url=https://www.maomin.club`,
- })
- .then((response) => response.json())
- .then((response) => {
- this.resTxt = response;
- })
- .catch((err) => {
- console.error(err);
- });
- },
- },
- mounted() {
- fetch("http://localhost:3000/mes/", {
- method: "GET",
- headers: {
- "Content-Type": "application/x-www-form-urlencoded",
- },
- })
- .then((response) => response.json())
- .then((response) => {
- this.status = response;
- })
- .catch((err) => {
- console.error(err);
- });
- },
- });
- </script>
- </html>
這個(gè)頁(yè)面很簡(jiǎn)單，主要使用Vue.js渲染文本以及調(diào)用接口后渲染文本。調(diào)用接口的方法我們這里使用fetch方法，使用詳情大家可以到MDN網(wǎng)址查看：
- https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
建立完前端項(xiàng)目了，我們下一步就開(kāi)始建立后端項(xiàng)目，我們這里使用的是Node.js技術(shù)棧。server文件夾下只有一個(gè)主文件app.js。
app.js
- const express = require('express');
- const bodyParser = require('body-parser')
- const app = express();
- app.use(express.static("./src"));
- app.use(bodyParser.urlencoded({ extended: true }));
- app.use(bodyParser.json());
- // 跨域
- app.all('*', function (req, res, next) {
- res.header("Access-Control-Allow-Origin", "*");
- res.header("Access-Control-Allow-Headers", "X-Requested-With");
- res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
- res.header("X-Powered-By", ' 3.2.1');
- res.header("Content-Type", "application/json;charset=utf-8");
- next();
- });
- //自定義接口
- app.get("/mes", function (request, response) {
- response.send({
- status:"success",
- mes:"渲染頁(yè)面成功！"
- });
- })
- app.post("/send",function(request,response){
- response.send(request.body); // echo the result back
- })
- app.listen(3000, function () {
- console.log("服務(wù)器運(yùn)行中");
- });
這里，我們也簡(jiǎn)單地介紹一下里面涉及的知識(shí)點(diǎn)。express相信接觸Node的伙伴們一定知道。Express 是一個(gè)保持最小規(guī)模的靈活的Node.js，Web 應(yīng)用程序開(kāi)發(fā)框架，為 Web 和移動(dòng)應(yīng)用程序提供一組強(qiáng)大的功能。這里，我們主要使用它創(chuàng)建幾個(gè)API接口，供前臺(tái)調(diào)用。body-parser是在處理程序之前在中間件中解析傳入的請(qǐng)求體，可以在request.body中獲取從前臺(tái)傳來(lái)的數(shù)據(jù)。
在此之前，你需要安裝以下兩個(gè)依賴：
- npm install express
- npm install body-parser -D
三、開(kāi)發(fā)前后端熱重載功能
前后端項(xiàng)目我們已經(jīng)建立完成，下面我們將把重點(diǎn)放到如何開(kāi)發(fā)熱重載功能上。
我會(huì)先在項(xiàng)目根目錄下創(chuàng)建一個(gè)gulpfile.js文件。然后，我會(huì)列出我們需要了解的知識(shí)點(diǎn)有哪些。
- gulp
- browser-sync
- gulp-nodemon
gulp
- gulp是基于Node.js的前端自動(dòng)化構(gòu)建工具，能自動(dòng)化地完成 JavaScript/sass/html/image/css 等文件的的測(cè)試、檢查、合并、壓縮混淆、格式化、瀏覽器自動(dòng)刷新、部署文件生成等操作，同時(shí)可以對(duì)文件進(jìn)行監(jiān)聽(tīng)，如果文件有改動(dòng)，可以自動(dòng)處理生成新的文件。所以gulp解決了開(kāi)發(fā)效率(修改代碼后自動(dòng)更新頁(yè)面)、資源整合(代碼的壓縮合并)、代碼質(zhì)量(代碼的檢查 自動(dòng)化測(cè)試)、代碼轉(zhuǎn)換(es6-->es5)等問(wèn)題
這里，我們需要知道gulp是怎樣創(chuàng)建任務(wù)的。
- const gulp = require('gulp');
- // 創(chuàng)建任務(wù)
- // 第一個(gè)參數(shù): 任務(wù)名
- // 第二個(gè)參數(shù): 回調(diào)函數(shù),當(dāng)我們執(zhí)行任務(wù)時(shí)就會(huì)執(zhí)行這個(gè)函數(shù)
- gulp.task('test', function(){
- console.log('test');
- })
- //執(zhí)行任務(wù): gulp 任務(wù)名
- gulp test
browser-sync
這里，我們可以重點(diǎn)介紹下它，它就是我們今天要找的主角。
在找它之前，我也找到其他可以實(shí)現(xiàn)自動(dòng)刷新瀏覽器的插件，如：LiveReload，它也可以自動(dòng)刷新頁(yè)面，實(shí)時(shí)預(yù)覽html效果。但是，我為什么沒(méi)用LiveReload呢?最痛心的一點(diǎn)是你需要在瀏覽器上安裝LiveReload插件，另外在本地你也得安裝一個(gè)LiveReload軟件。如果你是用的是VScode編輯器，需要在插件中心安裝LiveReload插件。默認(rèn)情況下,瀏覽器和編輯器并不會(huì)自動(dòng)為你激活LiveReload的功能，你需要手動(dòng)配置一些東西。所以這么麻煩，干脆看看還有沒(méi)有別的解決方案。
最終，我找到了它——browser-sync，以下是官方對(duì)它的解釋：
- Browsersync能讓瀏覽器實(shí)時(shí)、快速響應(yīng)您的文件更改(html、js、css、sass、less等)并自動(dòng)刷新頁(yè)面。更重要的是 Browsersync可以同時(shí)在PC、平板、手機(jī)等設(shè)備下進(jìn)項(xiàng)調(diào)試。您可以想象一下：“假設(shè)您的桌子上有pc、ipad、iphone、android等設(shè)備，同時(shí)打開(kāi)了您需要調(diào)試的頁(yè)面，當(dāng)您使用browsersync后，您的任何一次代碼保存，以上的設(shè)備都會(huì)同時(shí)顯示您的改動(dòng)”。無(wú)論您是前端還是后端工程師，使用它將提高您30%的工作效率。
當(dāng)然，學(xué)習(xí)它之前，你需要注意browser-sync是基于Node.js的, 是一個(gè)Node模塊， 如果您想要快速使用它，也許您需要先安裝一下Node.js。
然后，你可以全局安裝它。
- npm install -g browser-sync
也可以在本地項(xiàng)目下安裝它。
- npm install --save-dev browser-sync
如果你想更加深度地了解它，可以在瀏覽器上搜索以下網(wǎng)址：
- http://www.browsersync.cn/docs/
browser-sync可以單獨(dú)使用，也可以集成到gulp和grunt這樣的構(gòu)建工具中使用，在Node.js項(xiàng)目中還能結(jié)合gulp-nodemon實(shí)現(xiàn)全棧的自動(dòng)刷新。
gulp-nodemon
nodemon是一款非常實(shí)用的工具，用來(lái)監(jiān)控你 Node.js 源代碼的任何變化和自動(dòng)重啟你的服務(wù)器。 gulp-nodemon幾乎和普通gulp-nodemon完全一樣，但它是為執(zhí)行Gulp任務(wù)而設(shè)計(jì)的。
介紹完我們需要了解的知識(shí)點(diǎn)之后，我們就深入到gulpfile.js文件中，看看是如何實(shí)現(xiàn)前后端熱重載的。
- const gulp = require('gulp');
- const browserSync = require('browser-sync').create();
- const nodemon = require('gulp-nodemon');
- gulp.task('server', function() {
- nodemon({
- script: 'server/app.js',
- ignore: ["gulpfile.js", "node_modules/"],
- env: {
- 'NODE_ENV': 'development'
- }
- }).on('start', function() {
- browserSync.init({
- proxy: 'http://localhost:3000',
- files: ["src/**"],
- port:8080
- }, function() {
- console.log("browser refreshed.");
- });
- });
- });
在此之前，你需要安裝以下三個(gè)依賴：
- npm install gulp -D
- npm install browser-sync -D
- npm install gulp-nodemon -D
安裝完依賴之后，我們就來(lái)解讀下以上代碼。
require('browser-sync').create();這行代碼的意思是創(chuàng)建browser-sync實(shí)例，并允許您創(chuàng)建多個(gè)服務(wù)器或代理。
gulp.task()代碼段作用是創(chuàng)建任務(wù)。
- // 創(chuàng)建任務(wù)
- // 第一個(gè)參數(shù): 任務(wù)名
- // 第二個(gè)參數(shù): 回調(diào)函數(shù),當(dāng)我們執(zhí)行任務(wù)時(shí)就會(huì)執(zhí)行這個(gè)函數(shù)
- gulp.task('test', function(){
- console.log('test');
- })
nodemon中是一個(gè)配置對(duì)象。
- script：指向服務(wù)器文件地址。
- ignore：忽略部分對(duì)程序運(yùn)行無(wú)影響的文件的改動(dòng)，nodemon只監(jiān)視js文件，可用ext項(xiàng)來(lái)擴(kuò)展別的文件類型。
- env：運(yùn)行環(huán)境 development 是開(kāi)發(fā)環(huán)境，production 是生產(chǎn)環(huán)境。
這里，我們通過(guò)gulp-nodemon的start事件來(lái)觸發(fā)browser-sync的啟動(dòng)。
browserSync.init()這行代碼的init方法中，第一個(gè)參數(shù)我們需要傳入一個(gè)配置對(duì)象，第二個(gè)參數(shù)我們需要定義一個(gè)回調(diào)方法。
- proxy：代理服務(wù)端的接口地址。
- files：需要監(jiān)聽(tīng)的文件目錄。
- port：端口號(hào)。
這里需要注意的是，如果是修改了服務(wù)端的js文件，會(huì)先通過(guò)nodemon重啟應(yīng)用，這時(shí)瀏覽器不會(huì)刷新，要再保存一下修改的文件，browser-sync才會(huì)顯示出修改后的效果。
瀏覽效果
至此，我們的項(xiàng)目就大功告成了，在瀏覽之前呢!我們需要這樣一個(gè)操作。打開(kāi)package.json文件。定義一個(gè)啟動(dòng)命令，方便我們每次啟動(dòng)。
- "scripts": {
- "dev": "gulp server"
- },
之后，我們就可以這樣啟動(dòng)項(xiàng)目了。
- npm run dev
在瀏覽器上。
打開(kāi)成功，現(xiàn)在我們改動(dòng)下代碼，看看是否可以熱重載。
測(cè)試成功，這樣我們就安心地開(kāi)發(fā)自己的代碼了，效率自然就提高了。之前那樣不停地F5，有沒(méi)有覺(jué)得這個(gè)動(dòng)作對(duì)程序員來(lái)說(shuō)很沒(méi)有創(chuàng)造力呢?現(xiàn)在可以減輕左手和F5鍵的負(fù)擔(dān)了。
結(jié)語(yǔ)
謝謝閱讀，希望沒(méi)有浪費(fèi)你的時(shí)間。如果覺(jué)得有幫助!
源碼地址：
https://gitee.com/maomincoding/gulp-vue-cli
