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

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

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. java -jar 参数前后位置说明

    springboot项目启动的时候可以直接使用java -jar xxx.jar这样.下面说说参数的一些讲究 1.-DpropName=propValue的形式携带,要放在-jar参数前面 eg:ja ...

  2. C#压缩和解压文件

    这里用两种方法实现C#压缩和解压文件 1.使用System.IO.Compression名称空间下的相关类(需引用 System.IO.Compression.FileSystem和System.IO ...

  3. physdiskwrite 的简单使用

    physdiskwrite 的简单使用 参考  https://m0n0.ch/wall/physdiskwrite.php 来源 https://www.cnblogs.com/EasonJim/p ...

  4. POJ1322Chocolate--概论DP

    题目在这里 每次从包装中取出一块巧克力并放在桌子上.如果桌子上有两个相同颜色的巧克力,则将这两个丢掉.如果包中有C种颜色的巧克力(颜色均匀分布),从包装中取出N个巧克力后,桌子上确实有M个巧克力的概率 ...

  5. javscript函数的运用

    函数,一段能够自动完成某些功能的代码块,函数的出现,既解决了重复使用重一功能的需求,又可以避免代码的臃肿性. 使用函数有两个要求:必须调用后才可以执行;函数名不要和关键字以及系统函数相同; 函数主要有 ...

  6. Java虚拟机（五）：JVM 类加载机制

    一.JVM 类加载机制 JVM 类加载机制分为五个部分:加载,验证,准备,解析,初始化,下面我们就分别来看一下这五个过程. 1. 加载: 加载是类加载过程中的第一个阶段,这个阶段会在内存中生成一个代表 ...

  7. 【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

    1.使用官方脚手架构建 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择  ...

  8. JAVA多线程之UncaughtExceptionHandler——处理非正常的线程中止

    JAVA多线程之UncaughtExceptionHandler——处理非正常的线程中止 背景 当单线程的程序发生一个未捕获的异常时我们可以采用try....catch进行异常的捕获,但是在多线程环境 ...

  9. 记一次B类地址子网划分

    说明:一般内网地址,没有要求严格的划分之类的.需要按要求严格划分一般都是公网地址 温馨提醒:由于笔者功底不是很深厚,只能说我们保证把数算对用相对简单的方法 现有一个公网ip,B类地址130.3.0.0 ...

  10. Mysql安装与问题合集

    下载mysql https://dev.mysql.com/downloads/mysql/ 下载历史版本 看这篇文章 https://www.cnblogs.com/reyinever/p/8551 ...