mb

m-build

前端自动化开发脚手架

Showing:

Popularity

Downloads/wk

10

GitHub Stars

6

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

3

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

m-build

现在的前端开发因为node的加入,开发模式发生巨大的变化。以前所见即所得,现在大部分的需要编译合并压缩混淆,如何让代码变得可维护,可高效的协同开发?

m-build是面向前端自动化开发工具。主要解决多人开发,目录结构和代码的一致性可维护性,只需要你在config.js里面配置一下就可以选择自己的各种需求,适合安装一次不用多次安装通用型前端自动化脚手架。

m-build主要集成以下功能:
  1. browser-snyc自动搭建本地开发环境,多端代码同步和刷新调试功能。

  2. webpack模块化组件化开发功能。同时也支持rollup.js。

  3. bable代码编译功能。ES6转ES5的编译。

  4. react,vue的编译功能

  5. sass的代码编译功能以后会集成less

  6. css,sass的REM的自动换算功能可以根据不同设计稿配置不一样的转换值。

  7. art-template模板编译功能

环境安装

请去node官网 安装 V6.0.0 以上版本,搭建环境

安装

window安装

npm install -g gulp-cli m-build

mac 安装

sudo npm install -g gulp-cli m-build

安装完成以后你的电脑会有 m 命令,命令如下:

m -h

    Usage: m [options]

Options:
    -h, --help      output usage information
    -v,--version        output the version number
    --init [h5|m]       创建目录目录结构
    --run               开启服务
    --compile           编译所有文件
    --pack              打包到线上环境

初始化

进入目录

第一步:初始化目录和配置文件

m init
    默认 h5
    可选 m

创建的目录结构如下


creat-project
└── node_modules
    │
    projectName
    ├── pageName
    │    ├── src
    │    │   ├── css
    │    │   ├── jss
    │    │   ├── i
    │    │   ├── sass
    │    |   ├── temp
    │    │   └── index.html
    │    ├── build
    │    │   ├── css
    │    │   ├── i
    │    │   ├── js
    │    │   └── index.html
    │    └── config.js
    ├── package.json
    └── gulpfile.js

第二步:下载项目需要的包依赖

npm install

开启服务

m run  或者用 gulp

开启服务以后会自动启动browser-snyc,sass编译监听,css编译监听,js打包监听,html压缩监听等功能...

项目全部编译

 m compile 或者用 gulp cmopile

对src目录下所有js,sass,css,images,template,vm 进行编译,并输出到dist目录的对应子目录

项目打包

 m pack 或者用 gulp pack

对dist目录下的js,css,html,tempate,vm进行压缩合并输出到build目录


单个模块监听功能

  • 开启服务
gulp  server

监听dist目录所有目录文件。如果dist目录发生改变会刷新页面。同时开启多端同步和调试服务。

  • js文件编译监听
gulp  jsWatch

监听src目录下的js目录的entry*.js文件编译打包。编译以后的文件输出到同级目录下的的dist目录下的js目录。

  • js文件移动监听
gulp  jsLabWatch

监听src目录下的js-lab目录的*.js文件。新增和改动的文件文件输出到同级目录下的的dist目录下的js目录。

  • sass编译监听
gulp  sassWatch

监听src目录下的sass目录的*.scss文件的编译。编译以后的文件输出到同级目录下的的dist目录下的css目录

  • css编译监听
gulp  cssWatch

监听src目录下的css目录的*.css文件的编译。编译以后的文件输出到同级目录下的的dist目录下的css目录

  • html压缩监听
gulp  htmlWatch

监听src目录的*.html文件的压缩。压缩以后的文件输出到同级目录下的的dist目录

  • 图片监听
gulp  imgWatch

监听src目录下的i目录的*.png|jpg|gif文件。压缩以后的文件输出到同级目录下的的dist目录下的i目录

  • 模板编译监听
gulp  tempWacth

监听src目录下的temp目录的*.html文件对文件进行编译。编译以后的文件输出到同级目录的dist目录下的js目录


单个模块编译功能

  • js文件编译
gulp  jsCompile

对src目录下的js目录的entry*.js文件编译打包。编译以后的文件输出到同级目录下的的dist目录下的js目录。

  • sass编译
gulp  sassCompile

对src目录下的sass目录的*.scss文件的编译。编译以后的文件输出到同级目录下的的dist目录下的css目录

  • css编译
gulp  cssCompile

对src目录下的css目录的*.css文件的编译。编译以后的文件输出到同级目录下的的dist目录下的css目录

  • html压缩
gulp  htmlCompile

对src目录的*.html文件的压缩。压缩以后的文件输出到同级目录下的的dist目录

  • 图片处理
gulp  imgCompile

对src目录下的i目录的*.png|jpg|gif文件。压缩以后的文件输出到同级目录下的的dist目录下的i目录

  • 模板编译
gulp  tempCompile

对src目录下的temp目录的*.html文件对文件进行编译。编译以后的文件输出到同级目录的dist目录下的js目录


单个模块打包功能

  • js文件打包
gulp  jsPack

对dist目录下的js目录的*.js文件压缩混淆打包。编译以后的文件输出到同级目录下的的build目录下的js目录。

  • css编译
gulp  cssPack

对src目录下的css目录的*.css文件压缩混淆。编译以后的文件输出到同级目录下的的build目录下的css目录

  • html压缩
gulp  htmlPack

对dist目录的*.html文件的压缩。压缩以后的文件输出到同级目录下的的build目录

  • 图片处理
gulp  imgPack

对dist目录下的i目录的*.png|jpg|gif文件。压缩以后的文件输出到同级目录下的的build目录下的i目录

未完待续后续功能还在继续开发.........

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100