Is it possible to simultaneously run watchify and node-sass watch together?

Currently, I am utilizing npm scripts in conjunction with watchify and node-sass while incorporating the -w parameter.

I am curious if it is feasible to execute both of these 'watch' commands simultaneously. Would this setup ensure that only style.css gets compiled when the .scss file changes, and only bundle.js gets compiled when there are updates in the JavaScript source?

"scripts": {
    "watch-js":"watchify dev/index.js -o dist/bundle.js",
    "watch-css": "node-sass -w my-styles.scss style.css",
    "thewatcher": "npm run watch-js & npm run watch-css"
}
javascriptcssnpm

Answer №1

Absolutely, that is precisely the anticipated outcome. The script named "thewatcher" will execute "watch-js" and "watch-css" autonomously. Watchify will solely monitor modifications made to dev/index.js while node-sass will exclusively monitor changes made to my-styles.scss. Should you wish to be notified immediately after a new dist/bundle.js file has been generated, amend your "watch-js" script to include the -v flag:

"watch-js":"watchify dev/index.js -o dist/bundle.js -v"

Answer №2

Unfortunately, the solution provided as the accepted answer wasn't effective for me because depending on the order of the commands, one would block the other.

Luckily, I came across a reliable package called parallelshell which can be found here on github

To implement this, simply include the following example npm script:

"debug": "parallelshell \"npm run watch:sass\" \"npm run watch:js:debug\" "

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My DIV elements are not responding to the widths I set for them. What could be the issue?

Recently, I've been delving into the world of Flex to experiment with some unique layouts. However, I encountered an issue where my divs were not recognizing widths as expected. I attempted to set the first div of each row to 5% width so they would ...

htmlcssflexbox

Bootstrap - Border padding excessively wide

For a project exercise using bootstrap, I'm working on recreating a page that can be found here: https://codepen.io/freeCodeCamp/full/NNvBQW I've hit a roadblock in trying to put a border around the image. Here's the code I have so far: htt ...

htmlcsstwitter-bootstrap

Wave Filter in SVG

While attempting to create a fisheye-esque filter in my SVG, I came across this interesting codepen example: http://codepen.io/johanberonius/pen/RopjYW The effect works well, but I would like it to be a bit more pronounced. Unfortunately, I am unable to m ...

javascriptcsssvgfiltermapping

Combining Multiple Optional Async AJAX Calls

In my Angular 1.5.8 app, I have different views that require various combinations of the same 3 ajax requests. Some views need data from all three endpoints, while others only need data from one or two. To efficiently manage the retrieval of this data, I ...

javascriptangularjsasynchronouspromiseq

Having issues with my jQuery getJSON request. It's returning an empty response even though

I have been struggling to find a solution to this particular issue with no luck... Here is the jQuery getJSON request that I am working on: $.getJSON("http://localhost:8080/context/json/removeEntity.html", { contentId : 1, entIndex : entityIndex ...

javascriptjqueryjsongetjson

Singleton pattern in Node.js dependencies management

I am currently in the process of developing my own npm package titled my-package. This package has a dependency on dependency-a and is intended to be used in a project called cool-project, which also relies on both my-package and dependency-a. cool-projec ...

node.jsnpm

Is it better to append content in JQuery rather than replacing it with .innerHTML?

Here is a function designed to retrieve older wallposts from a user, 16 at a time, and add each chunk of 16 to the end of the current list in the div called "sw1". The function works well, except when there is a wallpost containing a video or embedded obj ...

javascriptjquery

Adjusting the width of an image in Safari

I just launched my website, but I encountered an issue with the image size in Safari. In my CSS, I set the width like this: img { width: 450%; } Here is the site: I can't figure out why the images display correctly in Chrome and Mozilla, but ...

csssafarisass

What is the best method for arranging drop-down menu options in alphabetical order?

Is there a way to organize the options alphabetically in the dropdown menu of Material-UI? I understand that arrays can be sorted easily using arr.sort(). However, when I try const options = [...].sort(), I still see unsorted values in the dropdown menu. ...

javascriptreactjsmaterial-ui

Is it possible to alter the name of a slot before displaying the element in the shadowDOM, depending on the slot utilized in the DOM?

In my project, I am working on implementing different features for both desktop and mobile devices. Some of these features can be replaced by slots. My goal is to have a slot that can be either replaced by a desktop slot called poster-foreground, or a mobi ...

javascripthtmltypescriptlit

VueJS component fails to remain anchored at the bottom of the page while scrolling

I am currently using a <md-progress-bar> component in my VueJS application, and I am trying to make it stay fixed at the bottom of the screen when I scroll. I have attempted to use the styles position: fixed;, absolute, and relative, but none of them ...

javascriptcssvue.jsvue-material

Achieving proper stacking of a table with other div elements

I've come across some similar inquiries, but none seem to fully address the specific issue at hand. If there's an existing thread on this that I overlooked, I apologize in advance. So, here's a multi-part problem: my solution for the first ...

htmlcsshtml-tableflexbox

I just obtained the height measurement of a dynamic table - now I must transfer this height value to a different element

Recently, I encountered a situation where I needed to get the height of a dynamic table using code like this: var table = document.getElementById("test"); document.write(table.offsetHeight); However, the challenge arose when I realized that I also needed ...

javascripthtmlcss

document ready function in the Microsoft AJAX client side library

The Microsoft AJAX client-side library contains various functions that imitate the server-side Page Life Cycle and conditions like if (!Page.IsPostBack). I am unsure about which client-side function corresponds to the equivalent server-side method. What is ...

javascriptjqueryasp.net.netajax

AngularFire Google OAuth failing to retrieve the user's email address

I am trying to retrieve the email address from Google OAuth using AngularFire, but the popup is not requesting permission for the email. This code snippet is from the Firebase Google authentication documentation var ref = new Firebase("https://<your-f ...

javascriptangularjsfirebaseangularfire

Difficulty obtaining elements in Internet Explorer, however works fine in Chrome and Firefox

My <textarea> is set up like this: <textarea class="form-control notetext" id="{{this._id}}-notetext" name="notetext">{{this.text}}</textarea> I am using ajax to send data and load a partial webpage. After loading the content, I attemp ...

javascriptjqueryinternet-explorer

When importing modules in node.js, the presence of a function can overwrite another function even if it

Within this code snippet, I am utilizing Express.js. //index.js app.use('/',routes()); //app/routes.js module.exports = function() { express = require('express'); const loggedUserProfileController = require('../controller ...

javascriptnode.jsexpress

What is the most effective method for storing multiple data points in an array?

I have developed the following script: let data = [ {day: 1, time: '08:00', note: 'madrid'}, {day: 2, time: '08:00', note: 'barcelona'}, {day: 3, time: '10:00', note: 'juve ...

javascriptjqueryarraysvue.jskey

Loading V-Select with Data from JSON Using Vue.js

I tried to populate my v-select multiselect element using a JSON object, but unfortunately it did not work as expected. Here is the result I encountered: https://i.sstatic.net/kd1Gl.png <v-select v-model="serviceValues" :items="serviceO ...

javascriptvue.jsvue-componentvuetify.js

Discrepancies in Video Element Size: Mobile Versus Desktop

Why does the video element have different sizing behavior between mobile and desktop? I noticed on this website that on desktop Chrome, its width is about 35% of the browser while on iPad Chrome it's only about 10% Does anyone know why this is happen ...

csshtmlhtml5-video