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

ropegulp

v1.4.5

Published

package small frontend projects workflow simple

Downloads

10

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

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

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

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

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

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

argument

argument:{
  rename:{..},//optional,see gulp-rename config
  uglify:{..},//optional,see gulp-uglify config,
  reload:true//optional
}

pool task,html/css/js file

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

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

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

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)

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

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;