softpack v0.4.8

softpack

If you have any questions or want to contribute please contact me at meistermilad@gmail.com

Note: This module uses anymatch and has Bash-parity, please be aware that Windows-style backslashes are not supported as separators. See https://github.com/micromatch/micromatch#backslashes for more information.

npx softpack --server

or

npx softpack --build

npm install softpack or npm install softpack -g

softpack --boilerplate config and save output as softpack.config.js or where you want it if you use api instead of cli

type softpack --boilerplate to see availeble boilerpaltes

use like softpack --boilerplate {boilerplateName} and save output where you want it

type softpack --boilerplate to see availeble boilerpaltes

use like softpack --boilerplate {boilerplateName} > myFile.js

softpack --server

softpack --build

Softpack takes a configuration to perform function/s on the given context of files that where registered through an regEx.

a small starter script could look like this:

var softpack = require('softpack');
var path = require('path');
var nodeSass = require('node-sass');

softpack.server({
  dist: 'dist',
  src: 'src',
  rootPath: path.resolve(__dirname),
  actions:[
    {
      test: '**/*.scss'
      render: [
        function(context, objectData, yourSoftPackConfig) {
          return nodeSass.renderSync({
              file: objectData.fullPath,
              outputStyle: "expanded"
          }).css
        }
      ]
    }
  ]
})

this would watch all files in your project with the extension '.scss' and compile it to css files

every render or init function will get three parameters.

• context of current processed file
• object of current processed file
• configuration passed to softpack

It comes with two function.

var softpack = require('softpack');
var path = require('path');

var config = {
  rootPath: path.resolve(__dirname),
};
/* run developement server */
softpack.server(config);
/* run build process */
softpack.build(config);

example config:

var config = {
  start: function(c) {
    if(c.BUILD) {
      console.log("starting build process")
    } else {
      console.log("starting server")
    }
  },
  end: function(c) {
    if(c.BUILD) {
      console.log("finished build process")
    } else {
      console.log("server ready")
    }
  },
  src: 'src',
  dist: 'dist',
  rootPath: path.resolve(__dirname),
  ignore: [
    /** ignores all */
    "src/ignored_all", 
    /** ignores all exept js files */
    "src/ignored_exept/(!*.js)",
    /** ignores all js files */
    "src/ignored_files/*.js", 
    /** ignores all scss files beginning with `_` */
    "src/ignored_specific/(_)*.scss", 
  ],
  socketCallbacks: {
    log: function (msg) {
      console.log(msg)
    },
    foo: function (o) {
      console.log("foo is emitted with", o.msg)
    }
  },
  log: {
    change: true,
    serve: true,
    add: true,
    delete: true,
  },
  actions: [
    {
      test: "**/*.hbs",
      init: [
        // iniFunction
      ]
    },
    {
      test: "js/**/*.js",
      bundleName: "js/main.js",
      render: [
        // renderFunction
      ]
    },
    {
      test: "**/*.scss",
      bundleName: "css/main.css",
      renderEach: [
        // renderEachFunction
      ]
    },
    {
      test: "**/*.html",
      fileName: "[path]/[name].html",
      socketLoad: true,
      render: [
        // renderFunction
      ]
    }
  ]
}
softpack.server(config)
// softpack.build(config)

the softpack.server and softpack.build function take the same configuration

socketCallbacks example:

...
socketCallbacks: {
    log: function(msg) {
        console.log(msg)
    },
    foo: function(o) {
        console.log("foo is emitted with", o.msg)
    }
}
...

and on frontend

...
socket.emit("log", "hello server")
socket.emit("foo", {
 msg: "hello foo!"   
})
...

the diffrence between the functions inside the init array and the render array are that the functions inside the init array will execute once a file was added to the watcher or changed and the functions inside the render array are executed when the file is requested through the fileName path. Render functions must return a context.

when setting the fileName you can add [path] and [name]. [path] will be replaced with the relative path of current processed file. [name]is replaced with the name of the current processed file, but without file extension.

init function example:

When hbsRenderer is now applied to an render array it will perform the handlebars compile function, add {} as the templates context and return the compiled string. Obviously you would most likely add some more data than {}, but thats up to you.

render function example:

here we would for example register path/to/my/partials/person.hbs as person