npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gulp-shark-automation

v1.2.2

Published

前端自动化构建

Downloads

12

Readme

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

  1. make a mock server during development phase
  2. 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: {

    }
});