gulp-shark-automation

Gulp-shark-automation is a tool for automation of front-end.It supplies two functions:

• make a mock server during development phase
• build the source code and static resource during the deploy phase

Gulp-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'
    port: 9100, //port of mock 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 mock 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. not required
    //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

Gulp-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 gulpSharkAutomation = require('gulp-shark-automation'),
    express = require('express'),
    openurl = require('openurl');
var config = require('./config.js'); //config file
gulp.task('server', function(cb) {
    var app = express();

    var router = gulpSharkAutomation.registerServer({
        baseConf: config
    });
    app.use(router);
    app.listen(config.port, function(err) {
        if (err) {
            return console.log(err);
        }
        console.log('express listening on %d', config.port);
    });
    //the browser-sync task is registed by gulp-shark-automation
    // It is response for hot replace or livereload when the static resource changes
    runSequence('browser-sync', function() {
        //open the url automatically
        openurl.open(config.openurl);
        cb();
    });
});

build-task

Gulp-shark-automation helps you to build source code and deal the static resource such as compress、md5.You can assemble the tasks gulp-shark-automation registed to do the build.Below is the list of tasks gulp-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、imagemin-pngquant
• revision-image: reversion the image 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 argv = require('yargs').argv,
    require('run-sequence'),
    gulpSharkAutomation = require('gulp-shark-automation');
var config = require('./config.js'); //config file
gulpSharkAutomation.registerTasks({
    baseConf: config
});
gulp.task('build', function(cb) {

    runSequence(
        // clean folders
        'clean',
        // compass and copy to tmp1
        ['sass-preprocess', 'webpack-server'],
        // // use reference in html and ftl
        ['useref'],
        // // imagemin and copy to tmp1
        '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
    );

});

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

var config = require('./config.js'); //config file
gulpSharkAutomation.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: {

    }
});