前端单页面多人协作的实践(node ＋ jade + sass + github)

21 Sep 2015

Author:wuguanxi

---

0、前言

公司发展迅速，前端团队由1人发展至3人，理论上应该是生产力乘以3倍，但是怎样在一个页面里完全发挥3人的力量需要很好的协作机制。

我们的本地开发环境是node，配合jade模版引擎，和用sass写css样式并用github管理代码。

1、页面分解

每个页面除了头部与脚步这些公共部分，在主要内容根据设计划分成若干部分(page)。

jade模版允许使用 include 来包含其他.jade文件，使任务的分解成为可能。

// jade文件层级结构
----includes
 |   |--page1.jade
 |   |--page2.jade
 |   |--page3.jade
 |   |--page4.jade
 |
 |--main.jade

// main.jade 
doctype html
html
  head
    meta(charset="utf-8")
    meta(name="viewport",content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,minimal-ui")
    title 中秋活动
    link(rel='stylesheet', href='/attachment/mid-autumn/stylesheets/mid-autumn.css')
    script(src="/js/jweixin-1.0.0.js")
  body
    section.loading#loading
    section.MA-main.hide
      .MA-page1.pages
        include ./includes/page1
      .MA-page2.pages.hide
        include ./includes/page2
      .MA-page3.pages.hide
        include ./includes/page3
      .MA-page4.pages.hide
        include ./includes/page4

2、样式分解

相似的，利用sass的import功能也能把样式分解成对应的.scss文件。

// sass文件层级结构
--sass
  |--_mid-autumn-page1.scss
  |--_mid-autumn-page2.scss
  |--_mid-autumn-page3.scss
  |--_mid-autumn-page4.scss
  |--mid-autumn.scss

_表示是可导入的文件。

// mid-autumn.scss

@import "compass/reset";
@import "compass/css3";
@import 'mid-autumn-page1';
@import 'mid-autumn-page2';
@import 'mid-autumn-page3';
@import 'mid-autumn-page4';

html{
  -ms-text-size-adjust: 100%; 
  -webkit-text-size-adjust: 100%;
  font-family:"Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, sans-serif; 
  width: 100%;
  height: 100%;
  font-size: 100px;
  overflow-x:hidden; 
  overflow: auto;
  background-color:#261fa6;
  line-height: 1.375;
}
body{
  @include user-select(none);
  margin: 0 auto;
  width: 100%;
  height: 100%;
  max-width: 640px;
  text-align: center;
  background-color: #261fa6;
  font-size: 0.12rem;
  color: #fff;
  @include box-sizing(border-box);
}
input{
        -webkit-box-sizing:border-box;
      }
a,lable,button{-webkit-tap-highlight-color:rgba(0,0,0,0); }

pages{
  //code
}

// _mid-autumn-page1.scss

@import "compass/css3";

.MA-page1{
  //code
}

// _mid-autumn-page2.scss

@import "compass/css3";

.MA-page2{
  //code
}

// _mid-autumn-page3.scss

@import "compass/css3";

.MA-page3{
  //code
}

// _mid-autumn-page4.scss

@import "compass/css3";

.MA-page4{
  //code
}

编译时，sass会自动合并以上文件到mid-autumn.css很省心。

3、github上管理和合并代码

结构和样式都分解完毕，最后各自领任务。

各自开发完毕，把代码上传github，再合并代码。

// 常用的git命令
$ git clone "url"             //克隆远程仓库到本地
$ git status               //查看工作区域状态
$ git add -A               //添加到暂存区
$ git commit -m "someting" //添加版本
$ git pull                 //拉取远程仓库并合并代码，提示冲突
$ git push                 //提交代码到远程仓库
$ git log                  //查看版本日志

然后是关于.gitignore这个文件，其作用是在git add的时候排除特定的文件，通常用于排除临时文件和系统文件。

我的.gitignore配置如下：

# Windows:
Thumbs.db
ehthumbs.db
Desktop.ini
*.lnk

# Mac
.DS_Store

# Sass
.sass-cache/
*.css.map

# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directory
# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
node_modules

写在最后

合理使用新工具，新技术，提高工作效率，减少加班时间去锻炼身体和学习新的技术！