前端小团队的小规范

发表于   |   分类于   |     |   阅读次数

初到新公司新项目团队，眼见前端开发的各种凌乱，于是跟大伙儿沟通一下、由自己出一份适合项目的前端小规范。于是乎，满腔热情地搭建起了基于 gulp 的工作流，并定了一些前端的小规范。

gulp快速使用说明

构建工具 gulp 搭建好了，但要使得团队每个人能快速使用，于是写了这份简易说明：

1、在命令行中转到项目目录下（注意各自的路径差异）：
cd /Applications/MAMP/htdocs/lws_website/lws_website

2、直接执行命令：
gulp all
即可开启所有gulp任务（’cssPC’,’cssM’,’jsPC’,’jsM’,’watch_css’,’watch_js’）

3、或单独执行scss的编译压缩任务：
gulp watch_css

4、或单独执行js的压缩任务：
gulp watch_js

5、更多gulp任务命令，参考 gulpfile.js 文件。(文章最后附上 gulpfile.js 的关键配置代码)

gulp其他使用说明

1、目前用到的gulp插件：
gulp-sass, gulp-minify-css, gulp-uglify, gulp-plumber
功能分别为：sass编译，css压缩，js压缩，sass\js报错时不中断watch任务、并列出报错行数及具体原因。

（后续将根据需要、逐渐增加新增的插件：css/js版本号，图片压缩，重命名，合并等；gulp-imagemin，gulp-rename，gulp-concat，gulp-rev-append）

2、在dev1下重命名了css、js文件名字，执行gulp后会在dist1下对应目录生成同名文件。
但dist1下旧的css、js文件不会被删除；目前解决方法：手动把dist1下对应目录的css、js文件全部删除，然后执行：gulp cssPC。
即：把dev1下目录的文件全部编译一遍、生成新文件放在了空的dist1目录里面。
当然，这个可以通过配置gulp解决，考虑到该情况目前较少，暂不配置，后续再定。

css文件目录结构

pc端: dev1为开发环境的css/js文件，dist1为gulp处理过的css/js文件。
新建、修改css/js文件，只需要在dev1操作，然后执行gulp相关命令，即可生成dist1的对应文件。

开发环境的目录 dev1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|-- dev1
    |-- homePC
      |-- css
        |-- compoment
          base.scss
          head.scss
          footer.scss
          ……………
        |-- style
          index.scss
          users.scss
          goods.scss
          ……………
      |-- js
        |-- compoment
          jquery.lwsPop.js
          jquery.verify.js
          ……………
        |-- dom
          index.js
          users.js
          goods.js
          ……………
        |-- plugins
          jquery.min.js
          ……………

线上环境的目录 dist1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|-- dist1
    |-- homePC
      |-- css
        |-- compoment
          base.css
          head.css
          footer.css
          ……………
        |-- style
          index.css
          users.css
          goods.css
          ……………
      |-- js
        |-- compoment
          jquery.lwsPop.js
          jquery.verify.js
          ……………
        |-- dom
          index.js
          users.js
          goods.js
          ……………
        |-- plugins
          (引入的不做gulp处理)
          ……………

注意：mobile端目录结构与上面的PC端目录基本相同，homePC 改为 homeM。

js文件区分开发环境和线上环境，即开发环境引用dev1目录的js文件方便调试、而线上环境引用的是dist目录的js文件。
具体实现：只要在url地址的后面加上参数：dev=true，引用的便是dev目录下的js文件。

style下的单独css文件引入component下的公共文件：
如 index.scss 里面引入base.css,head.scss等：

1
2
@import './component/base.css';
@import './component/head.css';

component下的公共css文件里面的、样式类class命名规则，应该有自己独特的标志前缀限制，并尽量降低权重、不使用 !important。

class类命名，css样式与js操作分离

css样式的类命名，以“-”分隔分割，如：lws-nav-list
js的dom操作的类命名，以“J_”加驼峰写法，如：J_lwsNavList

例子：

1
2
3
4
5
<div class="lws-nav-list J_lwsNavList"></div>
.lws-nav-list{
  background: yellow;
}
$('.J_lwsNavList').on('click',function(){ });

css的class基本命名规则

1、公司自定义的前缀：
目的：防止在引入公司外部样式时发生冲突，
比如引入外部一个时间插件，含 .time{font-size:15px;}；
公司内部也有 .time{font-size:12px} ,发生冲突混乱。
加了前缀：.lw-nav .time{ font-size:12px }; 或者 .w-time{ font-size:12px }

2、前缀基本规则：
一级父容器的前缀：lw- 如：lw-content
二级父容器的前缀：w- 如：w-right
三级元素及以下等：自定义 如：right-tips

例子：

1
2
3
4
<div class="lw-content">
  <div class="w-right"><span class="right-tips ">标签</span></div>
  <div class="w-left"><a href="#">链接</a></div>
</div>

3、自定义的样式类class的一些规则
原则：以 “-” 分割，如：lws-nav-list；语义化，别人一眼看到就懂。

