Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

rickyspires's avatar

gulp watch not watching js files ?

Hello. I am using Gulp with Elixir and coffee script but it only compiles what i make a change in the less files and not in the js files. ? However... I does notice the change if i just run gulp so it is seeing the file.

Any ideas ?

This is my Gulp file

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

var paths = {
    'site': 'resources/assets/js',
    'jquery': 'bower_components/jquery/dist',
    'bootstrap': 'bower_components/bootstrap/dist',
    'angular': 'bower_components/angular',
    'fontawesome': 'bower_components/font-awesome',
    'modernizr': 'bower_components/modernizr',
    'normalizecss': 'bower_components/normalize-css',
    'select2': 'bower_components/select2/dist',
    'underscore': 'bower_components/underscore',
    'skrollr': 'bower_components/skrollr/dist',
    'matchheight': 'bower_components/matchHeight'
}

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Less
 | file for our application, as well as publishing vendor resources.
 |
 */


elixir(function(mix) {

    mix.less('app.less', 'public/css/')
    .copy(paths.bootstrap + '/fonts/**', 'public/fonts')
    .coffee()
    .styles([
        'public/css/app.css',
        paths.bootstrap + "/css/bootstrap.css",
        paths.fontawesome + "/css/font-awesome.css",
        paths.normalizecss + "/normalize.css",
        paths.select2 + "/css/select2.min.css"
    ],'public/css/all.css', './')
    .scripts([
        paths.jquery + "/jquery.min.js",
        paths.site + "/site.js",
        paths.bootstrap + "/js/bootstrap.min.js",
        paths.modernizr + "/modernizr.js",
        paths.angular + "/angular.min.js",
        paths.select2 + "/js/select2.min.js",
        paths.underscore + "/underscore-min.js",
        paths.skrollr + "/skrollr.min.js",
        paths.matchheight + "/jquery.matchHeight-min.js"
    ],'public/js/all.js', './');

    //version control & cache 
    mix.version(["css/all.css", "js/all.js"]);

});

My module.coffee only has this in it.

class Module

thanks Ricky

0 likes
23 replies
Raf's avatar

I do have this same issue, gulp watch is not working on my setup.

elixir(function(mix) {
    mix.sass('app.scss')
    .ngTemplateCache('/**/*.html', 'public/js', 'resources/assets/js', {
        templateCache: {
            standalone: true
        },
        htmlmin: {
            collapseWhitespace: true,
            removeComments: true
        }
    })
    .scripts([
        // Combine all js files into one.
        // Path is relative to resource/js folder.
        //'../../vendor/jquery/dist/jquery.min.js',
        '../../vendor/moment/min/moment-with-locales.js',
        '../../vendor/angular/angular.js',
        '../../vendor/angular-sanitize/angular-sanitize.js',
        '../../vendor/angular-animate/angular-animate.js',
        '../../vendor/angular-aria/angular-aria.js',
        '../../vendor/angular-ui-router/release/angular-ui-router.js',
        '../../vendor/angular-translate/angular-translate.js',
        '../../vendor/Chart.js/Chart.js',
        '../../vendor/angular-chart.js/dist/angular-chart.js',
        '../../vendor/angular-material/angular-material.js'
    ], 'public/js/vendor.js')
    .copy('resources/vendor/material-design-icons/iconfont', 'public/fonts');

    mix.browserify('app.js').version(["css/app.css", "js/bundle.js", "js/templates.js", "js/vendor.js"]);

    mix.copy('resources/vendor/mdi/fonts', 'public/build/css/fonts');
});
mehany's avatar

Can you guys try to not use version , lets see what happens!

mehany's avatar

@mstnorris If you haven't done already, try to rebuilt your gulp file and test each method with Gulp watch . Can you also show your package.json so maybe I can try to replicate the issue on my end.

mstnorris's avatar

@mehany, I've restored my Mac completely over the last few weeks and started with new projects and still have the same issues. As requested, here is my:

gulpfile.js

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

