I managed, to get Grunt Installed. I have a gruntfile.js, within the gruntfile.js I have a grunt file task, how do I run a grunt task within obviously node command prompt ?

grunt

 

That is literally the command if you have grunt installed globally.

>> SyntaxError: Unexpected token :

Warning: Task "default" not found. Use --force to continue.

 

 

That is the error I get; how do I create a default task ?

http://gruntjs.com/creating-tasks#alias-tasks

 

Specifically:

grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

You'll need to replace the values in the array with the tasks you want to run by default.

 

-

 

http://gruntjs.com/creating-tasks#custom-tasks

 

Or you can do something like:

grunt.registerTask('default', 'My "default" task description.', function() {
  grunt.log.writeln('Currently running the "default" task.');
});

Hope that helps.

Edited May 30, 201610 yr by jakdothtml

Use the examples on the Grunt website. Personally though if I need a complex task runner (In many cases you don't you can just use NPM Scripts) I would always advise Gulp over Grunt as Gulp runs async which is much faster when you have a lot of tasks working on many large files.

jak - Before I proceed any further, placing the grunt task in a file called gruntfile.js, is correct ?

I have the task command to trigger the task, as well, why am I getting this error when running the command; grunt ?

 

Loading "gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected token :
Warning: Task "default" not found. Use --force to continue.

Aborted due to warnings.

 

>> SyntaxError: Unexpected token :

 

You probably have a typo in your code.

Here is the code ?

replace: {
        // ID cleanup: performs a manual ID cleanup as Illustrator exports a mess
        illustrator: {
            src: ['assets/svg/optimised/*.svg'],
            overwrite: true,
            replacements: [{
                // Remove escaped underscore character
                from: '_x5F_',
                to: '_'
            }, {
                // Replace class names with proper classes
                //class_x3D__x22_tank-option_x22__2_
                from: /id\=\"class_x3D__x22_(.+?)_x22_(.*?)\"/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return 'class="'+ regexMatches[0].toLowerCase()+'"';
                }
            }, {
                // Lowercase all ids
                from: /id\=\"(.+?)\"/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return 'id="'+ regexMatches[0].toLowerCase()+'"';
                }
            }, {
                // Lowercase all id references to match the previous replace rule
                from: /url\(\#(.+?)\)/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return 'url(#'+ regexMatches[0].toLowerCase() +')';
                }
            }, {
                // Lowercase all id href to match the previous replace rule
                from: /href\=\"\#(.+?)\"/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return 'href="#'+ regexMatches[0].toLowerCase() +'"';
                }
            }, {
                // Remove all font references as we will use CSS for this
                from: /font\-family\=\"(.+?)\"/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return '';
                }
            }]
        }
    }

You're missing a whole bunch of the code necessary to setup and run grunt in your Gruntfile. I suggest you take a read of the Grunt documentation and gruntFile examples.

 

Also in grunt like all task runners you import tasks and run them while passing in configuration. You don't execute regexes and and so on with in Grunt. It appears like you are trying to tidy up SVGS by removing cruft. There are Grunt plugins that already do this, look for one called svgo.

Use the examples on the Grunt website. Personally though if I need a complex task runner (In many cases you don't you can just use NPM Scripts) I would always advise Gulp over Grunt as Gulp runs async which is much faster when you have a lot of tasks working on many large files.

 

+1 for Gulp! If you wanna check it out: https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

 

Yeah as Robert said, you need an entire working gruntfile. I was under the assumption you had one, minus the default task.

 

http://gruntjs.com/sample-gruntfile - here's your starting point. Let us know how you get on!

This is a supposedly a complete grunt task as mentioned here and so this is wrong ?

Why would you use a stackoverflow-esque / forum response example instead of the official documentation? The official docs tell you all you need to know and they have copy-paste examples. Official docs for anything is where you should always start.

 

The code in your link is not a full example of a Gruntfile and is also doing unnecessary stuff, Grunt is supposed to run tasks and the Gruntfile allows you to specify those tasks and pass in options to them - it's configuration nothing more. You should not try and write the code for the actual task like in that example.

 

Set up your Gruntfile according to the documentation then pull down svgo from NPM and import it into your Gruntfile and use their documentation to include it and run it as a Grunt Task.

Edited June 1, 201610 yr by rbrtsmith

Did you check out the sample grunt file in my post?

 

To make it easier, why don't you tell us what tasks you're trying to run and maybe then we can point you in an even better direction. The Grunt docs are a great starting point though!

Edited June 1, 201610 yr by jakdothtml

First off, before I dive into any other question asked, is; shouldn't the command

grunt

in the node command prompt not cause an error ?

 

I want to feed a SVG file and have all paths in the SVG file be given custom class names automatically, eliminating the need for me to do it manually; that is where I hope my assumption was correct where grunt come in to help ?

How will a Grunt task, or any automated task runner know what classnames to add and where? This isn't really something that can be easily automated, especially if it is different for each SVG. I assume this is for hooks to animate an inline SVG, otherwise there's not much point in the classnames?

 

As for your command, yes that is all that is needed, it will look for a Gruntfile within your current directory and execute it. It will error out if it doesn't find a Gruntfile or, which is likely in your case: contains errors. This is assuming you have Grunt installed globally. Otherwise you can call it via an NPM script.

Edited June 2, 201610 yr by rbrtsmith

How will a Grunt task, or any automated task runner know what classnames to add and where? This isn't really something that can be easily automated, especially if it is different for each SVG. I assume this is for hooks to animate an inline SVG, otherwise there's not much point in the classnames?

 

As for your command, yes that is all that is needed, it will look for a Gruntfile within your current directory and execute it. It will error out if it doesn't find a Gruntfile or, which is likely in your case: contains errors. This is assuming you have Grunt installed globally. Otherwise you can call it via an NPM script.

SVG files have <path> tags that is where you can insert class names. It sounds as if you're saying it can't be done, but it can be done in your paragraph following ?

I'm well aware of what tags live within SVG's I've worked quite extensively with SVG animation but each time classnames have been manually added, how is an automated task runner going to know what <path> <symbol> etc... element to add a classname to and indeed what that classname might be.

 

Think about how automation actually works - the task has to be repetitive and each time consistent or following a strict pattern that the machine can adhere too. I assume here you have a bunch of different SVGs that need classnames inserting - in which case good luck automating that.

Edited June 2, 201610 yr by rbrtsmith

The site mentioned in post #11 the person wants identical to that what I want to do, and it appears possible.

 

rbrsmith, based on what you are telling me and I understand that the computer needs a consistent path to follow to make it work but the site I mentioned in post #11 appears to have solved that problem ?

 

Regardless if we understand each other, there must be a method to which I can parse a SVG file and for each <path> tag add a class name ?

rbrsmith - You add a class to all <path> tags, you can't tell me that, that is not possible, maybe you will !

Edited June 3, 201610 yr by CreativeSheep