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:
- 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: {
}
});