elixir(function(mix) {

    mix.copy('node_modules/bootstrap/fonts', 'public/build/fonts/bootstrap/');
    mix.copy('node_modules/font-awesome/fonts', 'public/build/fonts/');
    mix.copy('resources/assets/fonts/vendor', 'public/build/fonts/')

    mix.sass('app.scss', 'resources/assets/css/sass-output.css');

    mix.styles([
        'sass-output.css',
        'less-output.css',
        '../../../node_modules/bootstrap-markdown/css/bootstrap-markdown.min.css',
        'vendor/fuelux.css',
        'sticky-footer.css',
        'style.css'
    ]);

    mix.scripts([
        "../../../node_modules/jquery/dist/jquery.js",
        "../../../node_modules/bootstrap-sass/assets/javascripts/bootstrap.js",
        "../../../node_modules/vue/dist/vue.js",
        "../../../node_modules/vue-resource/dist/vue-resource.js",
        "../../../node_modules/bootstrap-markdown/js/bootstrap-markdown.js",
        "../../../node_modules/marked/lib/marked.js",
        "vendor/fuelux.js",
        "../../../node_modules/select2/dist/js/select2.js",
        "../../../node_modules/sweetalert/dist/sweetalert.min.js",

        "app.js"
    ]);

    mix.version(["public/css/all.css", "public/js/all.js"]);

});

package.json

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8",
    "sass-material-colors": "0.0.5"
  },
  "dependencies": {
    "animate.scss": "0.0.6",
    "bootstrap": "^3.3.5",
    "bootstrap-markdown": "^2.9.0",
    "bootstrap-sass": "^3.3.5",
    "font-awesome": "^4.3.0",
    "jquery": "^2.1.4",
    "laravel-elixir": "^2.0.0",
    "marked": "^0.3.3",
    "sass-material-colors": "0.0.5",
    "select2": "^4.0.0",
    "select2-bootstrap-css": "^1.4.6",
    "sweetalert": "^1.0.1",
    "vue": "^0.12.7",
    "vue-resource": "^0.1.8"
  }
}
JeffreyWay's avatar

Can someone break it down to exactly what doesn't work? Anything you pass to mix.scripts() isn't being watched? What's the most basic example you can give me?

Also, if you're not pulling in any custom extensions (they'll need to be updated for v3), try upgrading Elixir to ^3.0.0.

mstnorris's avatar

@JeffreyWay I've updated Elixir to version ^3.0.0 and gulp watch doesn't watch the files for changes, it just runs once.

skliche's avatar

@JeffreyWay Most basic example I can come up with:

elixir(function(mix) {
    mix.sass('app.scss');
    mix.scripts(['libs/bootstrap.min.js']);
});

Changing bootstrap.min.js triggers something (Starting 'scripts'..., Merging: resources/js/libs/bootstrap.min.js, Finished 'scripts') but all.js doesn't contain the changes in bootstrap.min.js.

JeffreyWay's avatar

@mstnorris @skliche - I can't reproduce this. Frustrating.

@skliche - I just tried your exact code in a fresh Laravel project with Elixir v3, and everything was watched/merged correctly.

bobbybouwmann's avatar

I think the problem here is that Jeffrey has everything up-to-date and the others guys here might not! Everything is working fine for me, since I updated it last week.

@JeffreyWay would you be willing to share the versions you use for the dependencies for Elixir? I'm not sure if that is the problem but it could be a version issue

skliche's avatar

@JeffreyWay After updating elixir and gulp I discovered that PhpStorm did not show the actual contents of all.js after gulp ran. When I look at the file in Finder, it is updated. I just confirmed with a fresh install of Laravel. Sorry, I feel like an idiot, all clear on my end.

1 like
mehany's avatar

@mstnorris tried but couldn't reproduce it, everything is basically working! Here are the versions I am currently using, hope it ll help:

laravel-elixir@2.3.13

gulp -v
CLI version 3.9.0
Local version 3.9.0

