使用npm-scripts發布Github Pages

cloud 發布于2019-08-26 11:34 / 930人閱讀

摘要：使用發布將項目打包后部署到上是常見需求。需要使用到的庫。關于的知識，參考使用指南用打造超溜的前端工作流需付費修改此時，雖然可以發布，但所有相關的靜態文件的目錄都是指向的，而實際的靜態文件的位置是在中。

使用npm-scripts發布Github Pages

將項目打包后部署到GitHub Pages 上是常見需求。
這里總結下通過npm-srcrips將項目發布到gh-pages分支。需要使用到gh-pages的庫。

需要用到的環境

node

npm 或者yarn

本地項目，需要通過create-react-app創建的React或者vue-cli創建的Vue項目

gh-pages

Github賬戶

過程 1. 在 GitHub 上創建與本地項目同名的遠程倉庫 2. 創建本地項目

React: create-react-app

$ yarn global add create-react-app
$ create-react-app my-app

若是使用npm5.2+版本

$ npx create-react-app my-app
$ cd my-app
$ yarn start

Vue: vue-cli
@vue/cli 3.0

$ yarn global add @vue/cli
$ vue create my-app

vue-cli@2.x

$ yarn global add @vue/cli-init
$ vue init webpack my-app

然后運行項目：

$ cd my-app
$ yarn install 
$ yarn start

3.將本地項目 push 到遠程：

$ git init
$ git add .
$ git commit -m "create app"
$ git remote add origin 
$ git push -u origin master

4.添加npm-scripts：

Vue:
在package.json中添加

"scripts": {
    "pregh": "npm run build",
    "gh": "gh-pages -d dist"
}

React:
在package.json中添加

"scripts": {
    "pregh": "npm run build",
    "gh": "gh-pages -d dist"
}

Vue在build時生成的目錄是dist，而React在build時生成的目錄時build。
gh是自定義的腳本名稱，你也可以叫gh-deploy等等。
想要在腳本執行之前還另外執行其他命令，就在自定義腳本前添加預處理鉤子，形式是pre加gh腳本名稱。
關于npm-scripts的知識，參考：
npm scripts 使用指南
用 npm script 打造超溜的前端工作流（需付費）

5.修改publickPath

此時，雖然可以發布，但所有相關的靜態文件的目錄都是指向https://.github.io的，而實際的靜態文件的位置是在https://.github.io/中。
Vue:
在npm build之前，修改config/index.js的配置：

module.exports = {
    ...
    build: {
        ...
        assetsPublicPath: "", // 此處原來是assetsPublicPath: "/"
        ...
    }

React:
與Vue不同，create-react-app是將所有scripts文件隱藏的。想要將講臺文件指向正確的目錄，是通過在package.json中添加homepage選項。

{
    "author": ...,
    "homepage": "https://.github.io/",
    ...
    "scripts": { ... }
}

6.生成生產版本，并部署到Github Page

$ npm run gh
# or
$ yarn run gh

查看遠程的gh-pages分支，此時分支下應包含一個index.html和其他靜態文件（如static目錄）。
之后就可以通過https://.github.io/訪問應用程序了。

相關參考：
React的github pages 發布，Deploying a React App* to GitHub Pages
如何在 GitHub Pages 上部署 vue-cli 項目

云服務器 GPU云服務器 github-pages Pages Pages管理 Pages的方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107162.html

webpack多頁應用架構系列（十四）：No復制粘貼！多項目共用基礎設施

摘要：原文地址如果您對本系列文章感興趣，歡迎關注訂閱這里前言本文介紹如何在多項目間共用同一套基礎設施，又或是某種層次的框架。而以上所述的種種，就構成了一套完整的解決方案，也稱基礎設施。下面就以從到的改造過程來介紹如何實現多項目共用基礎設施。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190...

cyrils 2019-08-22 10:42 評論0 收藏0
nps-cli 讓你在命令行即可方便的查看、設置和刪除 npm-scripts 命令

摘要：提供非常方便的功能，讓我們在命令行即可執行如等預定義的命令。所以我開源了庫，讓你在命令行即可方便的管理，通過即可安裝提供個命令列出當前的命令在中設置一個命令刪除中對應的命令 npm 提供非常方便的 npm-scripts 功能，讓我們在命令行即可執行如 npm start 等預定義的命令。但是定義命令卻稍顯麻煩，需要打開 package.json 文件，找到 scripts 字段，增加...

trilever 2019-08-21 16:01 評論0 收藏0
npm-scripts 在 windows 下的兼容問題

摘要：今天有開發的同事問我說，在本機開發的上運行構建命令報錯，不知道怎么回事兒。比如我們直接在命令行下執行都是沒問題的，但結合到上，卻運行失敗。今天有開發的同事問我說，在本機開發的 windows 上運行構建命令報錯，不知道怎么回事兒。作為一名 Mac 用戶，當然也不知道為什么啦，過去看看，果然有錯誤。我們的開發構建命令是基于 npm 的 scripts，其實就是很簡單的一句話： { ...

Acceml 2019-08-22 10:47 評論0 收藏0
一個命令完成[打包+同步七牛cdn+上傳服務器]

摘要：實現一個命令完成打包同步上傳服務器說明由于我們用的七牛云存儲，所以也是走的七牛，所以并不適用于其他的，但是思路可以借鑒打包打包目前我這邊用的是，網上已經有很多文章了，這里就不作過多闡述了，只是說一下這個參數，如果要做同步肯定是要配置這個參 webpack+gulp+qshell+npm-scripts實現一個命令完成[打包+同步cdn+上傳服務器] 說明由于我們用的七牛云存儲，所以c...

張春雷 2019-08-26 11:41 評論0 收藏0