alvinashcraft
shared this story
from The Power of Personas in Real Life: What UX Teaches You.
Front end developers or UI developers often do certain kind of things like:
Changing small codes of CSS and JS and combine them for production.
compiling CSS/JS/HTML preprocessor.
Compressing images, css, js, html etc.
Switching and reloading browser for changes.
Now for compiling, minifying a preprocessor you will need some paid or free softwares like prepros, koala, codekit etc. some of them support windows or some mac.
For image compressor we have punypng or other software and for auto update we can use some editors like brackets visual studio etc.
Now there are some preprocessors or templating language or operating system that these software editors doesn’t support then what will you do. One option is google and install different softwares for that or another option is using GRUNT.
What is Grunt
Grunt is a task runner that can improve the speed of front end development. It can help to do repetitive task like minification, compilation, compression, auto reload etc.
Installation
To install grunt one need to install and npm first
Installing node and npm
download and install node.js from https://nodejs.org/en/
follow the prompts
test node by opening cmd(command prompt) and write node -v. This must give you the version of node installed.
test npm by opening cmd and type write npm -v. This must give you the version of node installed.
Installing grunt
Set up a new package.json file in your project and add value something like
or just create 1 new one by command npm init.
Install Grunt CLI(command line interface) by typing command npm install -g grunt-cli in cmd in your project.
Install Grunt in the project you are working by typing npm install grunt –save-dev
test your grunt by typing command grunt –version and you must get the version of grunt and grunt cli installed.
Important node modules or plugins and Installing them
There are two ways to install a node module.
By typing the respective command for the module or plugin.
mentioning the plugin details in package.json and running npm install command in cmd. By this way you can install multiple plugin at the same time.
There are lot of modules that are important for a front end developers i am naming some them and their installation command.
autoprefixer – it add prefixes to CSS properties (npm install grunt-autoprefixer –save-dev)
2.grunt-browser-sync – reload the browser on each saved changes in project on all browsers.
(npm install grunt-browser-sync –save-dev)
3.grunt-contrib-htmlmin – minifying html.
(npm install grunt-contrib-htmlmin –save-dev)
grunt-contrib-preprocessor – for preprocessor compilation depends on preprocessor
(npm install grunt-contrib-less –save-dev)
“grunt-contrib-uglify” – for formation of js,
(npm install grunt-contrib-uglify –save-dev)
grunt-contrib-watch – it watches the changes and runt grunt on each change
(npm install grunt-contrib-watch –save-dev)
Setting up all modules for grunt
for this you have to create a gruntfile.js like this
Different plugins we initialize in the grunt file may have different ways to initialize and may have different options.
Few things that are must in a grunt file are:
pkg : By this we tell the grunt the plugin we are using are defined in package.json file.
grunt.loadNpmTasks: This function load the tasks from specified plugin in package.json installed via npm.
grunt.registerTask: Only those task will run that are specified in that function.
Grunt has many benefits like improved efficiency, productivity, and reduction of multiple software for workflow, even some new frameworks or plugins wants javascript task runner for their installation. The problems I found with any javascript task runner is initially set up took time secondly the speed varies on different operating system i.e it is fast in mac and ubuntu while slow in windows.
At last I can say one thing grunt can’t solve all the problem but it worth to check any javascript task runner at least one.
