Gulp watch isn't doing anything significant

After following a tutorial on using gulp-sass, I have set up a basic configuration along with a .scss file that needs to be compiled into .css. However, when I run gulp watch from the console, the watch task seems to register fine but nothing happens when I edit the .scss file. I am trying to figure out why.

gulpfile.js

var gulp = require('gulp');  
var sass = require('gulp-sass');

//style paths
var sassFiles = 'assets/styles/sass/**/*.scss',  
    cssDest = 'assets/styles/css/';

gulp.task('styles', function(){  
    gulp.src(sassFiles)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
});

gulp.task('watch', function() {  
    gulp.watch('sassFiles',['styles']);
});

terminal output:

shooshte@M:~/Webpages/CV2$ gulp watch
[20:38:40] Using gulpfile ~/Webpages/CV2/gulpfile.js
[20:38:40] Starting 'watch'...
[20:38:40] Finished 'watch' after 5.37 ms
javascriptgulp

Answer №1

When setting up the 'sassFiles' parameter, it is important to pass it as a variable and not just as a string in your code.

gulp.task('watch', function() {  
    gulp.watch(sassFiles,['styles']); // Make sure to remove the '' around sassFiles 
});

An issue was also noticed with passing the sassFiles variable into the styles task. This may not work as expected and could be an indication of a problematic directory structure.

The recommended approach for organizing a sass project can vary, but they all highlight the importance of breaking down your sass files into partials prefixed with an underscore.

/styles
  application.scss
  _footer.scss
  _header.scss
  _sidebar.scss

To efficiently import these partials, create a main scss file named application.scss and import all the partials within it.

@import "footer";
@import "header";
@import "sidebar";

By compiling only the application.scss file in the styles task, all referenced imports will automatically be included in the output CSS file.

