1. 整版浏览

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

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

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

2. 环境搭建

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

编辑器需求

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

代码环境

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

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

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

gulp4配置多页面项目编译打包的更多相关文章

ionic项目编译打包（android平台）
ionic项目相关开发工作完成之后(建立ionic工程项目可以参考上一篇文章ionic项目工程建立),就可以进行项目的编译打包apk应用包. 打包编译需要在平台环境下,这里只记录下android平台打 ...
React Native环境配置、初始化项目、打包安装到手机，以及开发小知识
1.前言环境:Win10 + Android 已经在Windows电脑上安装好 Node(v14+).Git.Yarn. JDK(v11) javac -version javac 11.0.15. ...
vue 项目编译打包
1. npm run build 2. npm install -g serve 3.serve dist 原文地址:https://www.cnblogs.com/jy13638593346/p/9 ...
vue-cli搭建多页面项目如何配置
这里使用的是webpack模板. 首先安装vue-cli,执行命令 npm install vue-cli -g: 安装完成后初始化一个项目模板:vue init webpack myproject; ...
Webpack 2 视频教程 019 - Webpack 2 中配置多页面编译
原文发表于我的技术博客这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
基于.NetCore开发博客项目 StarBlog - (12) Razor页面动态编译
系列文章基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目基于.NetC ...
Ant自动编译打包&发布 android项目
Eclipse用起来虽然方便,但是编译打包android项目还是比较慢,尤其将应用打包发布到各个渠道时,用Eclipse手动打包各种渠道包就有点不切实际了,这时候我们用到Ant帮我们自动编译打包了. ...
项目androidAnt编译打包Android项目
时间紧张,先记一笔,后续优化与完善. Ant编译打包Android项目在Eclipse中对Android项目停止编译和打包如果项目比较大的话会比较慢,所以改为Ant工具来停止编译和打包 Ant环境配 ...
webpack 配置 (支持 React SCSS ES6 编译打包和模块热更新 / 生成SourceMap)
1.首先是目录结构 |-node_modules/ #包文件 |-build/ #静态资源生成目录 |-src/ #开发目录 |-js/ |-index.js #入口文件 |-app.js #Reac ...

随机推荐

在论坛中出现的比较难的sql问题：10(删除多表中的同一个外键)
原文:在论坛中出现的比较难的sql问题:10(删除多表中的同一个外键) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得有 ...
Gogs搭建私有git代码仓库
前置环境: 数据库 -> mysql git -> 服务端和客户端版本必须>=1.8.3 ssh服务 -> 如果只使用http/https方式的话,服务端无需配置ssh. st ...
element-ui 文件上传
<el-form-item> <el-upload ref="upload" class="upload-demo" :action=&quo ...
多个div并排不换行
1.所有div的父元素不换行 white-space: nowrap; 2.所有div设置为行内元素 display: inline-block; 基于java记账管理系统[尚学堂·百战程序员]
tcping端口检测工具使用
大家都知道检测网络状态是,无论是服务器/客户机最常用的就是ping命令,但ping命令只能检测ICMP协议,若对方禁止ping协议了,自然ping命令也就无法检测了,此时,我们可以通过tcping工 ...
MVC-Session
1.什么是Session? Session即会话,是指一个用户在一段时间内对某一个站点的一次访问. Session对象在.NET中对应HttpSessionState类,表示"会话状态& ...
VSCode Git 没有活动的源代码控制提供程序
主要原因:我以前安装的Git只允许在Git-Bash中运行,需要重新安装Git,选择允许三方软件的那个选项,然后安装Git插件,修改git.path即可. 以下是解决过程中的尝试,记录如下,实际上只需 ...
Android笔记（十七） Android中的Service
定义和用途 Service是Android的四大组件之一,一直在后台运行,没有用户界面.Service组件通常用于为其他组件提供后台服务或者监控其他组件的运行状态,例如播放音乐.记录地理位置,监听用户 ...
VMware网络配置三种网络模式（桥接、NAT、Host-only）
VMware网络配置三种网络模式(桥接.NAT.Host-only) 一.虚拟安装后三种网络模式显示当安装好后,的“虚拟网络编辑器”中也存在三种模式,分别对应:桥接-VMnet0.Host-only ...
Formal Analysis of the TLS Handshake Protocol -----论文整理
1.关键词 TLS.SSL.Formal Analsysis Conridentiality Secerecy 2.Table THE SSL/TLS handshake Protocol 3 ...