node package manager

shark-automation

前端自动化构建

Shark-automation is a tool for automation of front-end.It supplies three functions:

  1. make a mock server during development phase
  2. build the source code and static resource during the deploy phase
  3. deploy resource to git repository

Shark-automation needs a config file:

module.exports = {
    comment: '',  //not required 
    version: '1.0.0',  //not required 
    product: 'shark-automation', //name of product. not required 
    contextPath: '/', //rootpath of request.default '/' 
    protocol: 'http', //the protocol of product. default 'http' 
    browserPort: 9000, //port for browser-sync server. required. 
    port: 9100, //port for express server. required 
    hostname: 'demo.shark.automation', //hostname of mock server. required 
    openurl: 'http://demo.shark.automation:9000/index.html', //url is opend automatically when the browser-sync server and express server is ready. not required 
    rootPath: __dirname, //rootpath of product.required 
    webapp: 'src/main/webapp', //path of source code.required 
    mock: 'src/test/mock', //path of mock files.required 
    scssPath: 'style/scss', //path of scss files. required 
    cssPath: 'style/css', //path of css files. required 
    imgPath: 'style/img', //path of images. required 
    videoPath: 'style/video', //path of video. not required 
    jsPath: 'js', //path of js. required 
    fontPath: 'fonts', //path of fonts. not required 
    htmlPath: 'views', //path of html. required 
    templatePath: 'WEB-INF/tmpl', //path of ftl. not required 
    ajaxPrefix: '/xhr', //rootpath of ajax request. required. 
    mimgPathPrefix: '/hxm', //rootpath of static file requrest. not required. 
    ifwebpack: true, //should use webpack to build js. required 
    remoteUrl: '', //the path ajax request should redirct to.It's for testing interface.not required 
    staticVersion: '2016', // static resource version 
    tmpDir: '.tmp', // the directory storage the files generated during build phase.optional. default .tmp 
    build: 'build', // the directory storage the build files.optional. default build 
    buildWebapp: 'app', // the directory storage the build html files.related to build directory.optional.default app. 
    buildStatic: 'mimg', // the directory storage the build static resource files.related to build directory.optional.default mimg. 
    projectType: 'Angular', // the product type,  required for Angular product. 
    ftl2html: [ // option. if use freemarker then requried 
            {
                url: '/index.html$', // url regular exp match the request url. 
                sourceRoot: 'src/main/webapp/WEB-INF', // source root for ftl. 
                ftl: 'tmpl/index.ftl', // the ftl match the url as the response 
                outputRoot: 'src/test/mock/output', // the mock data root path. 
                data: 'src/test/mock/tdd/oglobal.tdd,src/test/mock/tdd/index.tdd' // the mock data for the ftl template 
            }
        ],
    //required 
    mimgURLPrefix: {
        develop: '', //the rootpath of static resource during develop phase 
        online: '', //the rootpath of static resource at online phase 
        test: '' //the rootpath of static resource at test phase 
    },
    //need to deploy then required 
    deploy: {
        path: '', //the folder path which contains the files need to be pushed to the repository 
        static: '', ////the folder path which contains the static files need to be pushed to the repository 
        giturl: '', //git repository url.not required 
        git: {
            test: 'test', //test repository  
            online: 'deploy' //online repository 
        }
    }
};

mock-server

Shark-automation use express to make a mock server and need some mock files.Express uses the mock file related to the request path as response.For instance:request path: /xhr/demo/list.do, the related mock file is {config.mock}/xhr/demo/list.do

below shows how to start the mock server.

var gulp = require('gulp'),
    sharkAutomation = require('shark-automation'),
    runSequence = require('run-sequence'),
    express = require('express');
var config = require('./config.js'); //config file 
gulp.task('serve-express', function(cb) {
    var app = express();
 
    var router = sharkAutomation.registerServerRouter({
        baseConf: config,
        gulp: gulp
    });
    app.use(router);
 
    app.listen(config.port, function(err) {
        if (err) {
            return console.log(err);
        }
        cb();
    });
});
 
 
gulp.task('serve', function(cb) {
    sharkAutomation.registerServerTasks({
        baseConf: config,
        gulp: gulp
    });
 
    //the open-url helps to open url setted.Should not run it until the server is ready. 
    runSequence(['browser-sync', 'serve-express'], 'open-url', cb);
});

build-task

Shark-automation helps you to build source code and deal the static resource such as compress、md5.You can assemble the tasks shark-automation registed to do the build.Below is the list of tasks shark-automation registed and the npm tool it depend on:

  • clean:Clean the build folder depned on gulp-clean
  • sass-preprocess:Compass sass to css depend on gulp-sass.
  • webpack-server:use webpack to build js. Depend on webpack、webpack-stream
  • useref:merge static resource the html and ftl linked depend on gulp-useref
  • imagemin: min the image depend on gulp-imagemin
  • revision-image、revision-video: reversion the image and video use md5 depend on gulp-rev
  • revreplace-css、revreplace-js: replace the image link url after reversion-image depend on gulp-rev-replace
  • revision-css、revision-js:reversion the css or js depend on gulp-rev
  • revreplace-html、revreplace-ftl: repalce the static resource include js、css、image link url depend on gulp-rev-replace
  • copy-build: copy the builded files to the dest of build
  • zip: compress files to zip depend on gulp-zip、md5
  • deploy: depoly the build files to the git repository depend on shark-deploy-git

Demo:

var gulp = require('gulp'),
    argv = require('yargs').argv,
    runSequence = require('run-sequence'),
    sharkAutomation = require('shark-automation');
var config = require('./config.js'); //config file 
 
gulp.task('build', function(cb) {
    sharkAutomation.registerBuildTasks({
        baseConf: config,
        gulp: gulp
    });
    runSequence(
        // clean folders 
        'clean',
        // compass and copy to tmp1 
        ['sass-preprocess', 'webpack-server'],
        // use reference in html and ftl 
        ['useref'],
        // imagemin and copy to tmp2  
        'imagemin', 
        // revision images  
        'revision-image',
        // revreplace images 
        ['revreplace-css', 'revreplace-js'],
        // revision css,js 
        ['revision-css', 'revision-js'],
        // revreplace html,ftl 
        ['revreplace-html'],
        // copy to build dir 
        ['copy-build'],
        // callback 
        cb
    );
 
});

depoly-task

You could use shark-automation to deploy resouce to the git repository when you have builded the source code.

Demo:

var gulp = require('gulp'),
    runSequence = require('run-sequence'),
    sharkAutomation = require('shark-automation');
var config = require('./config.js'); //config file 
gulp.task('deploy', function (cb) {
    sharkAutomation.registerDeployTasks({
        baseConf: config,
        gulp: gulp
    });
    runSequence(
        'shark-deploy',
        cb
    );
});

The npm package which the tasks shark-automation registed depend on is config with default options.If you want to override the default option, you can do this way:

var sharkAutomation = require('shark-automation');
var config = require('./config.js'); //config file 
sharkAutomation.registerTasks({
    baseConf: config,
    //the key is the npm package name in camel-case you want to override 
    //the value is the option you want to set.It follows the npm package's mode 
    gulpSass: {
 
    }
});