CODEWITHSUNDEEP
javascriptnode.jsnpm
user818700
user818700

Reputation:

How can I use 'watch' in my npm scripts?

I have the following directory structure:

enter image description here

And my package.json looks like this:

{
  "name": "personal_site",
  "version": "1.0.0",
  "description": "My personal website.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "node-sass": "node-sass --output-style compressed --include-path node_modules/bourbon/app/assets/stylesheets/ --include-path node_modules/bourbon-neat/app/assets/stylesheets/ 'src/scss/styles.scss' 'dist/css/bundle.min.css'",
    "html-minifier": "html-minifier --collapse-whitespace --remove-comments --remove-attribute-quotes -o 'dist/index.html' 'src/index.html'",
    "imagemin": "imagemin src/images dist/images",
    "serve": "http-server ./dist"
  },
  "author": "Dean Gibson",
  "license": "ISC",
  "dependencies": {
    "bourbon": "^4.2.6",
    "bourbon-neat": "^1.7.4",
    "normalize-scss": "^4.0.3"
  },
  "devDependencies": {
    "html-minifier": "^1.3.0",
    "http-server": "^0.9.0",
    "node-sass": "^3.4.2"
  }
}

So firstly, I have to run each of these scripts individually e.g. npm run node-sass or npm run html-minifier etc. What I'd ideally want is to run npm serve which will do the following:

  1. run html-minifier
  2. run node-sass
  3. run run image-min
  4. run http-server
  5. Lastly, watch everything in my src folder and run the respective scripts as files change e.g. node-sass etc..

How can I best tackle this problem?

Upvotes: 47

Views: 98583

Answers (3)

Mehdi
Mehdi

Reputation: 7413

You can watch your directories using nodemon.

One solution for you is to create three watch scripts, one for each task:

  • watch:node-sass,
  • watch:html-minifier, and
  • watch:imagemin.

Then have a central script watch starting the three:

{
  "name": "personal_site",
  "version": "1.0.0",
  "description": "My personal website.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "node-sass": "node-sass --output-style compressed --include-path node_modules/bourbon/app/assets/stylesheets/ --include-path node_modules/bourbon-neat/app/assets/stylesheets/ 'src/scss/styles.scss' 'dist/css/bundle.min.css'",
    "html-minifier": "html-minifier --collapse-whitespace --remove-comments --remove-attribute-quotes -o 'dist/index.html' 'src/index.html'",
    "imagemin": "imagemin src/images dist/images",
    "serve": "http-server ./dist",
    "watch:node-sass": "nodemon -e scss -x \"npm run node-sass\"",
    "watch:html-minifier": "nodemon -e html -x \"npm run html-minifier\"",
    "watch:imagemin": "nodemon --watch src/images -x \"npm run imagemin\"",
    "watch": "npm run watch:node-sass & npm run watch:html-minifier & npm run watch:imagemin"
  },
  "author": "Dean Gibson",
  "license": "ISC",
  "dependencies": {
    "bourbon": "^4.2.6",
    "bourbon-neat": "^1.7.4",
    "normalize-scss": "^4.0.3"
  },
  "devDependencies": {
    "html-minifier": "^1.3.0",
    "http-server": "^0.9.0",
    "node-sass": "^3.4.2"
  }
}

Read also: How to Use npm as a Build Tool.

Upvotes: 55

revelt
revelt

Reputation: 2420

I advise onchange, see this boilerplate.

For example,

"watch:css": "onchange 'src/scss/*.scss' -- npm run build:css",

or

"watch:js": "onchange 'src/js/*.js' -- npm run build:js",

No Grunt or Gulp needed!

Upvotes: 37

Handonam
Handonam

Reputation: 618

The most widely adopted tools for this scripted case is to go with gulp or grunt. They are tools that you will encounter very often. You can also find their grunt/gulp libs for your minify/concat/copy/imagemin, as well as watcher libs so they change as you make changes to code. Nodemon/forever/pm2 have watch capabilites to restart your http server as well

Upvotes: -4

Related Questions