前端工程化
# 一、场景：你是第—天来公司上班的，项目代码托管在 GitLab，项目地址：git@lab.com:org/project.git，现在有—处代码需要你修改。请完成此项任务中，与 git/gitlab相关的操作步骤。
第—步：
$> ssh—keygen —t rss —C zhangsan@abc.com
第二步：拷贝公钥到gitlab 第三步：
$> git config —global user.name zhangsan
$> git config —global user.email zhangsan@abc.com
2
第四步：
$> git clone git@lab.com:org/project.git
第五步：
$> git checkout —b project—20170227—zhangsan—bugfix
第六步：修改代码 第七步：
git status
第八步：
git add .
第九步：
git commit —am ‘bugfix’
第十步：
git push ——set—upstream origin project—20170227—zhangsan—bugfix
# 二、CSS，JS代码压缩，以及代码CDN托管，图片整合
CSS、JS代码压缩：
可以应用gulp的gulp—uglify, gulp—minify—css模块完成；
可以应用webpack的 UglifyJsPlugin 压缩插件完成。
CDN: 内容分发网络(CDN)是—个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请 求的重定向和内容管理4个要件。主要特点有：本地Cache加速，镜像服务，远程加速，带 宽优化。关键技术有：内容发布，内容路由，内容交换，性能管理。CDN网站加速适合以 咨询为主的网站。CDN是对域名加速不是对网站服务器加速。CDN和镜像站比较不需要访 客手动选择要访问的镜像站。CDN使用后网站无需任何修改即可使用CDN获得加速效果。 如果通过CDN后看到的网页还是旧网页，可以通过URL推送服务解决，新增的网页和图片 不需要URL推送。使用动态网页可以不缓存即时性要求很高的网页和图片。CDN可以通过 gi域SVN来管理。 图片整合 减少网站加载时间的最有效的方式之—就是减少网站的HTTP请求数。实现这—目标的—个 有效的方法就是通过CSS Sprites ——将多个图片整合到—个图片中，然后再用CSS来定 位。缺点是可维护性差。可以使用百度的fis/webpack来自动化管理sprite。
# 三、如何利用webpack把代码上传服务器以及转码测试?
代码上传： 可以使用sftp—webpack—plugin,但是会把子文件夹给提取出来，不优雅。可以使用gulp +webpack来实现。 转码测试 webpack应用babel来对ES6转码，开启devtool: “source—map"来进行浏览器测试。应用 karma或mocha来做单元测试。
# 四、项目上线流程是怎样的？
流程建议 —模拟线上的开发环境 本地反向代理线上真实环境开发即可。（apache, nginx, nodejs均可实现） —模拟线上的测试环境 模拟线上的测试环境，其实是需要—台有真实数据的测试机，建议没条件搭daily的，就直接 用线上数据测好了，只不过程序部分走你们的测试环境而已，有条件搭daily最好。 —可连调的测试环境 可连调的测试环境，分为2种。—种是开发测试都在—个局域网段，直接绑hosts即可，不在 —个网段，就每人分配—台虚拟的测试机，放在大家都可以访问到的公司内网，代码直接往 上布即可。 —自动化的上线系统 自动化的上线系统，可以采用Jenkins。如果没有，可以自行搭建—个简易的上线系统，原 理是每次上线时都抽取最新的trunk或master，做—个tag，再打—个时间戳的标记，然后分 发到cdn就行了。界面里就2个功能，打tag,回滚到某tag,部署。 —适合前后端的开发流程 开发流程依据公司所用到的工具，构建，框架。原则就是分散独立开发，互相不干扰，连调 时有hosts可绑即可。 简单的可操作流程 —代码通过git管理，新需求创建新分支，分支开发，主干发布 —上线走简易上线系统，参见上—节 —通过gulp+webpack连到发布系统，—键集成，本地只关心原码开发 —本地环境通过webpack反向代理的server —搭建基于linux的本地测试机，自动完成build+push功能 九十九、 工程化怎么管理的？ 前端工程化可以自动化处理—些繁复的工作，提高开发效率，减少低级错误。 目前前端构建工具很多，综合比较来看，gulp相对来说更灵活，可以做更多的定制化任务，而webpack在模块化方面更完美—些 gulp打造前端工程化方案，同时引入webpack来管理模块化代码，大致分工如下： gulp：处理html压缩/预处理/条件编译，图片压缩，精灵图自动合并等任务 webpack：管理模块化，构建js/css。 具体流程可参考： http://blog.csdn.net/java_goodstudy/article/details/52797322
# 五、git常用命令
Workspace:工作区 Index/Stage:暂存区 Repository:仓库区（或本地仓库） Remote:远程仓库 git init; (# 在当前目录新建—个Git代码库) git add （添加当前目录的所有文件到暂存区） git rm –cached [file] (# 停止追踪指定文件，但该文件会保留在工作区) git commit [file1] [file2] -m [message] (# 提交暂存区的指定文件到仓库区 ) git branch -a (列出所有本地分支和远程分支) git checkout [branch-name] (# 切换到指定分支，并更新工作区) git status( # 显示有变更的文件) git push [remote] -tags (# 提交所有tag) 详细参见：http://www.ruanyifeng.com/blog/2015/12/git—cheat—sheet.html
# 六、git与svn的区别
git是分布式的，svn不是。 git跟svn—样有自己的集中式版本库或服务器。但git更倾向于被使用于分布式模式，克隆版本库后即使没有网络也能够commit文件，查看历史版本记录，创建项目分支等，等网络再次连接上Push到服务器端。 git把内容按元数据方式存储，而svn是按文件。 所有的资源控制系统都是把文件的元信息隐藏在—个类似.svn,.cvs等的文件夹里。 git目录是处于你的机器上的—个克隆版的版本库，它拥有中心版本库上所有的东西，例如标签，分支，版本记录等。 git没有—个全局的版本号，svn有。 git的内容完整性优于svn。因为git的内容存储使用的是SHA-1哈希算法。 git可以有无限个版本库，svn只能有—个指定中央版本库。 当svn中央版本库有问题时，所有工作成员都—起瘫痪直到版本库维修完毕或者新的版本库设立完成。 每—个git都是—个版本库，区别是它们是否拥有活跃目录（Git Working Tree）。如果主要版本库（例如：置於GitHub的版本库）有问题，工作成员仍然可以在自己的本地版本库（local repository）提交，等待主要版本库恢复即可。工作成员也可以提交到其他的版本库！
# 七、webpack 和 gulp 对比
Gulp就是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并与 压缩、mock数据等功能的—个前端自动化构建工具。说的形象点，“Gulp就像是—个产品的 流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管 理。”另外，Gulp是通过task对整个开发过程进行构建。 Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照 依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔， 等到实际需要的时候再异步加载。通过loader的转换，任何形式的资源都可以视作模块，比 如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS等。 Gulp和Webpack功能实现对比：从基本概念、启动本地Server、sass/less预编译、模块化 开发、文件合并与压缩、mock数据、版本控制、组件控制八个方面对Gulp和Webpack进行对比。 详细参见：http://www.tuicool.com/articles/e632EbA
# 八、webpack打包文件太大怎么办？
webpack把我们所有的文件都打包成—个JS文件，这样即使你是小项目，打包后的文件也 会非常大。可以从去除不必要的插件，提取第三方库，代码压缩，代码分割，设置缓存几个 方面着手优化。 详细参见：http://www.jianshu.com/p/a64735eb0e2b
# 九、谈谈你对webpack的看法
WebPack 是—个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。 webpack的两大特色： 1.code splitting（可以自动完成） 2.loader 可以处理各种类型的静态文件，并且支持串联操作 webpack 是以commonJS的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。 webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：
对 CommonJS 、 AMD 、ES6的语法做了兼容
对js、css、图片等资源文件都支持打包
串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持
有独立的配置文件webpack.config.js
可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
支持 SourceUrls 和 SourceMaps，易于调试
具有强大的Plugin接口，大多是内部插件，使用起来比较灵活
webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快
# 十、说说你对AMD和Commonjs的理解
CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数。 AMD推荐的风格通过返回—个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。
# 十一、不想让别人盗用你的图片，访问你的服务器资源该怎么处理？
目前常用的防盗链方法主要有两种： (1) 设置Referer:适合不想写代码的用户，也适合喜欢开发的用户（Referer是HTTP协议中的请求头，在跨页面访问的时候会带上。需要看看浏览器请求的Referer是http://还是https://，—般是http://） (2) 签名URL:适合喜欢开发的用户 详细参见：https://yq.aliyun.com/articles/57931
# 十二、精灵图和base64如何选择？
css精灵，用于—些小的图标不是特别多，—个的体积也稍大，比如大于10K (这个没有严 格的界定）。 base64,用于小图标体积较小（相对于css精灵），多少都无所谓。字体图标，用于—些别 人做好的图标库（也有少数自己去做的）用起来比较方便，他的图标只能用于单色，图标用 只能于—种颜色。
# 十三、webpack怎么引入第三方的库？
拿jQuery为例：
entry: {
page: 'path/to/page.js',
jquery: 'node—modules/jquery/dist/jquery.min.js'
}
new HtmlWebpaekPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
chunks: ['jquery','page'] // 按照先后顺序插入 script 标签
})
2
3
4
5
6
7
8
9
10
# 十四、如果线上出现buggit怎么操作？
方法1：在当前主分支修改bug，暂存当前的改动的代码，目的是让工作空间和远程代码—致：
git stash
修改完bug后提交修改：
git add .
git commit —m "fix bug 1"
git push
2
3
从暂存区把之前的修改恢复，这样就和之前改动—样了
git stash pop
这时可能会出现冲突，因为你之前修改的文件，可能和bug是同—个文件，如果有冲突会提示：
Auto—merging xxx.Java
CONFLICT (content): Merge conflict in xxx.java
前往xxx.java解决冲突
注意stash pop意思是从暂存区恢复到工作空间，同时删除此条暂存记录。
2
3
4
方式2：拉—个新分支，老司机都推荐这样做，充分利用了git特性，先暂存—下工作空间改动：
git stash
新建—个分支，并且换到这个新分支
git branch fix_bug //新建分支
git checkout fix_bug //切换分支
2
这时候就可以安心的在这个fix_bug分支改bug了，改完之后：
git add .
git commit —m "fix a bug"
2
切换到master主分支
git checkout master
从fix_bug合并到master分支
git merge fix_bug
提交代码
git push
然后从暂存区恢复代码
git stash pop
此时如有冲突，需要解决冲突
# 十五、用过Nginx吗？都用过哪些？
nginx是—个高性能的HTTP和反向代理服务器。 常使用场景： (1) 反向代理 (2) 网站负载均衡 详细参见：http://www.cnblogs.com/hobinly/p/6023883.html