在nodejs日益普及的背景下，前端工程的发展可谓日新月异。编写构建和打包等日常任务的脚本已经成为常态。不用说，webpack和gulp已经家喻户晓，持续集成/持续交付/持续部署越来越受到各个前端团队的关注。业界也有很多成熟的概念或解决方案像Hudson、Jenkins、TravisCI、CircleCI、DevOps、githook。但是，对于小白来说，如果直接上手这些内容，很容易混淆概念，陷入迷茫。如果我为了使用Jenkins而使用Jenkins，那不是我做事的风格，我必须弄清楚这项技术能给我带来什么。所以我干脆回归问题本质，从最简单的工作流程入手，先解决人工部署的效率问题。上面说了这么多废话，纯粹是为了凑字数。顺便说一句，本文内容比较简单，不适合已经完善工作流程的同学。自动构建不是本文的重点，一篇短文也说不清楚。这里简单介绍一下。构建工具使用主流构建工具，如webpack、gulp、rollup等。构建目标以脚本形式组织代码检查、编译、压缩、混淆、资源处理、devServer等工作流事务。手动部署踩过的坑我也尝试过两种手动部署的方式。搬砖方式，将建好的文件夹通过xftp传输到服务器/usr/share/nginx/html目录下。用git分支管理建好的文件夹，push到远程仓库，然后在linux服务器上拉取这部分代码。第一种方式显然属于刀耕火种的方式，不过我已经用了很久了。唉，没办法，只能因为业务的关系，挤出时间优化工作流程。第二种方法我私底下也用过。后来想了想，好像可以用githook来改造优化，也是实现自动化部署的好方法。有兴趣的同学可以试试githook。写一个自动部署的脚本首先写一个自动构建部署的脚本，主要包括剪git分支、拉取最新代码、构建打包、传输文件到服务器等步骤。scp命令用于Linux之间复制文件和目录#!/bin/bashgitcheckoutdevelopgitpullnpmrunbuild:testscp-r./dist/。username@162.81.49.85:/usr/share/nginx/html/projectname/ps:ip是我随便改的，不要攻击我。但是，我发现每次使用部署脚本时都必须输入密码很烦人。虽然ssh认证讨厌输入密码，但是密码是安全的保证。如果不输入密码，则只能通过ssh安全访问。首先是在工作计算机的~/.ssh目录中创建一个密钥对。ssh-keygen-trsa根据个人需要修改密钥对的文件名，输入密码时回车，表示不需要密码，然后公钥必须传到服务器scp~/.ssh/id_rsa.pubusername@162.81.49.85:/home/username/.ssh/authorized_keys如果服务器上已经存在authorized_keys文件，可以直接修改服务器上的authorized_keys文件，在末尾添加自己的id_rsa.pub内容的文件。然后我们修改部署脚本，使用ssh认证方式将文件传输到linux服务器。#!/bin/bashgitcheckoutdevelopnpmrunbuild:testscp-i~/.ssh/id_rsa-r./dist/.username@162.81.49.85:/usr/share/nginx/html/projectname/scp-i参数指定用于传输的密钥文件，这样就可以通过ssh安全访问，而不必每次都输入密码。-r参数是递归的，就是递归复制整个目录。最后我们可以修改package.json，通过npmscripts:{"deploy:test":"deploy-test.sh"}用vscode的npmscripts快捷方式执行sh"scripts"，用起来很舒服。注意，如果linux文件权限不够，可能会报错。不要忘记给authorized_keys文件赋予权限，拥有者可以读写。chmod600authorized_keysOK，按下deploy:test，静静等待一会儿。这时候别忘了扭颈压腰。程序员还是要注意身体，善待自己。随着bash窗口自动关闭，部署工作告一段落。lastbutnotleast这里要考虑的另一个问题是，在部署过程中会不会造成用户访问问题？答案是会影响用户访问。比如在执行部署脚本的过程中，index.html已经被替换，正在部署静态资源。此时用户刚进入网站，但新建的index.html无法访问新建的静态资源，网页显示白屏错误。解决方法是先上传静态资源，再上传页面。因为静态资源是通过webpack构建后用hash值构建的，先上传静态资源不会影响原来的版本，所以我们需要优化部署脚本，分解传输过程。头疼的是scp命令不能忽略文件，有点麻烦。如果打包后dist根目录下的文件不多，可以考虑手动枚举，安排传输顺序。例如：#!/bin/bashgitcheckoutdevelopgitpullnpmrunbuild:testscp-i~/.ssh/id_rsa-r./test/staticusername@162.81.49.85:/usr/share/nginx/html/projectname/scp-我~/.ssh/id_rsa./test/favicon.icousername@162.81.49.85:/usr/share/nginx/html/projectname/favicon.icoscp-i~/.ssh/id_rsa./test/element-icons。ttfusername@162.81.49.85:/usr/share/nginx/html/projectname/element-icons.ttfscp-i~/.ssh/id_rsa./test/element-icons.woffusername@162.81.49.85:/usr/share/nginx/html/projectname/element-icons.woffscp-i~/.ssh/id_rsa./test/index.htmlusername@162.81.49.85:/usr/share/nginx/html/projectname/index.html如果你认为这很傻，所以你可以考虑rsync，它可以通过--exclude忽略文件。这种情况下，理论上只需要写两条传输命令即可，不需要考虑后续构建中可能加入的新内容。不过在windows和linux之间使用rsync还是比较复杂的，留给大家自己去探索吧。我是创业公司的小前端负责人图思。每天还在为没完没了的业务代码发愁。我在打磨产品的道路上沉淀技术，探索成长路线。如果你和我一样，也在思考自己的技术成长和价值，欢迎加我微信交流讨论，微信IDice_lloly。我会在公众号猿出道和小程序土司博客同步博客内容，快来撩我！
