介绍

shark-automation是一款基于gulp打造的，拥有较强可扩展性的前端自动化构建工具。提供了前端资源编译发布、本地调试、图片聚合等功能。

安装

• 全局安装

#安装
npm install shark-automation -g
#在项目根目录下执行需要的任务
shark server #启动本地调试
shark build test #编译

• 本地安装

#在项目根目录下安装
npm install shark-automation --save-dev
#需要添加npm scripts脚本
#添加脚本
{
    "scripts": {
        "server": "shark server", #启动本地调试 
        "build": "shark build test" #编译
    }
}
#执行
npm run server
npm run build 

相关文档: npm scripts

automation提供的命令

# 启动本地调试
shark server
# 启动编译.target: 指定是哪个阶段的编译。test：测试机，online：线上 
shark build <target>  
# compile。主要是给后端使用，执行预处理器语言的编译处理，比如scss
shark compile
# 聚合图片
shark sprite
# 推送编译好后的代码到指定的git仓库.target:test:测试仓库，online：线上仓库；branch：代码分支；tagv：tag version；tagm：tag 说明
shark deploy <target> <branch> [-v <tagv>] [-m <tagm>]

配置文件

shark-automation在执行任务期间，需要两份配置文件：①shark-automation-config.js ②shark-config.js。在项目根目录需提供这两份文件

• shark-automation-config.js 基本配置项，包含项目目录结构说明、deploy 仓库地址等

• shark-config.js

automation启动的时候，会读取这份文件。automation会暴露一个shark对象到全局对象上，该对象包含automation暴露的接口。shark-config.js这份文件就是利用shark接口，来扩展插件的默认配置。最基本的配置文件：

//设置基本配置
shark.baseconfig = require('./shark-automation-config.js');

其他接口参考: 接口说明

工作原理

shark-automation在build阶段定义了固定的工作节点。每个节点需要完成的任务是固定的，但是具体该怎么做用户根据业务需求可以自己扩展工具提供的默认处理方式。各个节点分别是：compile(编译)、combine(合并)、location(资源定位)、min(压缩)、md5(重命名)、copy(拷贝编译后的文件到制定目录)

内置的task配置如下表格:

例如compile-css，基本的配置：

{
    compile: [{
        test: '**/*.scss'
        name: 'compile-css',
        plugins: {
            lise: [{
                use: 'gulp-sass',
                option: {}
            }, {
                use: 'gulp-css-base64',
                option: {}
            }, {
                use: 'gulp-autoprefixer',
                option: {}
            }]
        }
    }]
}

最终生成的task如下：

//其中的src、base、dest分别对应表格中的源目录、基准目录和目标目录
gulp.task('compile-css', function() {
    return gulp.src(`${src}/$test`, {
        base: `${base}`
    })
    .pipe(require('gulp-sass')({}))
    .pipe(require('gulp-css-base64')({}))
    .pipe(require('gulp-autoprefixer')({}))
    .pipe(gulp.dest(`${dest}`));
});

接口

• 扩展task配置

shark.plugins = {
    [compile || combine || location || min || md5 || copy]/*节点*/: [{
        test: '',//glob语法。
        name: '',//如果name和内置的task一致，则会用此配置扩展该内置task。不然无需提供
        like: js || css || html || image || font || video, //需要处理的文件类型 
        switch: on || off, //是否启用task
        exclude: [], //需要被过滤的glob。可以是绝对路径，也可以是相对于项目根目录的相对路径
        pre: {
            list: [{
                use: '',//插件名
                option: {}//插件的option参数
            }],//gulp插件列表。这些插件会在plugins之前执行
            merge: replace || append || preappend //使用怎样的方式进行merge
        },
        plugins: {
            list: [{
                use: '',//插件名
                option: {}//插件的option参数
            }],//gulp插件列表。
            merge: replace || append || preappend //使用怎样的方式进行merge
        },
        post: {
            list: [{
                use: '',//插件名
                option: {}//插件的option参数
            }],//gulp插件列表。这些插件会在plugins之后执行
            merge: replace || append || preappend //使用怎样的方式进行merge
        },
    }]
};
//根据此配置，生成的task
let name = name || 系统生成;
gulp.task(name, function() {
    //src、base、dest 是根据节点+like两个字段，获取路径。具体查阅内置task表格
    let srcPath = `${src}/${test}`;
    let basePath = `${base}`;
    let destPath = `${dest}`
    return gulp.src(srcPath, {
        base: basePath
    })
    .pipe([pre]/*pre plugins*/)
    .pipe([plugins]/*plugins 列表*/)
    .pipe([post]/*post plugins 列表*/)
    .pipe(gulp.dest(destPath));
});

• webpack扩展

//如果需要使用webpack，则需要配置，否则不用配置
shark.webpack = {
    //读取入口文件的两种方式。filename: 根据文件名/\.page.js/判断；dirname: page文件夹下的所有文件做为入口文件
    entry: 'filename' || 'dirname'  
};

• 扩展本地调试时的路由

shark.appConfig = function(app) {
    //express app
}