css语法书写基本顺序

  1. 位置：position, top, right, z-index, display, float 等
  2. 大小：width, height, padding, margin
  3. 文字：font, line-height, letter-spacing, color, text-align 等
  4. 背景：background, border 等
  5. 动画：animation, transition 等

一些常用的公共模块

即是写在compoment下的单独的scss文件，如base.scss、head.scss、footer.scss等。
若日后出现复用性较大的地方，则提取出独立组件、在component新增文件，比如：提示标签，按钮样式，弹窗风格）

雪碧图

通用的一些图标，切成唯一的一张雪碧图，存放在七牛上；
新开发得页面、立即使用；已有的旧项目的后续慢慢优化。

好，初稿成型，更多适合自己项目的规范，需要跟团队小伙伴协商、根据日后项目出现的需求而步步完善。

附 gulp 配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
//引入组件
var gulp = require('gulp'),
    sass1 = require("gulp-sass"),           //sass编译
    minifycss = require('gulp-minify-css'), //css压缩
    uglify = require('gulp-uglify');        //js压缩
    plumber = require('gulp-plumber');      //watch不中断
// PC端的scss编译,压缩
gulp.task('cssPC',function(){
    //style 目录下的
    var styleDev = './public/dev1/homePC/css/style/*.scss',
        styleDist = './public/dist1/homePC/css/style/',
    //component 目录下的
        comDev = './public/dev1/homePC/css/component/*.scss',
        comDist = './public/dist1/homePC/css/component/';
    gulp.src(styleDev)
        .pipe(plumber())
        .pipe(sass1())
        .pipe(minifycss())
        .pipe(gulp.dest(styleDist));
    gulp.src(comDev)
        .pipe(plumber())
        .pipe(sass1())
        .pipe(minifycss())
        .pipe(gulp.dest(comDist));
});
// M端的scss编译,压缩
gulp.task('cssM',function(){
    //style 目录下的
    var styleDev = './public/dev1/homeM/css/style/*.scss',
        styleDist = './public/dist1/homeM/css/style/',
    //component 目录下的
        comDev = './public/dev1/homeM/css/component/*.scss',
        comDist = './public/dist1/homeM/css/component/';
    gulp.src(styleDev)
        .pipe(plumber())
        .pipe(sass1())
        .pipe(minifycss())
        .pipe(gulp.dest(styleDist));
    gulp.src(comDev)
        .pipe(plumber())
        .pipe(sass1())
        .pipe(minifycss())
        .pipe(gulp.dest(comDist));
});
// PC端的js压缩
gulp.task('jsPC',function(){
    //dom 目录下的
    var domDev = './public/dev1/homePC/js/dom/*.js',
        domDist = './public/dist1/homePC/js/dom/',
    //component 目录下的
        comDev = './public/dev1/homePC/js/component/*.js',
        comDist = './public/dist1/homePC/js/component/';
    gulp.src(domDev)
        .pipe(plumber())
        .pipe(uglify())
        .pipe(gulp.dest(domDist));
    gulp.src(comDev)
        .pipe(plumber())
        .pipe(uglify())
        .pipe(gulp.dest(comDist));
});
// M端的js压缩
gulp.task('jsM',function(){
    //dom 目录下的
    var domDev = './public/dev1/homeM/js/dom/*.js',
        domDist = './public/dist1/homeM/js/dom/',
    //component 目录下的
        comDev = './public/dev1/homeM/js/component/*.js',
        comDist = './public/dist1/homeM/js/component/';
    gulp.src(domDev)
        .pipe(plumber())
        .pipe(uglify())
        .pipe(gulp.dest(domDist));
    gulp.src(comDev)
        .pipe(plumber())
        .pipe(uglify())
        .pipe(gulp.dest(comDist));
});
//watch_css
gulp.task('watch_css',function(){
    //PC 目录下的
    var stylePC = './public/dev1/homePC/css/style/*.scss',
        comPC = './public/dev1/homePC/css/component/*.scss',
    //M 目录下的
        styleM = './public/dev1/homeM/css/style/*.scss',
        comM = './public/dev1/homeM/css/component/*.scss';
    gulp.watch(stylePC, ['cssPC']);
    gulp.watch(comPC, ['cssPC']);
    gulp.watch(styleM, ['cssM']);
    gulp.watch(comM, ['cssM']);
});
//watch_js
gulp.task('watch_js',function(){
    //PC 目录下的
    var domPC = './public/dev1/homePC/js/dom/*.js',
        comPC = './public/dev1/homePC/js/component/*.js',
    //M 目录下的
        domM = './public/dev1/homeM/js/dom/*.js',
        comM = './public/dist1/homeM/js/component/';
    gulp.watch(domPC, ['jsPC']);
    gulp.watch(comPC, ['jsPC']);
    gulp.watch(domM, ['jsM']);
    gulp.watch(comM, ['jsM']);
});
// 默认预设任务
gulp.task('all',function(){
    gulp.start('cssPC','cssM','jsPC','jsM','watch_css','watch_js');
});