Tools to be used to setup javascript Libraries

[GASTON CHE]

This is an extract of my package.json. It shows the devDependencies I am going to be using to setup the library

  "devDependencies": {

    "npm-run-all": "^4.0.0",

    "babel-cli": "^6.24.1",

    "babel-preset-env": "^1.5.1",

    "browserify": "^3.8.0",

    "cpx": "^1.5.0",

    "jshint": "latest",

    "mkdir": "*",

    "watchify": "^3.8.0"

  }

As it show I will be using babeljs to transpile the ES6 javascript code I will be writing. So for that I have included babel-cli and babel-preset-env plugin,

I will be using browserify to build the javascript library into one output file includiing all dependencies and watchify is a browserify plugin to increase my development time.

I am using jshint for js syntax and semantics checking, my jshint configs contain, very strict javscript checking options, to ensure clean javascript being written by any future contributors,

I have also enabled options within jshint configs to for ES6 syntax linting,

Currently I am researching for some tools for the following,

• To compile the library's css into one file, 
• a way to launch a simple  server to view examples during development, in order to easily visualize the changes i do on the UI.
• 
  

Very soon I will be adding the tools for the tests to be done within the system, currently thinking of jasmine or mocha.

I am currently considering to use uglify js to produce a minified version of the library on build 

My current build process is this:

"scripts": {

    "lint": "jshint --verbose src/js/**.js",

    "build": "npm-run-all build:*",

    "watch": "npm-run-all --parallel watch:*",

    "build:copy-css": "cpx 'src/css/**/*.*' temp/css",

    "watch:copy-css": "cpx 'src/css/**/*.*' temp/css --watch",

    "build:lint": "npm run lint",

    "watch:lint": "npm run lint",

    "build:browserify": "mkdir -p ./temp/js && browserify src/js/index.js -o temp/js/bundle.js",

    "watch:browserify": "mkdir -p ./temp/js && watchify src/js/index.js -o temp/js/bundle.js",

    "build:babel": "babel temp -d build",

    "watch:babel": "babel temp -d build",

    "test": "echo \"Error: no test specified\" && exit 1"

  },

so running npm run build or run watch will first lint the code that has been written in the src/js/index.js then browserify build a temporal version of the library to the temp/js folder. Babel js now transpiles this javascript from the temp folder to the build folder.

Any suggestions of tools that can be used or any changes that can be made to this current setup is welcome. Thanks