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/sass/**/*.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');
};
I don't understand javascript, but I have to deal with it this time.
Please pick the mistake for me :)
This is my errormessage:
Loading "gruntfile.js" tasks...ERROR
SyntaxError: Unexpected identifier
Warning: Task "sass" not found. Use --force to continue.
Aborted due to warnings.
You are missing a comma inside the watch target:
watch: {
css: {
files: 'sites/all/themes/uj/sass/**/*.scss',
tasks: [ 'sass:dev' ], //<-- missing comma added here
options: { livereload: true }
}
Also remove the empty load call: grunt.loadNpmTasks(''); it is redundant.
Related
As you can see I have tasks for CSS ['sass:main'] and for JS ['jshint:main', 'concat:main', 'uglify:main'], but I want to do separate tasks for separate files (JS and CSS) and listen for changes (watch). Can someone point me in the correct direction, I'm not really sure what I should be searching for. Is this something that watch can handle, or is there another plugin? I'm a little new to grunt so still trying to figure out how to use it. Thanks
GruntFile.js:
module.exports = function(grunt) {
var config = {
pkg: grunt.file.readJSON('package.json'),
jshint: {
options: {
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
},
main: {
src: [
'assets/templates/main/js/crm/*.js',
]
}
},
concat: {
options: {
separator: '\n\n'
},
main: {
src: [
'assets/templates/main/js/crm/*.js',
],
dest: 'assets/templates/main/js/crm.min.js'
}
},
sass: {
options: {
style: 'compressed'
},
main: {
files: {
'assets/templates/main/css/main.min.css': 'assets/templates/main/sass/main.scss',
}
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
main: {
src: 'assets/templates/main/js/crm.min.js',
dest: 'assets/templates/main/js/crm.min.js'
}
},
watch: {
mainjs: {
files: ['assets/templates/main/js/crm/*.js'],
tasks: ['jshint:main', 'concat:main', 'uglify:main'],
},
mainsass: {
files: ['assets/templates/main/sass/*.scss''],
tasks: ['sass:main'],
}
},
concurrent: {
maincss: ['sass:main'],
mainjs: ['jshint:main', 'concat:main', 'uglify:main']
}
};
grunt.initConfig(config);
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-concurrent');
grunt.registerTask('main', ['jshint:main', 'concat:main', 'uglify:main', 'sass:main']);
grunt.registerTask('main-watch', ['jshint:main', 'concat:main', 'uglify:main', 'sass:main', 'concurrent:mainsass']);
};
When I try run tasks:
$ grunt main-watch
Loading "Gruntfile.js" tasks...ERROR
SyntaxError: Invalid or unexpected token
Warning: Task "main-watch" not found. Use --force to continue.
Aborted due to warnings.
It sounds like you want to perform two concurrent watch tasks. You can do that using a configuration like this:
...
concurrent: {
options: { logConcurrentOutput: true },
watch: ['watch:mainjs', 'watch:mainsass']
}
};
...
grunt.registerTask('main-watch', ['concurrent:watch']);
Note that logConcurrentOutput defaults to false, so if you want to see output logged to the console, you need to set it to true.
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 have the following Gruntfile.js. My bootstrap.less file has tons of imports which includes all the plugins' CSS codes as well. Therefore, the bootstrap takes from 5-20 seconds to compile whenever I make a change to any less files. Is there any way I can have two different less tasks, so whenever there's a change in any of the bootstrap's imported files, that only runs the less task associated to the bootstrap and the other task that would run only if the main.less is changed.
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
development: {
options: {
paths: ["../css"]
},
files: {
"../css/bootstrap.css": "../less/bootstrap.less",
"../css/main.css": "../less/main.less"
}
}
},
watch: {
options: {
livereload: true
},
less: {
options: {
livereload: false,
spawn: false
},
files: ['../less/*.less', '../less/responsive/*.less'],
tasks: ['less']
}, css: {
files: ['../css/main.css'],
tasks: []
}
}
});
// Less
grunt.loadNpmTasks('grunt-contrib-less');
// Watch
grunt.loadNpmTasks('grunt-contrib-watch');
};
try running this code :
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
development: {
options: {
paths: ["../css"]
},
files: {
"../css/main.css": "../less/main.less"
}
},
bootstrapBuild : {
options : {
paths: ['../css']
},
files : {
"../css/bootstrap.css": "../less/bootstrap.less",
}
}
},
watch: {
options: {
livereload: true
},
mainCSS: {
options: {
livereload: false,
spawn: false
},
files: ['../less/*.less', '../less/responsive/*.less', '!../less/bootstrap.less'],
tasks: ['less: development']
},
bootstrapBuild : {
files: ['../less/bootstrap.less'],
tasks: ['less:bootstrapBuild']
},
css: {
files: ['../css/main.css'],
tasks: []
}
}
});
// Less
grunt.loadNpmTasks('grunt-contrib-less');
// Watch
grunt.loadNpmTasks('grunt-contrib-watch');
};
I am experimenting with Grunt and I am getting a Warning: Task "default" not found error when I try to run Grunt. my Gruntfile.js is
module.exports = function(grunt) {
grunt.initConfig({
concat: {
js: {
options: {
separator: ';'
},
src: [
'library/js/*.js'
],
dest: 'library/js/scripts.min.js'
},
},
uglify: {
options: {
mangle: false
},
js: {
files: {
'library/js/scripts.min.js': ['library/js/scripts.min.js']
}
}
},
less: {
style: {
files: {
"library/css/style.css": "library/less/style.less"
},
}
},
watch: {
js: {
files: ['library/js/*.js'],
tasks: ['concat:js', 'uglify:js'],
options: {
livereload: 35729
}
},
css: {
files: ['library/less/*.less'],
tasks: ['less:style'],
options {
livereload: 35729
}
},
php : {
files : ['**/*.php'],
options : {
livereload : 35729
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
This was working until I added the Livereload portions, and I think it might be a syntax error. However this is the first time I have used this and I simply don't know what is causing the problem. Any help would be greatly appreciated.
You're missing a colon for watch.css.options. Update to:
css: {
files: ['library/less/*.less'],
tasks: ['less:style'],
options: {
livereload: 35729
}
}
In case anyone finds this later to get livereload to work I had to change the watch section to
watch: {
js: {
files: ['library/js/*.js'],
tasks: ['concat:js', 'uglify:js'],
},
css: {
files: ['library/less/*.less'],
tasks: ['less:style'],
},
php : {
files: ['**/*.php'],
},
options: {
livereload: true,
spawn: false
}
}
I am not sure why Grunt isn't generating my HTML?
Is there a mistake with my gruntfile?
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-haml');
grunt.initConfig({
uglify: {
my_target: {
files: {
'js/script.js': ['javascripts/*.js']
} //files
} //my_target
}, //uglify
sass: {
dist: {
options: {
sourcemap: true,
compass: true
}, //options
files:{
'stylesheets/style.css': 'sass/style.scss'
} //files
} //dist
}, //sass
haml: { // Task
dist: { // Target
files: { // Dictionary of files
'index.html': 'index.haml' // 'destination': 'source'
}
}
},
watch: {
options: { livereload: true },
scripts: {
files: ['javascripts/*.js'],
tasks: ['uglify']
}, //script
css: {
files: ['sass/*.scss'],
tasks: ['sass']
}, //sass
html: {
files: ['*.haml'],
task: ['haml']
}
} //watch
}) //initConfig
grunt.registerTask('default', ['haml', 'watch']);
} //exports
Old question, but I had the same issue, and here's what it was for anyone's future reference.
The gruntfile that I downloaded (like this one) had 'task' instead of 'tasks'. So the watch task is running, and you'll get notified that a file has changed, but no actual tasks will be run. Correct the typo and you're back in action!
Figure this out.
There is no problem with the code itself.
It is the terminal screwing up.