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"
}
Related
I've started to learn this just now. I installed the grunt.
If I get grunt watch it is automatic but only in case one file.
How could I make it wath all scss file in my theme, and make the css in different folders.
I don't really undestand how could it working in big.
This is my gruntfile.js now:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
uses_defaults: {}
},
sass: {
dev: {
options: { sourceMap: true },
files: { 'sites/all/themes/uj/css/uj.styles.css' : 'sites/all/themes/uj/sass/uj.styles.scss' }
}
},
watch: {
css: {
files: 'sites/all/themes/uj/**/*.scss',
tasks: [ 'sass:dev' ],
options: { livereload: true }
}
}
});
// Load Grunt plugins
// grunt.loadNpmTasks('');
// Default task(s).
grunt.registerTask('default', []);
// Load Grunt plugins
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
};
Per the official documentation on file globbing, to watch for changes for files of a certain file type in the directory path and its subdirectories, you'll want:
files: ['js/**/*.js']
or:
files: ['css/**/*.*']
I am using grunt first time, I could able to concat css file using grunt-contrib-concat but I am getting following error while creating minified css file using grunt-conrib-cssmin
Error is :
>> TypeError: Cannot call method 'clone' of undefined
Warning: CSS minification failed. Use --force to continue.
My package.json file is :
{
"name": "grunt-test-project",
"description":"testing grunt css and js files minification",
"repository":"",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-concat": "~0.5.0",
"grunt-contrib-cssmin" : "~0.10.0"
}
}
My Gruntfile.js file is :
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
css: {
src: [
'css/popup.css', 'css/styles_layouts.css', 'css/style.css', 'css/fileuploader.css','css/uniform.default.css',
'css/login_popup.css','css/validationEngine.jquery.css','css/ui-custom/jquery-ui.css'
],
dest: 'css/build/combined.css'
}
},
cssmin: {
css:{
src: 'css/build/combined.css',
dest: 'css/build/combined.min.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Default task(s).
grunt.registerTask('default', ['cssmin']);
}
It will help me lot if you could provide some solution.
Thanks you
Your code is a bit different than the one at the grunt-contrib-cssmin documentation page.`
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
target: {
files: {
'output.css': ['foo.css', 'bar.css']
}
}
}
`
You have a problem with cssmin configuration.
Try to change for it:
cssmin: {
css:{
files: {
'css/build/combined.min.css': ['css/build/combined.css']
}
}
}
Maybe this fix your problem.
Hope it helps.
Regards.
It may be that you forgot to register the task:
grunt.registerTask('default', ['concat', 'cssmin']);
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.
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