UNPKG

4.9 kBMarkdownView Raw
1# m-build
2
3现在的前端开发因为node的加入，开发模式发生巨大的变化。以前所见即所得，现在大部分的需要编译合并压缩混淆，如何让代码变得可维护，可高效的协同开发？
4
5m-build是面向前端自动化开发工具。主要解决多人开发，目录结构和代码的一致性可维护性，只需要你在config.js里面配置一下就可以选择自己的各种需求,适合安装一次不用多次安装通用型前端自动化脚手架。
6
7##### m-build主要集成以下功能:
8
91. browser-snyc自动搭建本地开发环境，多端代码同步和刷新调试功能。
10
112. webpack模块化组件化开发功能。同时也支持rollup.js。
12
133. bable代码编译功能。ES6转ES5的编译。
14
154. react,vue的编译功能
16
175. sass的代码编译功能以后会集成less
18
196. css,sass的REM的自动换算功能可以根据不同设计稿配置不一样的转换值。
20
217. art-template模板编译功能
22
23
24#### 环境安装
25请去[node官网](https://nodejs.org/en/) 安装 V6.0.0 以上版本，搭建环境
26
27#### 安装
28window安装
29
30``` bash
31npm install -g gulp-cli m-build
32```
33mac 安装
34
35``` bash
36sudo npm install -g gulp-cli m-build
37```
38
39安装完成以后你的电脑会有 m 命令，命令如下:
40
41```
42m -h
43
44 Usage: m [options]
45
46Options:
47 -h, --help output usage information
48 -v,--version output the version number
49 --init [h5|m] 创建目录目录结构
50 --run [value] 开启服务
51 --pack 打包
52```
53#### 初始化
54进入目录
55
56第一步:初始化目录和配置文件
57
58``` bash
59m init
60 默认 h5
61 可选 m
62```
63创建的目录结构如下
64
65```
66
67creat-project
68└── node_modules
69 │
70 projectName
71 ├── pageName
72 │ ├── src
73 │ │ ├── css
74 │ │ ├── jss
75 │ │ ├── i
76 │ │ ├── sass
77 │ | ├── temp
78 │ │ └── index.html
79 │ ├── build
80 │ │ ├── css
81 │ │ ├── i
82 │ │ ├── js
83 │ │ └── index.html
84 │ └── config.js
85 ├── package.json
86 └── gulpfile.js
87
88```
89
90第二步：下载项目需要的包依赖
91
92``` bash
93npm install
94```
95
96#### 开启服务
97
98```
99m run 或者用 gulp
100```
101
102> 开启服务以后会自动启动browser-snyc，sass编译监听，css编译监听，js打包监听，html压缩监听等功能...
103
104#### 项目打包
105
106```
107 m pack 或者用 gulp pack
108```
109> 对src目录下的js,css,sass,html,tempale进行编译打包输出到dist目录
110
111
112---
113
114
115#### 单个模块监听功能
116
117- 开启服务
118
119```
120gulp server
121```
122> 监听dist目录所有目录文件。如果dist目录发生改变会刷新页面。同时开启多端同步和调试服务。
123
124- js文件编译监听
125
126```
127gulp jsWatch
128```
129> 监听src目录下的js目录的`entry*.js`文件编译打包。编译以后的文件输出到同级目录下的的dist目录下的js目录。
130
131- sass编译监听
132
133```
134gulp sassWatch
135```
136> 监听src目录下的sass目录的`*.scss`文件的编译。编译以后的文件输出到同级目录下的的dist目录下的css目录
137
138- css编译监听
139
140```
141gulp cssWatch
142```
143> 监听src目录下的css目录的`*.css`文件的编译。编译以后的文件输出到同级目录下的的dist目录下的css目录
144
145- html压缩监听
146
147```
148gulp htmlWatch
149```
150> 监听src目录的`*.html`文件的压缩。压缩以后的文件输出到同级目录下的的dist目录
151
152- 图片监听
153
154```
155gulp imgWatch
156```
157> 监听src目录下的i目录的`*.png|jpg|gif`文件。压缩以后的文件输出到同级目录下的的dist目录下的i目录
158
159- 模板编译监听
160
161```
162gulp tempWacth
163```
164> 监听src目录下的temp目录的`*.html`文件对文件进行编译。编译以后的文件输出到同级目录的dist目录下的js目录
165
166
167
168---
169
170
171#### 单个模块编译功能
172- js文件编译
173
174```
175gulp jsPack
176```
177> 对src目录下的js目录的`entry*.js`文件编译打包。编译以后的文件输出到同级目录下的的dist目录下的js目录。
178
179- sass编译
180
181```
182gulp sassPack
183```
184> 对src目录下的sass目录的`*.scss`文件的编译。编译以后的文件输出到同级目录下的的dist目录下的css目录
185
186- css编译
187
188```
189gulp cssPack
190```
191> 对src目录下的css目录的`*.css`文件的编译。编译以后的文件输出到同级目录下的的dist目录下的css目录
192
193- html压缩
194
195```
196gulp htmlPack
197```
198> 对src目录的`*.html`文件的压缩。压缩以后的文件输出到同级目录下的的dist目录
199
200- 图片处理
201
202```
203gulp imgPack
204```
205> 对src目录下的i目录的`*.png|jpg|gif`文件。压缩以后的文件输出到同级目录下的的dist目录下的i目录
206
207- 模板编译
208
209```
210gulp tempPack
211```
212> 对src目录下的temp目录的`*.html`文件对文件进行编译。编译以后的文件输出到同级目录的dist目录下的js目录
213
214
215##### 未完待续后续功能还在继续开发.........