I'm trying to get grunt-browser-sync to inject any css changes into an open browser when a file is updated/changed. But for some reason, I can seem to get it to work and grunt is not giving me any errors to let me know it's not working.
I'm currently using MAMP since it's a Wordpress based project.
Here's my Gruntfile.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: '_/js/libs/*.js', //input
dest: '_/js/functions.min.js' //output
}
},
sass: {
dist: {
options: {
loadPath: require('node-bourbon').includePaths,
loadPath: require('node-neat').includePaths,
style: 'compressed'
},
files: {
'style.css': 'scss/style.scss'
}
}
},
autoprefixer: {
dist: {
files: {
'style.css': 'style.css'
}
}
},
browserSync: {
dev: {
bsFiles: {
src : 'style.css'
},
options: {
watchTask: true
}
}
},
watch: {
options: {
livereload: true
},
js: {
files: ["_/js/libs/*.js"],
tasks: ["ugilify"],
},
sass: {
files: ["scss/*.scss"],
tasks: ["sass", "autoprefixer", "browserSync"],
},
php: {
files: ['*.php']
},
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-browser-sync');
// Default task(s).
grunt.registerTask('default', ['uglify', 'sass', 'browserSync', 'watch', 'autoprefixer']);
};
and here's the output when I save/update a file:
Running "watch" task
Waiting...
>> File "scss/global.scss" changed.
Running "sass:dist" (sass) task
File style.css created.
Running "autoprefixer:dist" (autoprefixer) task
File style.css created.
Running "browserSync:dev" (browserSync) task
Done, without errors.
Completed in 1.478s at Wed May 07 2014 18:47:40 GMT-0500 (CDT) - Waiting...
But then I have to physically refresh the browser to see the changes.
I'm not sure if I am missing something within the grunt file or what.
The only version of grunt-browser-sync that works for me with this code is 1.9.1. So, un-install your current version and
npm install grunt-browser-sync#1.9.1 --save-dev
I encountered the same issue and have opened an issue here
Github grunt-browser-sync repo with issues 58
Related
I am trying to get my index.html at the root of my app (app/index.html) running with grunt from I file I inherited.
My grunt file is as follows:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass_directory_import: {
your_target: {
files: {
src: ['css/sass/parts/_all.scss']
},
},
},
connect: {
server: {
options: {
port: 9000,
hostname: 'localhost',
base: ['./'],
keepalive: true,
open: {
target: 'http://localhost:9000'
}
}
}
},
sass: {
dist: {
options: {
loadPath: require('node-bourbon').includePaths,
sourceMap: true
},
files: {
'css/style.css' : 'css/sass/style.scss',
'css/style-ie.css' : 'css/sass/style-ie.scss'
}
},
},
watch: {
sass: {
files: 'css/sass/**/*.scss',
tasks: ['sass_directory_import','sass']
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass-directory-import');
grunt.loadNpmTasks('grunt-contrib-connect');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default',['watch', 'connect:server']);
grunt.registerTask('build',['sass', 'uglify']);
};
I want index to appear under the port: http://localhost:9000 but when I run the default watch task, only get the sass files being watched for changes and nothing else. How do I get grunt to run the file under the given port? I have only used Gulp before and am not finding grunt very easy to work with. Is there a grunt server/connect task that does not have to be installed?
can you please take a look at the following Gruntfile to see if you can determine why it isn't running cssnano and autoprefixer?
Grunt is currently watching my project and with each save grunt-sass compiles fine but neither grunt-cssnano or autoprefixer are doing their thing and no errors are reported.
Done, without errors.
Completed in 1.906s at Wed Nov 25 2015 13:12:18 GMT+0000 (GMT Standard Time) - Waiting...
File "sass\styles.scss" changed.
Running "sass:dist" (sass) task
I figure I've done something wrong with grunt-contrib-watch setup (specifically the css part) but that's just a guess.
My project folder looks like so
dist
css
styles.css
node_modules (includes all relevant packages)
sass
styles.css
Gruntfile.js
package.json
And my Gruntfile is as follows
module.exports = function (grunt) {
grunt.initConfig({
sass: {
options: {
sourceMap: false
},
dist: {
files: {
'dist/css/styles.css': 'sass/styles.scss'
}
}
},
postcss: {
options: {
map: {
inline: false,
annotation: 'dist/css/maps/'
},
processors: [
require('autoprefixer')({
browsers: 'last 2 versions'
}),
require('cssnano')()
]
},
dist: {
src: 'dist/css/styles.css'
}
},
watch: {
sass: {
files: 'sass/*.scss',
tasks: ['sass']
},
css: {
files: 'dist/css/styles.css',
tasks: ['cssnano', 'autoprefixer']
}
},
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-cssnano');
grunt.registerTask('default', ['watch', 'sass', 'postcss:dist', 'cssnano', 'autoprefixer']);
};
registering a task like you do :
grunt.registerTask('default', ['watch', 'sass', 'postcss:dist', 'cssnano']);
will execute the tasks one by one. So in your case, only the watch task will be executed because it "never ends" till you finish it. So the sass, postcss:dist, cssnano wont be reached.
So in your case it will execute the watch task only, which will watch the *.scss files to execute the sass task and watch the style.css to execute the cssnano and autoprefixer task.
But these 2 last tasks aren't defined in your config, so it won't do anything.
To solve your problem, remove the tasks from your default registered task because they aren't used :
grunt.registerTask('default', ['watch']);
And add a config for each missing task. for example:
cssnano: {
options: {
sourcemap: true
},
dist: {
files: {
'dist/css/styles.min.css': 'dist/css/styles.css'
}
}
},
//and same for autoprefixer
With a lot more trial and error it looks like I have a solution. The below file now runs Sass, cssnano, autoprefix and watch. Sass, cssnano and autoprefix packets (and I assume any others that are added in future) will do their thing in grunt.initConfig while and at the bottom of the file registerTask takes care of watch.
More work is need to figure out how to create other registerTasks but that's for another day.
Thanks to Mian who set me on the right track.
module.exports = function (grunt) {
grunt.initConfig({
sass: {
options: {
sourceMap: false
},
dist: {
files: {
'dist/css/styles.css': 'sass/styles.scss'
}
}
},
postcss: {
options: {
map: {
inline: false,
annotation: 'dist/css/maps/'
},
processors: [
require('autoprefixer')({
browsers: 'last 2 versions'
}),
require('cssnano')()
]
},
dist: {
src: 'dist/css/styles.css'
}
},
watch: {
sass: {
files: 'sass/*.scss',
tasks: ['sass', 'postcss']
},
},
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-cssnano');
grunt.registerTask('default', ['watch']);
};
I was trying to figure out why my JS wasn't being compiled by grunt, so I edited the gruntfile.js. And then grunt watch stopped. I've tried reverting the file with git and I've npm installed to try to see if that might help... does anyone see a problem with my gruntfile? Or perhaps have another possible solution?
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.initConfig({
uglify:{
my_target: {
files: {
'js/script.js': ['_/js/*.js']
}//files
}//target
},//uglify
compass:{
dev:{
options: {
config:'config.rb'
}//options
}//dev
}, //compass
watch: {
options:{ livereload: true },
scripts: {
files: ['_/js/*.js'],
tasks: ['uglify']
},
sass: {
files:['_/sass/*.scss'],
tasks: ['compass:dev']
}//sass
//scripts
// html: {
// files: ['*.html']
// } //for auto refresh browser, need script on html as well.
}//watch
})//initConfig
grunt.registerTask('default','watch') //run gunt and wait for changes
}//exports
and here are my package.json dependencies
"dependencies" : {
"grunt" : "~0.4.5",
"grunt-contrib-watch" : "~0.6.1",
"grunt-contrib-compass" : "~1.0.3",
"grunt-contrib-uglify" : "~0.9.1",
"matchdep" : "~0.3.0"
}
I have both files: app.js which starts the http server, and main.js which is compiled by browserify and used in html as
So I have a Grunt configured with forever, browserify and watch.
I want that on app.js chance, the http must be restarted (via forever:restart), and when main.js changes, the build must be browserified (via browserify)
so, when i run grunt, says forever:start does not exist, any help ?
$ grunt
Warning: Task "forever:server1:start" not found. Use --force to continue.
this is my gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify: {
dist: {
files: {
'examples/public/js/module.js': ['examples/main.js']
}
}
},
forever: {
server1: {
options: {
index: 'examples/app.js',
logDir: 'examples/logs'
}
}
},
watch: {
app: {
files: ['examples/*.js', 'examples/templates/*' ],
tasks: ['forever:server1:start']
},
web: {
files: ['examples/*.js', 'examples/templates/*' ],
tasks: ['browserify']
},
}
});
//grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('default', ['browserify', 'forever:server1:start']);
grunt.registerTask('restart', ['browserify', 'forever:server1:restart']);
};
The task isn't found because you're missing grunt.loadNpmTasks('grunt-forever'). You might also find more success using something like nodemon instead of grunt.
I'd like to create a task to watch all my scss files. And I used "grunt-contrib-watch" and "grunt-contrib-sass" but it doesn't work.
My files and my directories : http://glui.me/?i=pz7vmwu9cfgbzt3/2013-11-28_at_12.46_2x.png/
My error :
MacBook-Pro-of-username:src username:src$ grunt
Running "cssmin:minify" (cssmin) task
File lib/stylesheets/bottom.min.css created.
Running "watch" task
Waiting...Bus error: 10
My grunt code :
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'lib/stylesheets/bottom.css' : 'lib/sass/bottom.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
},
cssmin: {
minify: {
files: [{
'lib/stylesheets/bottom.min.css': ['lib/stylesheets/bottom.css']
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', ['watch']);
}
There was an issue with node <= 0.10.20 and OSX mavericks. Upgrade node.js to the latest and it should fix the issue. See https://github.com/gruntjs/grunt-contrib-watch/issues/204