I have a site setup which works on my work laptop, all of the Windows machines in the office but when I have gone to run 'grunt' on my personal machine it is not working. I work using browserSync a lot on my personal machine, and just double checked another site and it loads up as it should, but for some reason, it is just not working for this site. I have tried everything, from comparing the files side by side, manually copying the whole folder from my work machine to my personal machine, even copied the node_modules just in case something occured.
This is in my package.json file:
"grunt-browser-sync": "^2.1.3",
Steps
1- Run grunt 2- Does all the normal compile stuff 3- Creates the files 4- Goes to create the browser URL 5- Open the browser 6- 'This site can't be reached'.
Using Node v5.12.0 and npm 3.8.6 on a Mac and using Grunt to compile.
var sites = [
'starter'
];
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
app: {
dirs: {
tmp: '.tmp',
src: 'frontend',
js: '<%= app.dirs.src %>/js',
scss: '<%= app.dirs.src %>/scss/base',
img: '<%= app.dirs.src %>/images',
fonts: '<%= app.dirs.src %>/fonts',
assemble: '<%= app.dirs.src %>/assemble',
data: '<%= app.dirs.js %>/data',
compiled: 'compiled',
}
},
clean: {
build: {
src: ["compiled"]
},
data: {
src: ["<%= app.dirs.assemble %>/data/context"]
}
},
copy: {
dev: {
files: [{
expand: true,
cwd: '<%= app.dirs.fonts %>',
src: ['**/*'],
dest: 'compiled/fonts'
}, {
expand: true,
cwd: '<%= app.dirs.js %>',
src: ['**/*'],
dest: 'compiled/js'
}, {
expand: true,
cwd: '<%= app.dirs.data %>',
src: ['**/*'],
dest: 'compiled/js/data'
}, {
expand: true,
cwd: 'bower_components/bootstrap-sass/assets/fonts/bootstrap',
src: ['**/*'],
dest: 'compiled/fonts/bootstrap'
}, {
expand: true,
cwd: 'bower_components/respond/dest',
src: ['respond.min.js'],
dest: 'compiled/js/compatibility'
}, {
expand: true,
cwd: 'bower_components/selectivizr2',
src: ['selectivizr2.js'],
dest: 'compiled/js/compatibility'
}, {
expand: true,
cwd: 'bower_components/es5-shim',
src: ['es5-shim.min.js', 'es5-sham.min.js'],
dest: 'compiled/js/compatibility'
},{
expand: true,
cwd: '<%= app.dirs.src %>/images_dev',
src: ['**/*'],
dest: 'compiled/images_dev'
}]
},
js: {
files: [{
expand: true,
cwd: '<%= app.dirs.js %>',
src: ['**/*'],
dest: 'compiled/js'
}, ]
},
data: {
files: [{
expand: true,
cwd: '<%= app.dirs.data %>',
src: ['**/*'],
dest: 'compiled/js/data'
}]
},
img: {
files: [{
expand: true,
cwd: '<%= app.dirs.src %>/images',
src: ['**/*'],
dest: 'compiled/images'
}]
}
},
assemble: {
options: {
flatten: true,
assets: 'assets',
production: false,
plugins: ['assemble-collection-context'],
context : { dest: '<%= app.dirs.assemble %>/data/context/' },
partials: ['<%= app.dirs.assemble %>/includes/**/*.hbs', '<%= app.dirs.assemble %>/includes/**/**/*.hbs'],
layoutdir: '<%= app.dirs.assemble %>/layout',
data: ['<%= app.dirs.assemble %>/data/**/*.{json,yml}']
},
account: {
options:{
layout: 'default.hbs',
img: '/images/'
},
src: ['<%= app.dirs.assemble %>/account/*.hbs'],
dest: 'compiled/pages/'
},
main: {
options:{
layout: 'default.hbs',
img: '/images/'
},
src: ['<%= app.dirs.assemble %>/main/*.hbs'],
dest: 'compiled/pages/'
},
miscpages: {
options:{
layout: 'default.hbs',
img: '/images/'
},
src: ['<%= app.dirs.assemble %>/misc-pages/*.hbs'],
dest: 'compiled/pages/'
},
standalone: {
options:{
layout: 'default.hbs',
img: '/images/'
},
src: ['<%= app.dirs.assemble %>/standalone/*.hbs'],
dest: 'compiled/pages/'
},
components: {
options:{
layout: 'default.hbs',
img: '/images/'
},
src: ['<%= app.dirs.assemble %>/components/*.hbs'],
dest: 'compiled/components/'
},
index:{
options:{
layout: 'index.hbs',
img: '/images/'
},
src: ['<%= app.dirs.assemble %>/index.hbs'],
dest: 'compiled/'
},
guide:{
options:{
layout: 'guide.hbs',
img: '/images/'
},
src: ['<%= app.dirs.assemble %>/guide/index.hbs'],
dest: 'compiled/guide/'
},
},
sass_directory_import: {
files: {
src: ['<%= app.dirs.src %>/**/_all.scss']
},
},
sass: {
options: {
outputStyle: 'compressed',
sourceMap: true,
includePaths: ['bower_components/breakpoint-sass/stylesheets', 'bower_components/bootstrap-sass/assets/stylesheets']
},
dist: {
files: (function() {
var sassDistFiles = {};
for (var i = 0; i < sites.length; i++)
{
var site = sites[i];
sassDistFiles['compiled/dev_css/' + site + '/core.css'] = '<%= app.dirs.src %>/scss/' + site + '/core.scss';
}
return sassDistFiles;
})()
}
},
postcss: {
before: {
options: {
map: false,
processors: [
require('stylelint')(stylelintConfig),
require('postcss-reporter')({
clearMessages: true,
throwError: true
})
],
syntax: require('postcss-scss')
},
src: ['<%= app.dirs.src %>/scss/base/**/*.scss','!<%= app.dirs.src %>/scss/base/_bower.scss', '!<%= app.dirs.src %>/scss/base/_bower.scss', '!<%= app.dirs.src %>/scss/base/_sprite.scss', '!<%= app.dirs.src %>/scss/base/_sprite-2x.scss', '!<%= app.dirs.src %>/scss/base/font-awesome/**/*.scss']
},
after: {
options: {
map: true,
processors: [
require('autoprefixer')({
browsers: [
"Android 2.3",
"Android >= 4",
"Chrome >= 20",
"Firefox >= 24",
"Explorer >= 8",
"iOS >= 6",
"Opera >= 12",
"Safari >= 6"
]
}),
]
},
src: ['<%= app.dirs.compiled %>/css/*.css','!<%= app.dirs.compiled %>/css/*.css.map']
}
},
csssplit: (function() {
var cssSplitOptions = {};
for (var i = 0; i < sites.length; i++)
{
var site = sites[i];
cssSplitOptions[site] = {
src: ['<%= app.dirs.compiled %>/dev_css/' + site + '/core.css'],
dest: '<%= app.dirs.compiled %>/css/' + site + '/core.css',
options: {
maxSelectors: 3000,
maxPages: 8,
suffix: ''
}
};
}
return cssSplitOptions;
})(),
cssmin: {
target: {
files: (function() {
var cssminTargetFiles = {};
for (var i = 0; i < sites.length; i++)
{
var site = sites[i];
cssminTargetFiles['<%= app.dirs.compiled %>/css/' + site + '/core1.css'] = ['<%= app.dirs.compiled %>/css/' + site + '/core1.css'];
cssminTargetFiles['<%= app.dirs.compiled %>/css/' + site + '/core2.css'] = ['<%= app.dirs.compiled %>/css/' + site + '/core2.css'];
}
return cssminTargetFiles;
})()
}
},
watch: {
options: {
spawn: true
},
gruntfile: {
files: 'Gruntfile.js',
options: {
reload: true
}
},
html: {
files: ['<%= app.dirs.assemble %>/**/*.hbs'],
tasks: ['assemble'],
},
image: {
files: ['<%= app.dirs.img %>/**/*.{png,jpg,gif}'],
tasks: ['imagemin'],
},
sprite: {
files: ['<%= app.dirs.img %>/sprite/*.png', '<%= app.dirs.img %>/sprite-2x/*.png'],
tasks: ['sprite', 'newer:imagemin']
},
svg: {
files: ['<%= app.dirs.img %>/svg/*.svg'],
tasks: ['imagemin:svg','grunticon']
},
// css: {
// files: ['<%= app.dirs.src %>/**/*.scss'],
// tasks: ['sass_directory_import', 'newer:postcss:before', 'sass', 'postcss:after'],
//},
sass: {
files: ['<%= app.dirs.scss %>/**/*.scss'],
tasks: ['sass_directory_import', 'newer:postcss:before', 'sass', 'postcss:after'],
options: {
debounceDelay: 1000,
event: ['changed']
}
},
js: {
files: ['<%= app.dirs.js %>/**/*.js'],
tasks: ['newer:jshint:dev', 'newer:copy:js', 'newer:concat:all'],
},
jshint: {
files: ['<%= app.dirs.js %>/*.js'],
tasks: ['newer:jshint:dev'],
options: {
event: ['changed']
}
},
data: {
files: ['<%= app.dirs.data %>/**/*.json'],
tasks: ['newer:jsonlint', 'newer:copy:data'],
},
bower: {
// Watch for additions to bower.json then run bower_concat
files: 'bower.json',
tasks: ['bower_concat', 'uglify:dev'],
options: {
event: ['changed']
}
}
},
bower_concat: {
bower: {
dest: {
js: 'compiled/js/bower.js',
scss: '<%= app.dirs.scss %>/_bower.scss',
css: '<%= app.dirs.scss %>/_bower.scss'
},
exclude: [
'breakpoint-sass',
'sassy-maps',
'respond',
'selectivizr2',
'es5-shim'
],
dependencies: {
'jquery.customSelect': 'jquery',
'velocity': 'jquery'
},
mainFiles: {
'bootstrap-sass': 'assets/javascripts/bootstrap.js',
'retina.js': 'dist/retina.js',
'fitvids': 'jquery.fitvids.js',
'bootstrap-datepicker': 'dist/js/bootstrap-datepicker.min.js',
'bxslider-4': ["dist/jquery.bxslider.js", "dist/jquery.bxslider.css"]
},
bowerOptions: {
// relative: false
}
}
},
jshint: {
options: {
'-W097': true,
'devel': true,
'predef': ['angular']
},
dev: ['Gruntfile.js', '<%= app.dirs.js %>/ui.js', '<%= app.dirs.js %>/ng-scripts.js']
},
jsonlint: {
dev: {
src: ['<%= app.dirs.src %>/dummy-data/**/*.json']
}
},
concat: {
all: {
src: [
'compiled/js/ui/*'
],
dest: 'compiled/js/ui.js',
}
},
uglify: {
options: {
mangle: true
},
dev: {
files: {
'compiled/js/bower.min.js': ['compiled/js/bower.js'],
'compiled/js/ui.min.js': ['compiled/js/ui.js']
}
}
},
sprite: {
core: {
src: '<%= app.dirs.img %>/sprite/*.png',
dest: '<%= app.dirs.img %>/sprite.png',
destCss: '<%= app.dirs.scss %>/_sprite.scss',
algorithm: 'top-down',
padding: 0
},
retina: {
src: '<%= app.dirs.img %>/sprite-2x/*.png',
dest: '<%= app.dirs.img %>/sprite-2x.png',
destCss: '<%= app.dirs.scss %>/_sprite-2x.scss',
algorithm: 'top-down',
padding: 0
}
},
grunticon: {
dev: {
files: [{
expand: true,
cwd: '<%= app.dirs.img %>/svg/stripped',
src: ['*.svg'],
dest: "compiled/images/svg/output"
}],
options: {
// Handle your options as you normally would here
enhanceSVG: true,
embedIcons: true
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true, // Enable dynamic expansion
cwd: '<%= app.dirs.img %>/', // Src matches are relative to this path
src: ['**/*.{png,jpg,gif}'], // Actual patterns to match
dest: 'compiled/images/' // Destination path prefix
}]
},
svg: {
options: {
svgoPlugins: [{
removeViewBox: false
}]
},
files: [{
expand: true, // Enable dynamic expansion
cwd: '<%= app.dirs.img %>/svg/', // Src matches are relative to this path
src: ['*.svg'], // Actual patterns to match
dest: '<%= app.dirs.img %>/svg/stripped/' // Destination path prefix
}]
}
},
modernizr: {
dist: {
"crawl": true,
"customTests": [],
"dest": "<%= app.dirs.compiled %>/js/lib/modernizr-output.js",
"tests": [
],
"options": [
"html5shiv",
"setClasses"
],
"files" : {
"src": [
"<%= app.dirs.scss %>/**/*.scss",
"!lib/**/*"
]
},
"uglify": true
}
},
/*BrowserSync task below sets up a simple hhtp server and auto refresh/insert. It also has some very cool features with accessing on LAN*/
browserSync: {
dev: {
bsFiles: {
src: ["compiled/*.html", "compiled/pages/*.html", "compiled/widgets/*.html", "compiled/components/*.html", "compiled/css/**/*.css", "compiled/js/**/*.js", "compiled/images/**/.{jpg,png,gif}"],
},
options: {
watchTask: true,
server: {
baseDir: "compiled"
}
}
},
build: {
options: {
watchTask: false,
server: {
baseDir: "compiled"
}
}
}
}
});
/*Frontend */
grunt.registerTask('default', ['clean:data', 'jshint:dev', 'jsonlint', 'copy:dev', 'bower_concat', 'concat', 'uglify', 'assemble', 'sprite', 'imagemin:svg', 'grunticon', 'newer:imagemin', 'sass_directory_import', 'postcss:before', 'sass', 'postcss:after', 'csssplit', 'cssmin', 'modernizr', 'browserSync:dev', 'watch']);
};
Attached is a screenshot showing my terminal and open web page. The strange thing is that the 'modernizr' rules are within the browserSync section, which does not happen on my work machine. Same files. So frustrating.screenshot showing what I see when I run grunt
Since you say it works on your other laptop, most likely the problem is with the installation. First step: install the CLI
Second, check the root directory and change it if needed. For example:
Third, check whether you have properly installed grunt on the current laptop of yours: for example:
See also: https://gruntjs.com/installing-grunt