使用npm-scripts发布Github Pages

cloud 发布于2019-08-26 11:34 / 899人阅读

摘要：使用发布将项目打包后部署到上是常见需求。需要使用到的库。关于的知识，参考使用指南用打造超溜的前端工作流需付费修改此时，虽然可以发布，但所有相关的静态文件的目录都是指向的，而实际的静态文件的位置是在中。

使用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的方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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