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

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

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. O(1) gcd 板子

    const int N = 2e5+10; const int M = 500; int cnt, p[N], _gcd[M][M]; int v[N][3],vis[N]; int gcd(int ...

  2. windows下mysql表名区分大小写

    windows下mysql默认是不区分大小写的,但是linux会区分大小写 如何让windows下mysql区分大小写呢? 修改 my.ini 里面的mysqld部分 #区分大小写 lower_cas ...

  3. 一行css代码搞定响应式布局

    在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量.最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中.这意味着我们不必将 HT ...

  4. SpringBoot启动流程与源码

    一 main方法作为程序的入口,执行SpringApplication.run(),传入参数是启动类的class对象@SpringBootApplication注解 二 run中首先new Sprin ...

  5. 数据结构之链表(LinkedList)(三)

    数据结构之链表(LinkedList)(二) 环形链表 顾名思义 环形列表是一个首尾相连的环形链表 示意图 循环链表的特点是无须增加存储量,仅对表的链接方式稍作改变,即可使得表处理更加方便灵活. 看一 ...

  6. iOS - Scenekit3D引擎初探之 - 给材质贴图

    今天简单说一下 SceneKit 给材质贴图. 1,最简单的一种方法,直接打开dae 或者 scn 文件直接设置  如上图,这个dae 文件中只有一个几何体,几何体中只有一个材质球,然后设置材质球的d ...

  7. SAP-参数（条件表）配置教程–GS01/GS02/GS03

    转载:http://www.baidusap.com/abap/others/2849 在SAP开发中,某段代码运行可能需要满足某个条件,通常解决办法有两种:一种是在代码中写死限制条件,此种方式当限制 ...

  8. Android笔记（二十八） Android中图片之简单图片使用

    用户界面很大程度上决定了APP是否被用户接收,为了提供友好的界面,就需要在应用中使用图片了,Android提供了丰富的图片处理功能. 简单使用图片 使用Drawable对象 为Android应用增加了 ...

  9. 管理Linux软件——aptitude

    https://help.ubuntu.com/lts/serverguide/aptitude.html.en

  10. IOTA私有链简单搭建

    IOTA 参考:https://github.com/iotaledger/wallet 参考:https://github.com/iotaledger/iota.js 参考:https://git ...