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

前端开发 作者: 2024-06-14 17:35:01
又开始公司的新项目了。。。又到了无聊的切图时间,没办法,拿人钱财替人消灾啊 ! 那当我们拿到公司新项目的时候我们需要做些什么呢? 下面就来分享一下我的工作步骤吧(仅使用于初学者,大神勿见怪 ,有不好的

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

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

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

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

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

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

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

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

@H_502_20@
  • 在中间做了stylus转css并添加前缀然后压缩输出到新的文件夹
  • 将es6语法js 经过babel转成普通js代码并重命名压缩到新的文件夹
  • 在html中预留位置 插入刚转义完成的css+js
  • 在浏览器中同步刷新页面(可多端测试)
  • 那如何搭建这个环境呢? 我可以献丑分享一下我的gulpfile文件

    原创声明
    本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
    本文链接:http://www.jiecseo.com/news/show_27041.html