I am new to npm run scripts can I do the following tasks using only npm run scripts? (i.e without any task runner like gulp and grunt)

  1. concat js
  2. scss to css watch
  3. get notified about succesful js concatenation and scss to css conversion
  4. and moving only html, css, js to deployment directory

Any help would be greatly appreciated!

1 Answers

Nathan Wright On Best Solutions

I don't see why not? To give you a little context:

npm run scripts allow you to easily run: any custom script you create, or any script provided from within your node_modules directory. This is exactly what any task runner is providing you with: i.e. custom scripts to accomplish common development tasks, they have just premade these scripts whereas with npm run scripts you're creating them yourself. These npm scripts are created by adding them to the "scripts" field within your package.json file and can be executed by typing the following: npm run <script-name>.

How are we able to just run the binaries of locally installed packages?

Well, the binaries of locally install packages are made available to you courtesy of your PATH environment variable. This is extremely convenient and allows you to run said binaries simply by typing the the name of said package instead of having to point to: node_modules/.bin/<node_module>. Furthermore, to see which scripts are available to you issue a: npm run

Ok back to your question.. Yes you'll will just have to create custom scripts utilizing various libraries to accomplish said task.

For example, scss to css watch, you could create a script like so:

"scripts": {
    "buildscss": "sass --watch app/sass:public/stylesheets"

Alternatively, you could use node-sass to handle this task:

npm install --save-dev node-sass
"scripts": {
  "buildscss": "node-sass --output-style compressed -o dist/css src/scss"

To serve and automatically inject changes you can utilize browser-sync. Something like the following:

npm i -D browser-sync
"scripts": {
  "serve": "browser-sync start --server --files 'dist/css/*.css, dist/js/*.js'"

Alternatively if you only want to move html, css, js to a deployment directory, <dist> in this case, you could do the following:

"scripts": {
  "copy": "cp <html_dir> dist/ && cp <css_dir> dist/ && cp <js> dist/",

As for your question about notifications: your custom script would run other custom scripts and print to the console the outcome of said script. There is much more that you can do with npm run scripts, such as: linting, watching, combining scripts, etc.. For a great tutorial check out this link as I am just scratching the surface.

Hopefully that helps!