又开始公司的新项目了。。。

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

1. 整版浏览

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

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

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

2. 环境搭建

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

编辑器需求

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

代码环境

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

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

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

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

  1. ionic项目编译打包（android平台）

    ionic项目相关开发工作完成之后(建立ionic工程项目可以参考上一篇文章ionic项目工程建立),就可以进行项目的编译打包apk应用包. 打包编译需要在平台环境下,这里只记录下android平台打 ...

  2. React Native环境配置、初始化项目、打包安装到手机，以及开发小知识

    1.前言 环境:Win10 + Android 已经在Windows电脑上安装好 Node(v14+).Git.Yarn. JDK(v11) javac -version javac 11.0.15. ...

  3. vue 项目编译打包

    1. npm run build 2. npm install -g serve 3.serve dist 原文地址:https://www.cnblogs.com/jy13638593346/p/9 ...

  4. vue-cli搭建多页面项目如何配置

    这里使用的是webpack模板. 首先安装vue-cli,执行命令 npm install vue-cli -g: 安装完成后初始化一个项目模板:vue init webpack myproject; ...

  5. Webpack 2 视频教程 019 - Webpack 2 中配置多页面编译

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  6. 基于.NetCore开发博客项目 StarBlog - (12) Razor页面动态编译

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  7. Ant自动编译打包&发布 android项目

    Eclipse用起来虽然方便,但是编译打包android项目还是比较慢,尤其将应用打包发布到各个渠道时,用Eclipse手动打包各种渠道包就有点不切实际了,这时候我们用到Ant帮我们自动编译打包了. ...

  8. 项目androidAnt编译打包Android项目

    时间紧张,先记一笔,后续优化与完善. Ant编译打包Android项目 在Eclipse中对Android项目停止编译和打包如果项目比较大的话会比较慢,所以改为Ant工具来停止编译和打包 Ant环境配 ...

  9. webpack 配置 (支持 React SCSS ES6 编译打包 和 模块热更新 / 生成SourceMap)

    1.首先是目录结构 |-node_modules/ #包文件 |-build/ #静态资源生成目录 |-src/ #开发目录 |-js/ |-index.js #入口文件 |-app.js #Reac ...

随机推荐

  1. 原生 js 录屏功能

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  2. MySQL 体系结构及存储引擎

    MySQL 原理篇 MySQL 索引机制 MySQL 体系结构及存储引擎 MySQL 语句执行过程详解 MySQL 执行计划详解 MySQL InnoDB 缓冲池 MySQL InnoDB 事务 My ...

  3. Web Scraper 翻页——控制链接批量抓取数据（Web Scraper 高级用法）| 简易数据分析 05

    这是简易数据分析系列的第 5 篇文章. 上篇文章我们爬取了豆瓣电影 TOP250 前 25 个电影的数据,今天我们就要在原来的 Web Scraper 配置上做一些小改动,让爬虫把 250 条电影数据 ...

  4. Django 报错总结

    报错: AttributeError: 'NoneType' object has no attribute 'split' 最近在写网站中遇到一个问题,就是题目上所写的:AttributeError ...

  5. mongodb 备份与还原操作

    环境信息: 版本: mongodb 3.2 备份: mongodump 恢复: mongorestore 本文参考官方文档:https://docs.mongodb.com/manual/refere ...

  6. css 盒子 取值

    盒子:当我们设置一个标签宽高时,默认设置的是盒子里面content大小. 内容盒:content 填充盒:content+padding(overflow截取的区域) 边框盒:content+padd ...

  7. UI5-技术篇-SEGW DEEP ENTITY测试

    参考:http://blog.sina.com.cn/s/blog_a7d67d810102xgms.html 一般调用后端的OData服务需要同时传输多个记录表对业务逻辑进行处理(例如BAPI),今 ...

  8. echart——关系图graph详解

    VueEchart组件见上一篇 <template> <VueEcharts :options="options" auto-resize /> </ ...

  9. dubbo spring 的使用

    1:项目的架构,本项目使用的maven,分为三个模块. api 为接口 , server 为服务端   consumer 为调用端 2:api的模块结构 该模块主要是定义接口和实体.没什么具体介绍的. ...

  10. Gitlab CI/CD任务一直处于pending

    在注册Runner时候这里输入了tag,这里指的是runner的标签,可以设置多个  ,分别用 ,号分割 .gitlab-ci.yml文件中 stages: - pull - package - bu ...