Hi I am trying to learn grunt tutorial from youtube and I am following the same instruction as mention in the video.
But while running the command grunt in my system I am getting the error , which I am not able to resolve it.
Below is my package.json
{
"name": "shreyansh",
"version": "1.0.0",
"description": "running grunt test",
"main": "index.html",
"author": "shreyansh",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-cssmin": "^1.0.2",
"grunt-contrib-uglify": "^2.0.0"
}
}
Gruntfile.js
module.exports = funtion(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
cssmin: {
combine:{
files:{
'Project/css/main.css': [ 'file-upload.css']
}
}
}
});
grunt.LoadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['cssmin'])
};
Error : -
Loading "Gruntfile.js" tasks...ERROR >> SyntaxError: Unexpected token {
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
I tried to look for the similar errors questions from stackoverflow but no luck.
Any help is appreciated as I am using grunt first time
Thanks
Fix the typo in line 1 of your gruntfile, change funtion to function:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
cssmin: {
combine:{
files:{
'Project/css/main.css': [ 'file-upload.css']
}
}
}
});
grunt.LoadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['cssmin'])
};
Related
I'm using Grunt to live convert my SASS files to CSS via watch.
The thing is: I can run the Compass task normaly, the CSS is created very well, but when I use WATCH I got the error:
grunt.util._.contains is not a function
Here's my package.json:
{
"name": "myName",
"description": "myDesc",
"author": "mySelf",
"version": "0.0.1",
"private": true,
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-compass": "^1.1.1",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-uglify": "^0.5.1",
"grunt-contrib-watch": "^0.4.4"
}
}
Here's my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dist: {
options: {
config: 'config.rb'
}
}
},
watch: {
css: {
files: 'assets/**/*.{scss,sass}',
tasks: ['compass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['compass','watch']);
};
I try a lot of changes but nothing helps
Update!
After a long night, solve the problem... Please read my own answer
I solved the problem! The ^4.0 lodash version has changed contains to includes, and the grunt-contrib-watch uses the old lodash syntax. So I changed only one line in the code. Find
node_modules/grunt-contrib-watch/tasks/watch.js on line 116:
Old line:
if (!grunt.util._.contains(target.options.event, 'all') && !grunt.util._.contains(target.options.event, status)) {
New line:
if (!grunt.util._.includes(target.options.event, 'all') && !grunt.util._.includes(target.options.event, status)) {
Now the Watch with Compass/SASS works like a charm ;)
I hope it helps someone!
Haven been playing with this for several hours
package.json
{
"name": "compile-tests",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"assemble": "^0.7.3"
}
}
Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
assemble: {
options: {
flatten: true,
layout: "../templates/1.hbs"
},
pages: {
files: {
'../dist' : ['../pages/*.hbs']
}
}
}
});
grunt.loadNpmTasks('assemble');
grunt.registerTask('default', ['assemble']);
};
Tried removing and re-installing all the modules a few times. And also tried different versions, interestingly the versions mentioned in this article http://blog.parkji.co.uk/2013/07/06/building-a-static-site-using-grunt-and-assemble.html seem to work but then I get other issues because those versions are out of date.
Error
$ Grunt
>> Local Npm module "assemble" not found. Is it installed?
Warning: Task "assemble" not found. Used --force, continuing.
I just had to use grunt-assemble
$ npm install grunt-assemble --save-dev
And adjust this line in the Gruntfile.js
grunt.loadNpmTasks('grunt-assemble');
I have an error executing "grunt server" :
Running "brunch:server" (brunch) task result in Fatal error: spawn ENOENT
Here you can find my dependencies from package.json :
"dependencies": {
"javascript-brunch": "1.7.0",
"coffee-script-brunch": "1.7.2",
"css-brunch": "1.7.0",
"stylus-brunch": "1.7.0",
"handlebars-brunch": "1.7.2",
"uglify-js-brunch": "1.7.3",
"clean-css-brunch": "1.7.1",
"jsenv-brunch": "1.4.2",
"auto-reload-brunch": "1.7.1",
"moment": "2.4.0",
"lodash": "2.4.0",
"grunt": "0.4.2",
"grunt-contrib-clean": "0.5.0",
"grunt-contrib-copy": "0.4.1",
"grunt-brunch": "0.0.2",
"grunt-shell": "0.6.1",
"grunt-contrib-htmlmin": "0.1.3",
"grunt-line-remover": "0.0.2"
},
"devDependencies": {},
"peerDependencies": {
"grunt": "0.4.2"
}
And here part of my gruntfile :
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
brunch: {
options: {
env: ['<%= company %>', '<%= platform %>'],
production: '<%= production %>'
},
build: {},
watch: {
options: {
watch: true
}
},
server: {
options: {
server: true
}
}
},
});
grunt.loadNpmTasks('grunt-brunch');
grunt.loadTasks('tasks');
grunt.registerTask('server', [
'init',
'clean:build',
'brunch:server'
]);
I tried many things nothing works, any ideas will be welcoming ?
The issue is due to the path settings in the task file: ./node_modules/grunt-brunch/tasks/brunch.coffee. As it is set now the brunch binary is not found leading to the ENOENT error. If you change the path to:
BASE = "#{__dirname}/../../../"
in line #2 of the task file, the binary is found and the plugin works.
EDIT: The issue only happens if there is a brunch installed locally on the base dir. In this case it seems brunch is NOT installed into the npm-modules of the grunt-brunch package (where the path is pointing to)
npm install --save brunch
The grunt-brunch plugin expects brunch to be a local dependency of your project. It is not set up to use a global brunch installation.
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']);
So I'm making my own Wordpress Framework, and am utilizing grunt and sass. I'm newer at grunt and sass, but experienced enough with grunt to kind of know what I'm doing, but I've used LESS in the past and not Sass.
I'm taking the Gruntfile.js file from roots.io as a starting point. Everything I have is correct as far as I know, but I'm not too sure about a couple of things. I removed the js stuff because I'm not going to be watching for it, and I added grunt-contrib-sass.
When running grunt watch I get this error:
grunt watch
/Gruntfile.js:22
watch: {
^^^^^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected identifier
Warning: Task "watch" not found. Use --force to continue.
Aborted due to warnings.
Below is my Gruntfile.js and my package.json
Gruntfile.JS
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
version: {
options: {
file: 'lib/scripts.php',
css: 'assets/css/main.min.css',
cssHandle: 'su_styles'
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'assets/css/main.min.css': [
'assets/scss/app.scss'
]
}
}
},
watch: {
sass: {
files: [
'assets/scss/*.scss',
'assets/scss/foundation/*.scss'
],
tasks: ['sass', 'version']
},
livereload: {
// Browser live reloading
// https://github.com/gruntjs/grunt-contrib-watch#live-reloading
options: {
livereload: false
},
files: [
'assets/css/main.min.css',
'templates/*.php',
'*.php'
]
}
},
clean: {
dist: [
'assets/css/main.min.css'
]
}
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-wp-version');
grunt.loadNpmTasks('grunt-contrib-sass');
// Register tasks
grunt.registerTask('default', [
'clean',
'version',
'sass'
]);
grunt.registerTask('dev', [
'watch'
]);
};
package.json - with some stuff taken out to preserve a bit of privacy
{
"name": "sudoh",
"version": "1.0.0",
"author": "Brandon Shutter <brandon#brandonshutter.com>",
"licenses": [
{
"type": "MIT",
"url": "http://opensource.org/licenses/MIT"
}
],
"engines": {
"node": ">= 0.10.0"
},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-wp-version": "~0.1.0",
"grunt-contrib-sass": "~0.5.0"
}
}
Thanks for your help ahead of time.
It seems there wasn't anything wrong with my setup. My code editor (Brackets) added hidden characters for whatever reason and was causing a syntax error. Switching over to Sublime and saving the file again allowed it work perfectly.
Thanks for the help everyone.