Issue with Gulp Watch failing to detect modifications in Browserify files

Currently, I am utilizing the laravel-elixir-vueify npm package for my project. Gulp watch functionality performs as expected when I make changes to files within the "scripts" or "styles" functions. However, there seems to be an issue when it comes to monitoring changes in the single file included in the "browserify" function. Below is the snippet of code I am working with:

var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');

elixir(function(mix) {
    mix.sass('app.scss')
        .browserify(['main.js'
        ], './public/js/main.js')

        .scripts([
            'libs/jquery-2.1.1.js',
            'libs/bootstrap.js',
            'libs/vue.js',
        ], './public/js/libs.js')

      .styles([
            'libs/bootstrap.min.css',
            'libs/style.css'
        ], './public/css/libs.css');
});

I have also attempted simplifying the code without success:

mix.sass('app.scss')
        .browserify(['main.js')
(etc...)

My main goal is to ensure that gulp watch triggers whenever any changes are made to main.js. Additionally, there is a Vue component file imported into main.js which undergoes frequent modifications. It would greatly benefit me if gulp watch could detect these changes too. Any advice on how to achieve this?

If the above scenario is not possible, is there a way to specifically execute gulp so that it only recompiles the browserify file and skips the scripts/styles files?

javascriptlaravelgulpbrowserifyvue.js

Answer №1

give it a shot 

elixir(function(mix) {
   mix.sass('app.scss');

   mix.browserify(['main.js'
    ], './public/js/main.js');

   mix.scripts([
        'libs/jquery-2.1.1.js',
        'libs/bootstrap.js',
        'libs/vue.js',
    ], './public/js/libs.js');

   mix.styles([
        'libs/bootstrap.min.css',
        'libs/style.css'
    ], './public/css/libs.css');
 });

make sure to include this code in your main.js file

import Vue from 'Vue';

and for importing vue components :

import YourComponent from './yourPATH/YourComponent.vue';

hope this does the trick.

checkout my gulpfile.js

var elixir = require('laravel-elixir');

require('laravel-elixir-vueify');


elixir(function(mix) {
    mix.sass('app.scss','resources/css');

    mix.browserify('main.js');

    mix.styles([
        'libs/bootstrap.css',
        'app.css'
    ]);

    mix.scripts([
        'libs/bootstrap.js',
        'libs/jquery-2.2.2.js'
    ]);
});

my simple main.js

import Vue from 'Vue';
import Alert from './components/Alert.vue';

new Vue({
    el: 'body',

    components: {Alert}
})

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

Setting the current date of a jQuery datepicker to the value of an input tag

I am looking to assign a value to an input tag that has a datepicker attached to it. Upon initialization of the datepicker, I want to set this value. Below is a hypothetical example of what I am trying to achieve: HTML: <input id="test" value="">&l ...

javascriptjquerydatepicker

How would the input value change if the clock time changed?

I am working with dynamic inputs that allow me to add and delete rows with inputs. These inputs include material-ui timepickers, which have an icon of a clock next to the input field. When I click on the clock icon, a clock widget appears. However, the val ...

javascriptreactjsinputmaterial-uionchange

Tips for showing data values on individual slices of doughnut charts using echarts

For my charting needs, I am currently using echarts and trying to figure out how to display the value or text of each slice in a doughnut chart directly on the slice itself. I have looked through all the configuration options but haven't been able to ...

vue.jschartshighchartsecharts

Retrieving the value of a checkbox in a React custom checkbox component

I am facing an issue with my dynamic checkbox functionality. I need to update the state based on the selected options only, but my attempt to filter the state on change is not working as expected. Can someone help me identify what went wrong? const check ...

javascriptreactjscheckbox

Using v-bind to pass props to the <nuxt> component in Nuxt.js

I recently completed a nuxt.js project where I encountered an issue with passing data to a component. In my initial Vue file, I included the following code: <nuxt v-bind:cur-language="curLanguage"/> Within a different Vue file placed in the designa ...

vue.jsnuxt.js

Leverage the power of AngularJS to send a PUT request to your Laravel

I am encountering an issue while attempting to send a put request using AngularJS in conjunction with Laravel. Upon sending the request, I am receiving the following error message: TypeError: Cannot set property '_method' of undefined ...

angularjsrestlaravel

Debugging Node.js Routes in Visual Studio Code: A Step-by-Step Guide

My application is structured as follows: server.js router routes emails.js index.js In my index.js file, I define the route like this: module.exports = function (app) { app.use('/emails', require('./routes/emails& ...

javascriptnode.jsexpressvisual-studio-code

How can you reposition a component within the dom using Angular?

Just started learning Angular, so I'm hoping this question is simple :) Without getting too specific with code, I could use some guidance to point me in the right direction. I'm currently developing a small shopping list application. The idea i ...

javascripthtmlangulartypescript

"Recently, I included a function called 'test' in the code, but I encountered an error stating that it was not recognized as a function. Can someone provide assistance

Issue Detected A 'TypeError' has been thrown: ".goal_test".click is not defined as a function Feel free to collaborate on the code by clicking this link: Please note that my modified code is enclosed within asterisk symbols. ...

javascripthtmlcss

How can I best declare a reactive variable without a value in Vue 3 using TypeScript?

Is there a way to initialize a reactive variable without assigning it a value initially? After trying various methods, I found that using null as the initial value doesn't seem to work: const workspaceReact = reactive(null) // incorrect! Cannot pass n ...

typescriptvue.jsvuejs3vue-composition-api

Click on the button to sort Angular data

Greetings! I am a newcomer trying to grasp the concepts of angularjs/typescript. I have compiled an array of fruits, displayed in an unordered list. My goal is to arrange them in descending order and implement a reverse search function to display the item ...

javascriptangulartypescript

JSON containing attributes represented by Unicode characters

During the development of my web application, I am interested in utilizing JSON objects with Unicode attributes as shown below: a = { ονομα:"hello" } Subsequently, I would like to access it in this manner: a.ονομα Alternatively, exploring lo ...

javascriptjsonwebunicodeattributes

Having issues with getting Bootstrap to function properly in my create-react-app

I've been attempting to use traditional Bootstrap instead of react-bootstrap to render my React component, but I can't seem to get it right. I've installed Bootstrap via npm and included the CDN links and scripts as well. Despite trying vari ...

javascriptreactjsnpmbootstrap-4

Using a local function within Node.js and referencing it with the <%%> tag in a document

I am currently working with Node.js and attempting to utilize a local function within a document that requires the JSON I send in the res.render. Is there a method to achieve this? Below is an example of how I attempted to implement it: <%local_vari ...

javascripthtmlnode.js

Concealing the sidebar in React with the help of Ant Design

I want to create a sidebar that can be hidden by clicking an icon in the navigation bar without using classes. Although I may be approaching this incorrectly, I prefer to keep it simple. The error message I encountered is: (property) collapsed: boolean ...

javascriptreactjstypescriptweb-applicationsantd

Stylus remains undefined even after a successful npm installation

I've been following a tutorial to learn more about node.js, but I keep encountering a strange error. After running npm install stylus, I receive the following output: npm http GET https://registry.npmjs.org/stylus npm http 304 https://registry.npmjs. ...

javascriptnode.jsstylus

When attempting to install a library for my Vue project, an error message is displayed

I attempted to install and run an old Vue project. The issue arises when I run npm install as I encounter numerous errors. I am unsure why this is happening, as the project used to run without any errors in the past. Error file: https://gist.github.com/ ...

npmvue.jsnpm-install

The console.log() displays the dictionary correctly, but trying to access it with a key results in it being undefined

I'm currently facing an issue with accessing the dictionary stored in the "workload" field of a document in Firestore. Here is the snippet of code I am struggling with: async addTask() { const projectDoc = await getDoc(doc(db, "projects", "Testing ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Is there a way to add a scrollbar to the ChartJS tooltip to avoid data

I'm currently working on a chartJS project where I have a callback function to display data in tooltips. However, as the data increases, the overflow section of the tooltip gets hidden from the canvas. Is there a solution to prevent this overflow and ...

javascriptreactjschart.jschartjs-2.6.0

Production Server experiencing issues with sending Large Lists via Http Post

I'm experiencing an issue where the server is unable to read values from a large list when sent using Post. Oddly enough, this works on the homologation server but not on the production server. Http post AngularJs $http({ url: $rootScope.raiz_ws ...

javascriptc#angularjsiispayload