task runner Archives - Taswar Bhatti

In this post I will go through using grunt for our css minification task and also showcase another preprocessor for css called less.

First off lets start with a express 4 application, we will create it with Visual Studio NTVS, the latest RC contains a template for express 4.

We can install grunt by command prompt npm install

npm install grunt --save-dev

1	npm install grunt --save-dev

or by using the npm installer in Visual Studio, remember to choose the development dependency type

We should now see grunt in our dev when we expand the npm icon in Visual Studio

In our express 4 application we will now add a mystyle.css file to public/stylesheets folder like below.

The css contains just 3 styles

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style:

… Read the rest

In this post I will cover some area of grunt more of a grunt basic tutorial, things you can do with grunt, in previous post we saw how we use grunt with Visual Studio 2012 and 2013 and our simple hello world task.

Let’s start with some more basic things e.g writing a simple function task that takes a parameter.
For example below we have a hello task that takes a parameter of name.

grunt.registerTask('hello', function(name) {
  grunt.log.writeln('Hello ' + name);
});

//run the task by 
$grunt hello:Taswar

//output
Running "hello" task
Hello Taswar
Done, without errors.

grunt.registerTask('hello', function(name) {

grunt.log.writeln('Hello ' + name);

});

//run the task

… Read the rest

Grunt: using less and css minification

Using Grunt Basic Tutorial

Opinions are my own and not the views of my employer

My Book

LinkedIn

Archives