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