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
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?
I have been trying this for sometime now. Each time I run grunt in my Terminal I get the following error:
User$: grunt
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected identifier
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
This is my GruntFile.js
module.exports = function (grunt) {
grunt.initConfig({
sass: {
dist: {
files: {
'css/css.css' : 'css/css.scss'
}
}
},
concat: {
js: {
src:['js/*.js'],
dest: 'js/js.js'
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
js: {
files: ['js/*.js'],
tasks: ['concat:js']
},
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch', 'concat']);
};
My basic directory:
/js/jquery.js
/js/angular.js
/js/js.js
/css/settings.scss
/css/slider.scss
/css/css.css
You're missing a comma after your watch:css target (line 23).
Also, please note that the watch task never exits, so you want your default task to run it last:
grunt.registerTask('default', ['concat', 'watch']);
And finally, you should exclude your concatenated js from the list of watched files, to avoid looping.
module.exports = function (grunt) {
grunt.initConfig({
sass: {
dist: {
files: {
'css/css.css' : 'css/css.scss'
}
}
},
concat: {
js: {
src:['js/*.js', '!js/js.js'],
dest: 'js/js.js'
}
},
watch: {
css: {
files: 'css/*.scss',
tasks: ['sass']
},
js: {
files: ['js/*.js', '!js/js.js'],
tasks: ['concat:js']
},
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['concat', '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'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
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.