Getting started with Grunt Js

Getting started with Grunt Js   in   Visual   Studio

  Grunt     is the JavaScript task runner that runs on   Node.js               this   post   is  for   windows   user   only; to get started you  need the follow:

  1. Laptop/pc
  2. running on windows 10 preferably
  3. CMD Command Prompt
  4. Visual Studio 2017 or Visual Studio Code
  5. have node.js installed

Why should I use a Task   Runner?

Task Runner is a tool that is useful to concatenate several JavaScript and CSS files together, minify JavaScript or CSS files and run a local server to make web development easy. It allows you to look for possible errors and run unit tests of JavaScript. You can run compilation tools for Sass, Less and CoffeeScript.

For best speed and configuration, you can choose Gulp. Grunt is famous for the best plugins and community. Several developers consider Grunt as a go-to task runner of JavaScript. Gulp.js can be a good alternative because of its plugins... read more here.

Installation :

  1. go to your Project/folder where you want to install Grunt. Example(C:\Projects\Website-2019\Umbraco.Web)
  2. create a Javascript file called Grunt.js and add the below code.
  3.  open CMD as an administrator or git BUSH
  4.  Type: npm install -g grunt -cli
  5.  npm init
  6.  Press enter, give a name, description and press enter
  7.  Type: yes
  8.  npm install grunt --save -dev
  9.  you now have the node_modules folder, in (C:\Projects\Website-2019\Umbraco.Web)
  10.  Rebuild Visual Studio, close and re-open the solution
  11.  Right click on Grunt.js, select Task Runner Explorer.

now   when it says   "waiting  ..."    that 's   fine   it   just  waiting  for you to make  a change in any  of  your LESS  or  SASS  file 

when   you   make a change it will look like the below

 

 

         

module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
production: {
options: {
paths: ['css/less'],
cleancss: false,
sourceMap: true,
sourceMapFilename: 'Css/main.css.map',
sourceMapURL: 'Css/main.css.map'
},
files: {
'Css/main.css': 'Css/less/main.less'
}
}
},

postcss: { // Begin Post CSS Plugin
options: {
map: false,
processors: [
require('autoprefixer')({
browsers: ['last 2 versions']
})
]
},
dist: {
src: 'Css/main.css'
}
},
cssmin: { // Begin CSS Minify Plugin
target: {
files: [{
expand: true,
cwd: 'css',
src: ['*.css', '!*.min.css'],
dest: 'css',
ext: '.min.css'
}]
}
},
uglify: { // Begin JS Uglify Plugin
build: {
src: ['js/main.js'

],
dest: 'js/main.min.js'
}
},
watch: { // Compile everything into one task with Watch Plugin
css: {
files: ['css/**/*.less'],
tasks: ['less', 'postcss', 'cssmin']
},
js: {
files: ['js/main.js'],
tasks: ['uglify']
}
}
});
// Load Grunt plugins
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Register Grunt tasks
grunt.registerTask('default', ['watch']);
};