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

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

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. Maven添加依赖后如何在IDEA中引用

    使用idea打开/创建maven项目,可以正常使用maven命令编译发布,但idea里智能提示.代码均找不到包,原因是idea并未引用依赖的包,这时需要添加idea引用即可 解决方法 在IDEA右侧的 ...

  2. 火狐浏览器 访问所有HTTPS网站显示连接不安全解决办法

    当 Firefox 连接到一个安全的网站时(网址最开始为“https://”),它必须确认该网站出具的证书有效且使用足够高的加密强度.如果证书无法通过验证,或加密强度过低,Firefox 会中止连接到 ...

  3. JS权威指南读书笔记（一）

    第一章 JavaScript概述 1 JS是一门高端的.动态的.弱类型的编程语言,非常适合面向对象和函数式的编程风格.   第二章 词法结构 1 JS程序是用Unicode字符集编写的. 2 JS是区 ...

  4. 前端编译原理 笔记 -- BISON

    前面总结的差不多了,这边记录下,零碎的相关阅读可以备忘的一些知识点 Bsion文档,下面是中文的地址  https://blog.csdn.net/chinamming/article/details ...

  5. Integer和int踩过的坑

    在做SSM项目时发现一个有趣的bug,在这里记录一下. 数据库表如下: 实体类:grade字段初始设定为int类型 在用mybatis对第三条数据进行修改时,希望赋值的更改,未赋值的不更改,测试运行 ...

  6. springboot学习入门简易版一---springboot2.0介绍

    1.1为什么用springboot(2) 传统项目,整合ssm或ssh,配置文件,jar冲突,整合麻烦.Tomcat容器加载web.xml配置内容 springboot完全采用注解化(使用注解方式启动 ...

  7. k8s中的网络（较详细汇总）

    目录 一.网络前提条件-网络模型 二.需要解决的网络问题 1.容器和容器之间的网络 2.pod与pod之间的网络 同一台node节点上pod和pod通信 不同node节点上pod和pod通信 3.po ...

  8. window.addEventListener('error')监听页面是否更新版本

    因本司更新迭代的速度很快,有时候更改一个BUG就要马上更新版本,就会引起用户在应用当中,页面点击无反应,其实是打包的js和css的包名称更改,找不到以前的包的缘故.我现在用一个小方法,判断js或css ...

  9. 无线热点登陆认证原理探究---captive portal 什么是Captive Portal

    什么是Captive Portal 大家肯定都连过公共场所的wifi热点,比如麦当劳等地方的.他们的wifi往往一连上去就会弹出一个要求登录或者微信关注之类的页面,只有在这个页面完成操作了才能正常访问 ...

  10. ES6 Class（类）的继承与常用方法

    一.ES6 类的定义 ES5 构造函数的写法: function Point(x, y) { this.x = x; this.y = y; } ES6 引入了 Class(类),通过class关键字 ...