node -v
v0.10.37

1 like
mstnorris's avatar

Initial Setup

laravel-elixir@3.0.3

node v0.12.6

gulp -v
CLI version 3.9.0
Local version 3.9.0

Current Setup after making changes to suit what @mehany is using

laravel-elixir@2.3.13

node v0.10.37

gulp -v
CLI version 3.9.0
Local version 3.9.0

I still get the same issue. gulp watch only runs once. No errors, it just finishes.

@JeffreyWay what other information do you need from me?

1 like
mehany's avatar

@mstnorris sorry! if the issue can not be reproduce, it is hard to suggest alternatives!
Btw, are you running gulp watch in homestead machine or on your local machine ( I run it on local machine though )?

mstnorris's avatar

I'm running it on my local machine - Mac OS X 10.10.4 (14E46) otherwise gulp-notify wouldn't work.

venkata82's avatar

Hi, I'm on Windows7, I'm also having same issue. Issue: gulp watches my changes for the first time only. Second time update to the SCSS or JS file does not get built.

Here is my configuration.

gulpfile.js var elixir = require('laravel-elixir'); var gulp = require('gulp'); var webserver = require('gulp-webserver'); var notify = require("gulp-notify");

var server = { host: 'localhost', port: '8002' }, app_name="App", rootPath = "../../node_modules/";

elixir(function(mix) { mix.sass('app.scss') .scripts([ rootPath+'jquery/dist/jquery.min.js', rootPath+'angular/angular.min.js', rootPath+'zurb-foundation-5/js/foundation/foundation.js', rootPath+'zurb-foundation-5/js/foundation/foundation.accordion.js', rootPath+'angular-route/angular-route.min.js', rootPath+'fastclick/lib/fastclick.js' ], 'js/vendor.js') .scripts([ 'app.js', 'appController.js' ], 'js/app.js') });

//version control & cache mix.version(["css/app.css", "js/app.js"]);

gulp.task('ws', function() { gulp.src( '.' ) .pipe(webserver({ host: server.host, port: server.port, livereload: true, directoryListing: false })) .pipe(notify(app_name+" is running at "+server.host+":"+server.port)) });

//console.log(elixir); gulp.task('default', ['watch','ws']);

package.json: { "name": "", "version": "1.0.0", "description": ", "scripts": { "test": "" }, "author": "", "private": true, "devDependencies": { "gulp": "^3.8.8", "gulp-notify": "^2.2.0", "gulp-util": "^3.0.6", "gulp-webserver": "^0.9.1", "laravel-elixir": "3.0.5", "zurb-foundation-5":"*", "jquery":"2.1.4", "angular":"1.4.3", "angular-route":"1.4.3", "fastclick":"1.0.6" } }

{ "assetsPath": "assets", "publicPath":"", "assetsDir": "assets/", "cssOutput": "css/", "jsOutput": "js", "babel": { "enabled": false } }

Tawanda's avatar

Hi guys, I have the same problem. Has anyone managed to resolve this?

Tawanda's avatar

Never mind, got it to work. The relative path to the JS files I was referencing in my node-modules folder was wrong.

jekinney's avatar

Js files in gulp watch work outside of homestead but I've not gotten it to work inside homestead. Though I didn't try to hard.

2 likes
martefabian's avatar

I can confirm this issue, gulp watch works fine outside homestead. It is not working inside homestead even if mounting the shared folder as type: "nfs".

Temporary solution: Use gulp watch outside homestead.

MichaelLake's avatar

Yeah, I can also confirm that gulp watch is not properly watching JavaScript files on the current version of Homestead, but script/Sass files are fine. I just switched over to my Mac and all files are properly watched.

It should be noted that one of the dependencies, fsevents, doesn't install on the current Homestead (it just throws a Warn error about it not being supported on the architecture).

nauf's avatar

As @MichaelLake has said the current homestead version version has issues when it comes to script files..i also tried outside the homestead on my mac and thus changes started to appear

Please or to participate in this conversation.