ropegulp
v1.4.5
Published
package small frontend projects workflow simple
Downloads
10
Maintainers
Readme
ropegulp
package small frontend project and inject into other project simple
Features
- synchronous or asynchronous packaging project task
- custom task
- exec other commands
Installation
//install
npm install ropegulp -g
//use
...somedir>ropegulp create proj1 //create scaffolding files in proj1 dir and install dependencies
...somedir>ropegulp create //create scaffolding files in the current dir and install dependencies
...somedir>ropegulp task task1 -open //run dev task1 and open the browser
...somedir>ropegulp task task2 //run task2 task
example
write in ropegulpfile.js
//run rollup and pug at the same time , after end of rollup and pug ,run copy
let flow=[
[
{engine:'rollup',src:'./src/scripts/index.js',dist:'./dist/scripts',argument:{}},
{engine:'pug',src:'./src/pug/index.pug',dist:'./dist',watch:'./src/pug/**/*',argument:{}}
],
{engine:'copy',src:'./dist',dist:'../proj2/dist',argument:{}}
];
//run all command at same time
let proj1:[
{engine:'scss',src:'./src/scss/index.scs',dist:'./dist/styles/css',watch:'./src/scss/**/*',argument:{reload:true}},//update and refresh browser
{engine:'sprite',src:'./src/images/*',dist:'./dist/images',argument:{sprite:{scale:0.5}}},//create sprite image
];
//browser arguments use browser-sync browser option
module.exports={
task1:{
browser:{//optional
port:8899,
server:{
index:'index.html',
baseDir:'./dist'
}
},
map:proj1,//optional,map tasks
exec:[
{cmd:'webpack',dir:'./somedir'}//run webpack at the same time in dir somedir
]
}
}
tasks can be used
"inject","pug", "require", "scss",
"copy", "ngHtml", "pool",
"watch", "concat", 'typescript',
'version','markdown','freemarker',
'sprite',"rollup"
ropegulpfile.js
browser option use browsersync option ,browsersync option
// engine use the above tasks
//src use task origin file path
//dist use task dist dir path
//watch
//argument is write in ## task&&argument
let proj1=[
{engine:'pug',src:'./src/pug/index.pug',watch:'./src/pug/**/*',argument:{rename:'',reload:true,htmlmin:{}}}
];
let allProj={
proj1,
proj2:[....]
}
//flow task is same as map,just run process are different
let flow =[
{task1},
{task2},
[task3,task4,task5],
{task6}
]
module.exports={
task1:{
map:proj1,//optional,map tasks
flow:someflow,//optional,flow tasks
port:8909,//optional
staticDir:'someRootDir',//optional,browser read root dir
staticFile:'index.html',//optional,browser read file
exec:[//optional
{cmd:'npm start',dir:'../dir1/dir2'}//run cmd in somedir
]
},
task2:{
...
map:proj2,
....
}
}
task&&argument
build-in task files are in ./ropegulp/src/tasks after use ropegulp create
general argument
argument:{reload:true} //refresh browser if setting port&&file&dir in ropegulpfile
inject ,inject current project files to other part of project file
- core lib:built-in
- lib: gulp-rename
argument&&use
//default reg value is /\?ropegulp\?/gm
{engine:'inject',src:'./proj1/dist/a.js',dist:'./java-proj/static',watch:'./proj1/dist/a.js',argument:{from:'./java-proj/static/all.template.js',reg:/\?ropegulp\?/gm,rename:'all.js'}}
//./proj1/dist/a.js
// var a=1;b=1;
//./java-proj/static/all.template.js
// function abc(){} ?ropegulp? function cde(){}
//output in ./java-proj/static/all.js
//function abc(){} var a=1;b=1; function cde(){}
scss task,scss file
- core lib:gulp-sass
- lib: gulp-sass,gulp-rename,gulp-csso
argument:
argument:{
scss:{..}//optional,see gulp-sass config
rename:{..},//optional,see gulp-rename config
csso:{..},//optional,see gulp-csso config,
reload:true//optional
}
sprite task,image file
- core lib: gulp.spritesmith
- lib: gulp.spritesmith,gulp-imagemin
argument:
argument:{
sprite:{
scale:0.5,//optional,default is 1,scale sprite
prefix:'sprite',//option define prefix name in .sprite-back{width:100px;}
imgName:'sprite.png',
cssName='sprite.css'
},
imagemin:{..}//optional,see gulp-imagemin config
rename:{..},//optional,see gulp-rename config
reload:true//optional
}
pug task,pug file
- core lib:gulp-pug
- lib: gulp-pug,gulp-rename,gulp-htmlmin
argument:
argument:{
htmlmin:{..}//optional,see gulp-htmlmin config
rename:{..},//optional,see gulp-rename config
pug:{..},//optional,see gulp-pug config,
reload:true//optional
}
rollup task,js file
- core lib:rollup
- lib: rollup,rollup-plugin-alias,rollup-plugin-uglify, rollup-plugin-commonjs,rollup-plugin-node-resolve
argument
argument:{
alias:{..},//optional,see rollup-plugin-alias config
rollup:{..},//optional,see rollup config
commonjs:{..},//optional,see rollup-plugin-commonjs config
uglify:{..},//optional,see rollup-plugin-uglify config
resolve:{..},//optional,see rollup-plugin-node-resolve config
rename:'string',//optional,rename file string
reload:true//optional
}
copy task
- lib: gulp-rename,gulp-uglify
argument
argument:{
rename:{..},//optional,see gulp-rename config
uglify:{..},//optional,see gulp-uglify config,
reload:true//optional
}
pool task,html/css/js file
- core lib: gulp-pool
- lib: gulp-pool,gulp-rename,gulp-uglify
argument:
argument:{
pool:{..}//optional,see gulp-pool config
rename:{..},//optional,see gulp-rename config
uglify:{..},//optional,see gulp-uglify config,
reload:true//optional
}
version task,add version in html/js/css,like src="./...js?v=xxx"
use example
{engine:'version',
src:{
template:'./dist/index.html',
assert:'./dist/asserts'
},
dist:'./dist/somedir',
argument:{
version:{
configDir:'./dist/config',//store vConfig.json which have file map
cacheRemove:true,//whethe remove old file
format:func//define version rule,if not define,will use md5(new Date()).getTime()
}
}
}
markdown task
- core lib:marked
- lib: marked,gulp-rename,gulp-htmlmin
argument:
argument:{
htmlmin:{..}//optional,see gulp-htmlmin config
rename:{..},//optional,see gulp-rename config
reload:true//optional
}
require task ,js file,bundle require module file to one
argument:
argument:{
uglify:{..}//optional,see gulp-uglify config
rename:{..},//optional,see gulp-rename config
require:{},//optional,see gulp-requirejs-optimize config
reload:true//optional
}
ngHtml task, change html to angular.js(v1)&&require.js module
- core lib:ngHtml
- lib: ngHtml,gulp-rename,gulp-uglify
argument
argument:{
ngHtml:{
moduleName:'..',//default apptemplates
prefix:''
},
uglify:{..},//optional, see gulp-uglify
rename:{..},//optional see gulp-rename
reload:true
}
freemarker task,ftl file,run this task ,must install java and fmpp
- core lib :freemarker.js
- lib: freemarker.js,gulp-rename,gulp-htmlmin
argument:
argument:{
freemarker:{
viewRoot:'src base dir path',
index:'file name',
data:{}//optional,template data inject
},
htmlmin:{..}//optional,see gulp-htmlmin config
rename:{..},//optional,see gulp-rename config
reload:true//optional
}
typescript task ,ts file,(support is also less)
- core lib:tsify
- lib: tsify,gulp-rename,gulp-uglify
argument
argument:{
uglify:{..},//optional, see gulp-uglify
rename:{..},//optional see gulp-rename
reload:true
}
watch task,watch file and reload browser
no argument
concat task
- core lib:gulp-concat
- lib: gulp-concat,gulp-rename,gulp-uglify
argument:
argument:{
uglify:{..},//optional, see gulp-uglify
rename:{..},//optional see gulp-rename
concat:{..},//optional see gulp-concat config
reload:true
}
custom task
custom task via ropegulp-custom-task dir which is created in 'ropegulp create' cmd,there is a example file in this dir.
//if file name is example.js,ropegulpfile.js engine name is example,{engine:'example',src:'..',dist:'...'}
// example.js
let run = function(opt) {
return new Promise(function(resolve,reject){
// src ,dist,argument is define in task object,
//browser is browsersync instance,
//path is current run file path
//lastSend : if use flow tasks,lastSend is the information from last task
// lastEngine:is use flow tasks,lastEngine is then engine from last engine
// type ,flow or map
// engine now task name
//allSend all send informations from last all flow tasks
let { src, dist, argument = {}, browser, path, lastSend, lastEngine, type, engine,allSend} = opt;
let {
reload
} = argument;
//code task process
//browser.reload();
//resolve(..)//if use flow ,send msg to next task
})
};
// export
module.exports = run;