gulp.task('styles', function(){  
    gulp.src('assets/styles/sass/application.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
});

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

Unable to adjust the width of a label element using CSS specifically in Safari browsers

Here's the issue I'm facing with my HTML code <input type="checkbox" asset="AAA" name="assets[AAA]" value="AAA" id="assets[AAA]" class="c_green" checked="checked"> <label for="assets[AAA]"></label> In my CSS, I have the follow ...

javascripthtmlcsssafari

Struggling to make the grunt.js task for postcss with autoprefixer function properly

I am currently facing issues with using postcss in conjunction with autoprefixer-core. Even though the css is being generated correctly, autoprefixer doesn't seem to be applying any prefixes. I have already installed postcss and autoprefixer via NPM ...

javascriptcssjsongruntjsautoprefixer

What is the best way to obtain multiple hexadecimal values from a URL query string using jQuery?

Here's the image tag I'm working with: <img src="http://www.example.com/render/pattern?obj=patterns/pattern_1&color=7F8C6C&obj=patterns/pattern_2&color=C8D9B0&obj=patterns/pattern_3&color=FFFFD1" width="100" height="100" a ...

javascriptjqueryurlparsing

Discover the locations where a mesh and a plane intersect using Three JS

After creating a three.js scene with a plane intersecting a mesh, I am trying to retrieve an array of points where the mesh's edge crosses the plane. Despite searching for solutions, I haven't found anything helpful so far. Please refer to the i ...

javascript3dthree.js

Protractor fails to acknowledge the function

While executing my test, an error popped up stating: browser.setlocation is not a function. I checked the Protractor website and found browser.setLocation() listed as a valid function. Why is it not recognizing its use in my code? I have experimented wi ...

javascriptnode.jsangularjsnpmprotractor

Tips for setting up the information in a Bootstrap popover

I am currently working on a Google web app that involves Google Sheets data. My objective is to have the data displayed when hovering over a button, but instead, the data appears directly on the button without the hover display. What might I have done in ...

javascripthtmlcssbootstrap-4web-applications

Is there a way to prevent Chrome from automatically toggling into debug mode?

When the debugging window is open, the debugger seems to start running through lines automatically without any breakpoints being set. I attempted to use the "Deactivate breakpoints" button, but it had no effect whether it was enabled or disabled. This is ...

javascriptjquerygoogle-chrome

Assign the "this" keyword of App.vue to the Vuex state

I have discovered a workaround for accessing vue-router and other services that only works within a Vue component. By saving the "this" of the Vue app in the state of Vuex within the created option of App.vue. Is this a good approach or could it potential ...

javascriptvue.jsvuex

What could be causing the errors when trying to populate fields while using Sequelize?

My current project involves working with Sequelize on an Apollo-Server backend. While most of the process has been smooth sailing, I've hit a roadblock when it comes to refactoring my code. Specifically, I am encountering difficulties populating certa ...

javascriptnode.jssequelize.js

Get the value of a function that was previously assigned to an onclick event using JavaScript

Here is the code snippet I am currently working with: document.getElementById(myid).onclick = function() { HandleGPIO(val1, val2); }; if (console) { console.log(document.getElementById(myid).getAttribute('onclick')); } My goal is to de ...

javascriptdomonclick

The attached zip file is not being successfully downloaded by the client

I'm facing an issue with downloading a zip file in my MERN application. Although I receive the file in the response, the client fails to initiate the actual download process. My approach involves zipping files using archiver and then fetching them. A ...

javascriptnode.jsreactjsexpress

Performing multiplication and calculating the final sum of an array object in Node JS

I am looking to calculate the total based on an array of objects sum of each row = sum of costs * quantity total = sum of (sum of each row) Below is the object array that I am working with const newArray = [ { 'LOA Qty': '2000', ' ...

javascriptnode.jsreactjs

Receiving a mysterious error despite having everything clearly defined in the JavaScript code

Attempting to create a simple jQuery plugin: HTML: <textarea> <p>Hello World!</p> </textarea> jQuery: $.fn.wysiwyg = function (options) { var e = $(this).replaceWith("<iframe>"); console.log($(this)[0].conten ...

javascriptjqueryhtmljquery-plugins

Using JQuery to make a GET request and receive a JSON response, then selecting particular objects

I am in the process of developing a straightforward web application. The concept involves users inputting a license plate number, which will then connect to an OpenData API based on Socrata that houses information about all registered vehicles in my countr ...

javascriptjqueryarraysjsonsocrata

What is the best way to update a local variable in JavaScript using Ajax requests?

function validate_authentication(){ var is_authenticated = false; $.ajax({ type: "POST", url: "/account/islogin/", data: "", async: "false", success: function(data) { if (data == "null") { ...

javascriptajax

Troubleshooting problem with video recording functionality using HTML 5 media streams

My HTML 5 code for video recording and uploading is encountering a JavaScript error when the start button is clicked. The error messages I am receiving are: "TypeError: webcamstream.record is not a function streamRecorder = webcamstream.record();" "TypeE ...

javascripthtml

Unfortunate escapement of characters discovered in variable that returns JSON image source

I am currently utilizing Google Tag Manager to incorporate the 'article' JSON markup and retrieve different variables for modifying specific sections on particular pages. Among the elements I am attempting to obtain is the image source. At prese ...

javascriptjsongoogle-tag-manager

The latency of asynchronous components in Nuxt.js causes delays

Having Trouble with Delay and Loading in Async Component Here is the code snippet causing issues: <template> <div> <button @click="startMethod">start</button> <async-component v-if="start" /> </div> < ...

javascriptvue.jsdelaynuxt.jsasync-components

Guide to invoking a jQuery function by clicking on each link tab

Below is a snippet of jQuery code that I am working with: <script> var init = function() { // Resize the canvases) for (i = 1; i <= 9; i++) { var s = "snowfall" + i var canvas = document.getElementById( ...

javascriptjqueryhtml

Convert a relative path to an absolute path using the file:// protocol

When I scrape a website with similar html content, I come across the following code: <a href="/pages/1></a> In addition to this, I have access to the window.location object which contains: origin:"http://www.example.org" This allows me to ...

javascripthtmlpath