无聊的切图--项目搭建与环境配置

maybe_009 发布于2019-04-23 11:55 / 734人阅读

摘要：又开始公司的新项目了。。。环境搭建环境搭建一个好的本地环境，直接决定你的切图码页面流畅度与效率，当然你的扎实的基础功也是必不可少嘛。代码环境代码环境我这边用的搭建的环境，我只需要在环境中写保存后页面会直接同步更新我写的页面。

又开始公司的新项目了。。。又到了无聊的切图时间，没办法，拿人钱财替人消灾啊 - -！

那当我们拿到公司新项目的时候我们需要做些什么呢？下面就来分享一下我的工作步骤吧（仅使用于初学者，大神勿见怪- -，有不好的地方希望指出，十分感谢）

1. 整版浏览

这是一个废话的过程。。。但是缺是必不可少的一步，我也不得不说一下

首先预览所有设计图页面，设计需求文案等在脑海中大概的思考一下在哪里需要用到什么，到时候怎么写，还有一些图纸中可能不好实现或者不太清楚的
可以找设计师确认以免到时候耽误时间。

当所有页面全过完之后，回想一下，需要用到哪些技术，哪一些板块是公共的需要提取，哪一些样式是重复的，这些都有个大概思路后可以进行下一步了。

2. 环境搭建

一个好的本地环境，直接决定你的切图码页面流畅度与效率，当然你的扎实的基础功也是必不可少嘛- -。

编辑器需求

适合自己的才是最好的，我一直用的sublime编辑器，轻量便捷，插件风格都是自己根据喜好与日常需求搭配，当然还有很多好用的编辑器，
例如： webstorm 这款很强大，基本功能全都有，很重量级但是插件基本都不需要安装了。。。其他的也有一些。只是都没用过，就不来介绍了- -（Atom， Visual Studio Code， Brackets 。。。）

代码环境

我这边用的gulp搭建的环境，我只需要在环境中写h+c+js 保存后页面会直接同步更新我写的页面。你也可以用webpack或者grunt 搭建你的代码环境，看你喜好

在中间做了stylus转css并添加前缀然后压缩输出到新的文件夹
将es6语法js 经过babel转成普通js代码并重命名压缩到新的文件夹
在html中预留位置插入刚转义完成的css+js
在浏览器中同步刷新页面（可多端测试）

那如何搭建这个环境呢？我可以献丑分享一下我的gulpfile文件

GPU服务器云服务器 cdn环境搭建与配置 java项目配置环境 webrtc 环境搭建与调试博客搭建与配置

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

转载请注明本文地址：https://www.ucloud.cn/yun/1346.html

前端又要失失失失失失失失失业了！

摘要：何去何从在如此趋势所迫中，切图仔该何去何从作为个人来看，工具是没法完全取代人工的，工具可以帮助开发者完成大量的简单重复工作，但是要满足实际业务，还是需要前端工程师的专业知识和技术。 1. 祸起看到标题，切图仔们又是菊花一紧。前几天微软刚刚开源Sketch2Code，让UI草图转化成HTML代码。切图仔瑟瑟发抖。 showImg(https://segmentfault.com/img...

lewif 2019-08-23 11:55 评论0 收藏0
Day05-flexible.js

摘要：今天是来到新公司的第五天，开始看手中的项目，做的东西是类似网易一元购这样的产品，有安卓平台还有网站，总共三个渠道。解决屏问题的可行方案是以的设计稿为例在时，图片统一使用设计稿的切图在时，图片统一使用，也就是所谓设计稿的切图。今天是来到新公司的第五天，开始看手中的项目，做的东西是类似网易一元购这样的产品，有安卓ios平台还有H5网站，总共三个渠道。首先代码里，头部head引入的flex...

HtmlCssJs 2019-08-30 13:08 评论0 收藏0
Day05-flexible.js

摘要：今天是来到新公司的第五天，开始看手中的项目，做的东西是类似网易一元购这样的产品，有安卓平台还有网站，总共三个渠道。解决屏问题的可行方案是以的设计稿为例在时，图片统一使用设计稿的切图在时，图片统一使用，也就是所谓设计稿的切图。今天是来到新公司的第五天，开始看手中的项目，做的东西是类似网易一元购这样的产品，有安卓ios平台还有H5网站，总共三个渠道。首先代码里，头部head引入的flex...

LiuRhoRamen 2019-08-01 15:57 评论0 收藏0