GruntJS refuses to work. Task default or every other was not found - gruntjs

I'm trying to setup gruntJS on my local machine. These are the steps I have already done:
Install nodeJS
Download gruntJS in a root folder of project with command:
npm install -g grunt-cli
Download grunt also in a root folder of project with:
npm install grunt
Also, I have created Gruntfile.js and here is content of it:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
min: {
css: {
src: 'templates/folder1/css/*.css',
dest: 'app.min.css'
}
},
});
};
And I was expected how this will work and minimize all css files and move it to the root ( because destination specified as root ).
I need to say how I was follow this tutorial:
https://www.youtube.com/watch?v=q3Sqljpr-Vc
And I really don't know what I do wrong.
Here is how I call grunt and error ( its better to say warning message ) which I get:
C:\wamp\www\myProject>grunt min
Warning: Task "min" not found. Use --force to continue.
Aborted due to warnings.

you need to install some tasks for use. From your example i would guess you are trying to minify some CSS?
For that i would use the grunt-contrib-cssmin task. To use first install using
npm install grunt-contrib-cssmin
you will also need to register the task at the bottom of your gruntfile like this grunt.loadNpmTasks('grunt-contrib-cssmin').
then your gruntfile will look like this
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
cssmin: {
minify: {
src: ['templates/folder1/css/*.css'],
dest: 'app.min.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('min' ['cssmin']);
};
For more info i recommend you read the documentation and familiarise yourself with the examples at http://gruntjs.com/sample-gruntfile

Related

ASP .NET 5 - grunt task to copy files from node modules to wwwroot

I have a simple ASP .NET 5 empty project - with npm and grunt installed.
I've used npm to install a few client-side libraries, at present located in the node_modules directory directly under my ASP .NET project.
I want to copy the relevant files (for example, jquery.min.js) from the node_modules folder into the wwwroot folder.
It's unclear to me how to use grunt to do this - as each node module has it's own dependency tree, and there doesn't seem to be any consistency in the file structure from package to package.
I could write a grunt task explicitly for each client side library I use, but in that case I may as well download everything manually and place the files where I need them manually, avoiding npm all together.
I know I could use bower, which has a flat dependency tree - which is probably the root I should go down - but I've read a few articles saying "there's no need for bower - npm can do it all" and therefore I would like to know if there's a way to do this purely with npm.
Is there a way? Or is the "npm can do it all" statement aimed at projects that will require the components directly from the node_modules?
TL DR; Is bower a better fit than npm for ASP .NET 5 projects with separation of source and build files, and if not, what's the recommended way of doing it purely with npm?
I don't fill me professional in grunt, but I use it myself and I think that I can explain you how one can use it corresponds to your requirements.
First of all you should add "New Item" to your project, choose "Client-Side" and "NPM Configuration file" to add package.json to the the project (in the same directory where you have project.json). I suppose you have already created the file, but the existence of the file is important for grunt too. Then you adds some dependencies, which you need on the client-side to "dependencies" part of package.json and add at least grunt and grunt-contrib-copy to "devDependencies" part. An example of the file you will see below
{
"version": "1.0.0",
"name": "ASP.NET",
"private": true,
"dependencies": {
"font-awesome": "^4.5.0",
"jquery": "^1.11.3"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.7.0",
"grunt-contrib-copy": "^0.8.2"
}
}
Now you should add "Grunt Configuration File" in the same way like you added "NPM Configuration file". You will create gruntfile.js (in the same directory where you have project.json). Finally you should fill gruntfile.js with more helpful code. For example the code
module.exports = function(grunt) {
grunt.initConfig({
clean: ["wwwroot/font-awesome/", "wwwroot/jquery*.*"],
copy: {
main: {
files: [
{
src: "node_modules/font-awesome/css/*",
dest: "wwwroot/font-awesome/css/",
expand: true,
filter: "isFile",
flatten: true
},
{
src: "node_modules/font-awesome/fonts/*",
dest: "wwwroot/font-awesome/fonts/",
expand: true,
filter: "isFile",
flatten: true
},
{
src: "node_modules/jquery/dist/*",
dest: "wwwroot/",
expand: true,
filter: "isFile",
flatten: true
}
]
}
}
});
grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.registerTask("all", ["clean", "copy"]);
grunt.registerTask("default", "all");
};
registers two tasks: clean and copy and the aliases all and default. You can select gruntfile.js file in the solution explorer, open context menu and choose "Task Runner Explorer". You will see all defined tasks. The task with the name "default" will be executed if you execute grunt without parameters (without the task name) in the command line.
Now you can choose some task and run it. You can choose some task, click right mouse button to open context menu and check "After Build" in "Bindings":
Now the task will be executed every time when you build the project. You can click optionally "V" button on the left side to see verbose information from the executed tasks.
I hope it's already the main information which you need. Many other helpful information about plugins grunt-contrib-clean, grunt-contrib-copy, grunt-contrib-jshint, grunt-jscs, grunt-newer and many other you will find yourself. One official place of ASP.NET 5 documentation should be mentioned. It's the place.
P.S. You asked additionally about the usage of bower. I find both npm and bower not perfect, but still very practical. I would prefer to hold full control over the dependencies and especially about the data, which will be copied under wwwroot. Thus I change the content of .bowerrc file from { "directory": "wwwroot/lib" } to { "directory": "bower_components" } and I use grunt to copy the required data from bower_components in the same way like I do this with files from node_modules. See the article for more details. In other words I use packages published only in bower repository in the same way like I use npm packages.

How can I properly config the uncss in grunt?

I've tried to configure uncss using grunt
I've installed
npm install grunt-uncss --save-dev
npm install grunt-processhtml --save-dev
Configuration
uncss: {
dist: {
files: { 'dist/css/clean.css': ['index.php'] }
}
}
at the end I load them in and register a default task like this :
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-processhtml');
grunt.registerTask('default', ['uncss', 'processhtml']);
Result
When I run grunt
at the end I keep seeing :
Running "uncss:dist" (uncss) task
Fatal error: PhantomJS: Cannot open about:blank
Update
I added :
processhtml: {
dist: {
files: {
'index.php': ['index.php']
}
}
}
Still get the same error after running grunt
If this is all of your code, you are not referencing any stylesheets to remove code from. All you are doing is telling grunt where the cleaner file should go, and to remove any unused css from index.php. However, it doesn't know where the styles for index.php live, so it has nothing to do... You need to actually configure your processhtml and tell uncss which stylesheets you would like to clean up.
Read the directions friend:
grunt-uncss github readme.md
I have that problem with my project and the solution is here:
You need update the uncss module, remember grunt-uncss is only a way to use uncss node package. In my case my version of that was in 0.12.1 and updating that package the problem was fixed. Let me know if this help you.

Using autoprefixer in grunt for the first time

I have the current version of npm installed and things seem to be OK:
The autoprefixer loads up just fine :
I created a file 'Grunfile.js'in the local project folder:
I am running this on windows 8.1
Where to from here? How do I tell grunt to check the file? How do I call the function from the command line ? Or do I call the function from the command line?
Within your directory you'll need to have 2 files, the package.json and the Gruntfile.js. To create a package.json file run the command npm init.
Next, you need to add the grunt-autoprefixer task to your package.json file which you can do by running npm install grunt-autoprefixer --save-dev.
Then, within the Gruntfile.js it should look something like this:
module.exports = function(grunt) {
grunt.initConfig({
autoprefixer: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('default', [
'autoprefixer'
]);
};
For more details on editing the settings on autoprefixer check out the documentation: https://github.com/nDmitry/grunt-autoprefixer
To learn more about Grunt check out https://learngrunt.com

Using Grunt grunt-contrib-less) for compiling Bootstrap 3.1 LESS in Visual Studio 2013

I used the following as pre-build event in Visual Studio 2013 to compile Bootstrap 3.0 with recess according to this answer and it worked
recess "$(ProjectDir)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css"
Now this doesn't work for Bootstrap 3.1.1 and they say Grunt will do it. I've tried:
grunt-contrib-less "$(ProjectDir)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css"
But can't get it to work. Any ideas how to get Grunt to work with VS 2013.
Note: I've Installed Node.js and recess earlier, then > npm install grunt-contrib-less then to be sure >npm update grunt-contrib-less.
I've got this working in a slightly different way:
Ensure you've got grunt-cli installed globally (npm install -g grunt-cli)
Create a Gruntfile.js in your project or solution, and define a target to do whatever less compiling you want (e.g. less)
Add call grunt less to your pre-build event (if you don't specify CALL, then the process doesn't return after grunt)
You can add different targets to the development and production build processes if you like. You can also set up more targets for other tasks - I have one so I can run grunt watch to automatically recompile my CSS if I edit less files.
Step-by-step guide to converting the VS2013 sample project to use less and Grunt:
Remove bootstrap and install bootstrap less:
Uninstall-Package bootstrap
Install-Package Twitter.Bootstrap.less
Open a command prompt and cd to your project directory
Ensure grunt-cli is installed globally:
npm install -g grunt-cli
Create a package.json file:
npm init
Install grunt and grunt-contrib-less locally:
npm install grunt grunt-contrib-less`
Create a file in your project called Gruntfile.js with the following contents:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
dev: {
options: {
sourceMap: true,
dumpLineNumbers: 'comments',
relativeUrls: true
},
files: {
'Content/bootstrap.debug.css': 'Content/bootstrap/bootstrap.less',
}
},
production: {
options: {
cleancss: true,
compress: true,
relativeUrls: true
},
files: {
'Content/bootstrap.css': 'Content/bootstrap/bootstrap.less',
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-less');
// Default task(s).
grunt.registerTask('default', ['less']);
grunt.registerTask('production', ['less:production']);
grunt.registerTask('dev', ['less:dev']);
};
Edit your Visual Studio pre-build event to include:
cd $(ProjectDir)
call grunt --no-color
(--no-color removes some of the control characters from the Visual Studio build output)
Build your project, then enable show all files, and incldue the two compiled css files in your project (so that web deploy picks them up).

Grunt concat failing with "Unable to find local grunt"

I have installed Grunt like so `npm install -g grunt-cli successfully.
I have also installed the grunt-contrib-concat libary succesfully like so: npm install grunt-contrib-concat --save-dev
I have created a package.json:
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-nodeunit": "~0.1.2"
}
}
and a Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/init.js', 'src/Game.js', 'ui/Ui.js', 'ui/AddBTS.js', 'ui/Toolbar.js'],
dest: 'built.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
};
Now when I run grunt concat I get the following error:
Fatal error: Unable to find local grunt.
If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:
This is my first time using Grunt and I've been trying to solve this problem for over 2 hours now. Please could someone help me and advise what I've not set up correctly.
Thanks in advance!
It's likely that Grunt is not installed locally in your project folder (which is different than grunt-cli). You have it in your package.json so try doing npm install or alternately npm install grunt.
For more information see the getting started page:
Note that installing grunt-cli does not install the grunt task runner! The job of the grunt CLI is simple: run the version of grunt which has been installed next to a Gruntfile. This allows multiple versions of grunt to be installed on the same machine simultaneously.

Resources