a-rule

一个gulp+webpack2的编译范式。

js支持vuejs框架。css预处理引擎支持stylus。

css内置normalize.css, 通过 @import 'normalize'; 直接引入即可。

安装

npm install -g a-rule

使用

# 帮助
$ arule --help

# 初始化项目目录
$ arule init

# 运行测试编译并启动watch：
$ arule dev

# 运行生产编译：
$ arule prod

项目源码目录结构

./src
 |-- components            # vue组件存放目录，*.vue
 |-- js
      |-- common           # 全局js存放目录
          |-- index.js     # 全局js入口文件， 在此文件中引入其他模块，例如require('vue')
      |-- pages            # 页面级的js，通常是跟页面相关的业务代码
 |-- css
      |-- common           # 全局css存放目录
          |-- index.styl   # 全局css入口文件， 在此文件中引入其他模块，例如@import('normolize')
      |-- pages            # 页面级的css，通常是跟页面相关的样式代码
 |-- image                 # 图片文件
 |-- static                # 静态文件，不需要任何处理的文件，例如fonts文件等

编译结果

执行编译后，代码会生成到和src同级的assets目录，同时该目录下生成 css-map.json 和 js-map.json。

*-map.json用于保存编译后加md5的文件名映射，通过读取这些map.json在页面中引用正确的编译路径。

dev和prod都会生成这些map文件，用于保持结果一致。

css生成： index.md5.css 和 pages下对应的各个文件 + md5戳 js生成： common.md5.js、componnents.md5.js 和 pages下对应的各个文件 + md5戳

结合gulp使用

若采用 npm install --save-dev a-rule 安装到局部而非全局，则需要使用gulp来执行任务。

const gulp = require('gulp');
const arule = require('a-rule');

gulp.task('default', arule.defaultTasks);
gulp.task('production', arule.prodTasks);

// other task
gulp.task('others', ['yoursTask'].concat(arule.defaultTasks));

a-rule暴露给外部的属性有：

• run [Function]

  arule.run(envName, [options])，执行任务

  envName: 'development' | 'production' options:

  const options = {
    homePath: root,  // root is process.cwd()
    srcDir: `${root}/src`,  // 源码路径，物理根路径
    cssDir: '/css',         // 源码目录下的css目录，下同
    jsDir: '/js',
    imageDir: '/image',
    staticDir: '/static',
    componentsDir: '/components',
    distDir: `${root}/assets`,   // 编译结果目录
    verbose: false  // 是否显示详细过程信息
  };
  

• defaultTasks [Array]

  arule.defaultTasks 默认的任务列表，一般是开发环境

• prodTasks [Array]

  arule.prodTasks 默认的生产任务列表