Saturday 1 April 2017

Grunt browser-sync task along with copy and watch

I have a few questions for implementing browser-sync with Grunt in a NodeJS app.

I'm running a local Node server and have a working directory called 'client' that's located in the root of my project directory. This contains all my HTML/CSS/JS files. Grunt is watching these for changes and copying them over to a 'public' directory in my server folder. Am I missing something in my Gruntfile (or maybe my other files) that is preventing me from using browser-sync?

My Node server is running on port 5000. The app loads fine if I navigate to localhost:5000, but when I run 'grunt' in a separate terminal window it automatically opens a browser with a request for localhost:3000, which results in "Cannot GET /".

Do I need to manually put this script at the end of my HTML or is Grunt supposed to automatically inject this?

<script id="__bs_script__">//<![CDATA[document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.18.8'><\/script>".replace("HOST", location.hostname));//]]></script>

Additional questions commented in my Gruntfile below. I'm pretty new to task-running, so apologies if this is an easy fix.

module.exports = function(grunt) {
  grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      uglify: {
          build: {
              src: ['client/scripts/client.js'],
              dest: 'server/public/scripts/client.min.js'
          }
      },
      copy: {
          jquery: {
              expand: true,
              cwd: 'node_modules/jquery/dist/',
              src: ['jquery.js'],
              dest: 'server/public/vendors/'
          },
          bootstrap: {
              expand: true,
              cwd: 'node_modules/bootstrap/dist/css/',
              src: ['bootstrap.css'],
              dest: 'server/public/vendors/'
          },
          styles: {
              expand: true,
              cwd: 'client/stylesheets',
              src: 'styles.css',
              dest: 'server/public/stylesheets',
          },
          html: {
              expand: true,
              cwd: 'client/views',
              src: ['index.html'],
              dest: 'server/public/views'
          }
      },
      watch: {
          files: ['client/scripts/*.js', 'client/stylesheets/*.css', 'client/views/*.html'],
          tasks: ['uglify', 'copy']
      },
      browserSync: { // QUESTION REGARDING THIS TASK
        dev: {
          bsFiles: { // SHOULD THESE BE THE FILES IN MY WORKING DIR?
              src : ['server/public/stylesheets/*.css',
                     'server/public/scripts/*.js',
                     'server/public/views/*.html']
          },
          options: { // IS THIS SUB-TASK NEEDED?
            watchTask: true,
            server: './client' // WORKING DIRECTORY? OR PUBLIC DIR?
          }
        }
      }
  });

  grunt.loadNpmTasks('grunt-browser-sync');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['browserSync', 'uglify', 'copy', 'watch']);
};


via Dan Zera

No comments:

Post a Comment