1

So I've added a watch task to my gulpfile.js that looks like this:

gulp.task('watch', function(){

    gulp.watch('src/style/*.less', ['css']);
});

but when I run it (gulp watch) I get the following error thrown in my face:

PS C:\Projects\web\basic> gulp watch
[21:28:42] Using gulpfile C:\Projects\web\basic\gulpfile.js
[21:28:42] Starting 'watch'...
[21:28:42] 'watch' errored after 226 μs
[21:28:42] TypeError: Object #<Object> has no method 'watch'
    at Gulp.watch (C:\Projects\web\basic\node_modules\gulp\index.js:40:14)
    at Gulp.<anonymous> (C:\Projects\web\basic\gulpfile.js:37:7)
    at module.exports (C:\Projects\web\basic\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (C:\Projects\web\basic\node_modules\gulp\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (C:\Projects\web\basic\node_modules\gulp\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (C:\Projects\web\basic\node_modules\gulp\node_modules\orchestrator\index.js:134:8)
    at C:\Users\Magnus\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
    at process._tickCallback (node.js:415:13)
    at Function.Module.runMain (module.js:499:11)
    at startup (node.js:119:16)

As I've come to understand watch is a built-in function in gulp so what am I doing wrong here? The only other solutions to this dilemma I've seen is Linux specific (and presumable so is the cause for the problem). It is described in this SO-thread, but I'm using Windows and I can't see how that problem could be showing up in a Windows environment.

Also, I've looked through the Gulp index.js-file for project installation and it does contain a watch prototype, but the problems seems (according to the error message) to come from the final line in the watch function:

Gulp.prototype.watch = function(glob, opt, fn) {
  if (typeof opt === 'function' || Array.isArray(opt)) {
    fn = opt;
    opt = null;
  }

  // Array of tasks given
  if (Array.isArray(fn)) {
    return vfs.watch(glob, opt, function() {
      this.start.apply(this, fn);
    }.bind(this));
  }

  return vfs.watch(glob, opt, fn);
};

It's the return vfs.watch(glob, opt, fn);-line that causes the crash (it's line 40). vfs in this case is a variable that contains vinyl-fs and looks like this:

var vfs = require('vinyl-fs');

But even after manually installing it both in my project and globally it still doesn't work. Anyone that has any idea what might be causing this crash?

EDIT: The full gulpfile.js:

var gulp = require('gulp'),
    less = require('gulp-less'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify');

var cssPath = 'src/style/*.less';
var jsPath = 'src/js/*.js';
var htmlPath = 'src/index.htm';
var assetPath = 'src/assets/*';

gulp.task('css', function() {
    return gulp.src(cssPath)    //Get all less files from src/style/
        .pipe(less())                   //Pass them on to less          
        .pipe(concat('style.css'))      //Concat all files to one big style.css-file
        .pipe(gulp.dest('dist/style'))  //Pass the less result to gulp so it can be moved to dist/css
});

gulp.task('js', function(){
    return gulp.src(jsPath) //Get all the javascript files from src/js/
        .pipe(uglify())             //Pass them on to uglify
        .pipe(concat('all.js'))     //Concat all the files into one javascript file
        .pipe(gulp.dest('dist/js')) //Pass the result to gulp so it can be moved to dist/js
});

gulp.task('html', function(){
    return gulp.src(htmlPath)
        .pipe(gulp.dest('dist'))
});

gulp.task('assets', function(){
    return gulp.src(assetPath)
        .pipe(gulp.dest('dist/assets'))
});

gulp.task('watch', function(){

    gulp.watch(cssPath, ['css']);
    gulp.watch(jsPath, ['js']);
    gulp.watch(htmlPath, ['html']);
    gulp.watch(assetPath, ['assets']);
});

gulp.task('default', ['css', 'js', 'html', 'assets']);
Maffelu
  • 2,018
  • 4
  • 24
  • 35
  • I have created a simple gulpfile consisting of the code you provided and additional gulp task `css` and it works properly. Please post the whole gulpfile, because source of the problem is probably somewhere else. – ezpn Nov 07 '15 at 22:29
  • I added the entire gulpfile.js. I have also tried to create a very basic gulpfile that only moves a file and adds a watch and I still get the same error. Starting to feel like my node installation has gone corrupt or something... – Maffelu Nov 07 '15 at 22:50
  • The code you pasted works properly. What version of node are you using? Also please post the list of installed packages used in your project. You can get them by typing `npm list --depth=0` (for local) and `npm list --depth=0 -g` (for global). Have you tried reinstalling gulp package? – ezpn Nov 07 '15 at 23:03
  • Npm version is 1.3.2. The project packages are: gulp (3.9.0), gulp-concat(2.6.0), gulp-less(3.0.3), gulp-uglify(1.4.2) and vinyl-fs(2.2.1). The vinyl-fs was really just an attempt to try to solve it according to my original question but it didn't make any differance. – Maffelu Nov 07 '15 at 23:11
  • You can check node version by typing `node --version`. – ezpn Nov 08 '15 at 00:05
  • try gulp clean cache, complete uninstall and reinstall – harishr Nov 08 '15 at 11:43
  • @ezrepotein: My node version is 2.14.7. – Maffelu Nov 08 '15 at 12:10

1 Answers1

1

Thanks to @ezrepotein and @entre for helping me out.

The solution was simply to reinstall node and then uninstall and reinstall all gulp components in the project. After that it worked out well so something must've gone wrong during installation of either node or the gulp components.

Maffelu
  • 2,018
  • 4
  • 24
  • 35