question: can you help me get this to work? about grunt-express-server

[zspecza]

Nevermind, I seem to have gotten it working. Just made it watch only the coffeescript files. :)

[ericclemmons]

Great catch! I actually do the same thing where I watch explicit types of files and perform different actions. Sometimes these cascade (like compiling React's JSX files into JS, which triggers jshint + concat, which triggers a livereload), but it makes everything very manageable.

[zspecza]

Interestingly enough I can't seem to get the server to restart if a .coffee file has changed. How would I go about that?

Oh and just to make this less confusing this is grunt-contrib-watch specific. If I just start the server it works fine, but I like having livereload available and it doesn't restart the server once the watch task starts.

I tried this, but it didn't suffice: (inside watch):

  express: {
    files: ['./src/**.coffee'],
    tasks: ['express:dev:stop', 'express:dev'],
    options: {
      nospawn: true
    }
  }

Since my default task starts an express server before it starts watching, I figured adding express:dev:stop would be safe, but it doesn't really do anything differently...

[ericclemmons]

Re-opening so I can create a test for this.

How should it work, then? I create server.coffee, run that through coffeescript to create a server.js, and when that's created express:dev should reload, right?

[zspecza]

Well, the way I have it set up in this project is, I have a ./src directory which contains all of my files.

When I type the grunt command, the build task is called. The build task consists of tasks to compile CoffeeScript and Stylus files as well as copy any other files over to ./ (so, one level above ./src).

After the build task is completed, the express:dev task is called to start an express server pointing to ./app.js.

Once that is done, and the server has started - it starts the watch task.

If I modify any file, the watch task detects the changes and recompiles/copies new files and if it's a client side asset or a Jade view, the update happens in the browser thanks to livereload.

But if I, for example, wanted to add a new route to my express app, the server would have to be manually restarted for the change to reflect...

[ericclemmons]

Ah, that's very similar to what I do on genesis-skeleton! You can take a look at my coffeescript branch to see how I perform pretty much the same action. The one difference is, I don't have coffeescript on the server-side, just the client-side, but it should translate the same.

[zspecza]

It seems no different to what I'm doing other than having way more tasks, I don't see how I should get this working? Everything's working as it should aside from having to manually restart the server if I change any server-side code. I mean, this is my entire Gruntfile as of right now (no tests or anything yet, the project is new):

module.exports = function(grunt) {

  // configure grunt
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // start the server
    express: {
      options: {
        //port: 3000,
        delay: 0,
        background: true
      },
      dev: {
        options: {
          script: './app.js'
        }
      },
      prod: {
        options: {
          script: './app.js',
          node_env: 'production'
        }
      }
    },

    // compile coffeescript from ./src/*.coffee to ./*.js
    coffee: {
      compile: {
        files: [{
          expand: true,
          cwd: './src/',
          src: ["**/*.coffee"],
          dest: './',
          ext: '.js'
        }]
      }
    },

    // copy uncompiled files from ./src/*.<ext> to ./*.<ext>
    copy: {
      main: {
        files: [{
          expand: true,
          cwd: './src/',
          src: ["**/**", "!**/*.coffee", "!**/*.styl"],
          dest: './'
        }]
      }
    },

    // compile stylus files from ./src to ./
    stylus: {
      compile: {
        options: {
          use: [require('axis-css')],
          urlfunc: 'encode-url',
          "include css": true
        },
        files: [{
          expand: true,
          cwd: './src/',
          src: ["**/index.styl"],
          dest: './',
          ext: '.css'
        }]
      }
    },

    // run watch to recompile and restart on file changes
    watch: {
      options: {
        livereload: true // auto-refresh browser
      },
      stylus: {
        files: ['src/app/assets/styles/*.styl'],
        tasks: ['stylus']
      },
      coffee: {
        files: ['src/**/*.coffee'],
        tasks: ['coffee']
      },
      copy: {
        files: ['src/**/*.*', "!**/*.coffee", "!**/*.styl"],
        tasks: ['copy']
      },
      express: {
        files: ['./src/**.coffee'],
        tasks: ['express:dev'],
        options: {
          nospawn: true
        }
      }
    }

  });

  // load plugins
  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-stylus');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-express-server');

  // Define tasks
  grunt.registerTask('build', ['coffee', 'stylus', 'copy']);
  grunt.registerTask('start', ['build', 'express:dev', 'watch']);
  grunt.registerTask('default', 'start');

};

[zspecza]

Okay, so I think I've managed to understand my issue a little more. './src/**.coffee' in the express step of the watch task didn't really match any files. So it never gets called and that is the problem. After changing it to any other globbing pattern that does work, I get this:

Analyzing that thoughtfully, this is what happened:

1. The express server started in the background.
2. The watch task started.
3. app.coffee was changed
4. (the coffee task did not run) - Instead, the express server restarted.
5. Grunt threw a warning: Warning: cannot read property stdout of undefined
6. The watch task restarted
7. The process exited.

Man, this really is doing my head in.

[ericclemmons]

Let me make the coffeescript example in genesis-skeleton 100% coffeescript to match your situation.

Also, that project still uses regrade because I've had issues with watch + livereload + express when type-specific targeting.

Sorry that this is so frustrating. I'll try to get it resolved for you :(

[ericclemmons]

Turns out, #7 is trying to accomplish the same thing, which would remove the need to pre-compile Coffescript.

[zspecza]

The thing is, the CoffeeScript require paths would not work, as everything ends up being one level above src. Running coffee instead of node is exactly what I'm trying to avoid 😉

[ericclemmons]

Oh! I didn't realize. thanks for letting me know!

Eric Clemmons

On Wednesday, July 3, 2013 at 12:15 PM, Declan de Wet wrote:

The thing is, the CoffeeScript require paths would not work, as everything ends up being one level above src. Running coffee instead of node is exactly what I'm trying to avoid

—
Reply to this email directly or view it on GitHub (#10 (comment)).

[zspecza]

I think I'm just going to go with using LiveReload and Regarde and see if that works, as I still haven't managed to sort this out and I'm quite frustrated :/

EDIT: What do you know, it works. Thanks for the help. Perhaps grunt-contrib-watch isn't as good as it seems. :P

[ericclemmons]

I had the exact same findings: LiveReload + Regarde is much more reliable than grunt-contrib-watch, but I'm reluctantly using it because of mindshare =/