Skip to content
+91-7795206615
|
info@habilelabs.io

  • Home
  • About
  • Services
    • Custom Application Development
    • UI/UX Designing
    • Web Application Development
    • Offshore Product Services
    • Technical Outsourcing
    • ERP Services
  • Company
    • Careers
    • Case Studies
  • Specialization
    • Frontend Frameworks
      • Angular
      • ReactJS
      • VueJS
      • HTML / CSS
      • Javascript /Jquery
      • Bootstrap
      • Material design
    • Backend Frameworks
      • NodeJS
      • Meteor
      • GraphQL
      • Loopback
      • Salesforce
      • Spring Boot
      • Odoo
      • Laravel
    • Database / ORM
      • MySQL
      • PostgreSQL
      • Oracle
      • MongoDB
      • Google Firebase
      • Mongoose
      • Sequelize
      • Hibernate / JPA
    • Languages
      • Java Script
      • Dot Net
      • Java
      • Python
      • C / C++
      • PHP
      • AI / ML
      • Type Script
    • Mobile Frameworks
      • Ionic
      • Native Script
      • Native Android App
      • Native iOS App
      • Google Flutter
      • React Native
  • Blog
  • Hire Us

How to Minify Project using Grunt in AngularJS

Categories

  • Angular
  • Business Strategies
  • Cloud Services
  • CRM
  • Design Pattern
  • E-commerce
  • ERP Applications
  • Javascript
  • Meteor
  • Mobile development
  • Mongo DB
  • Node JS
  • Odoo
  • Our Partners
  • PHP
  • React
  • SAAS
  • Salesforce
  • SAP
  • Selenium
  • Tech stack Migration
  • Testing
  • UI-UX Design
  • Uncategorized
  • VAPT
  • Visualforce
  • Web Development
  • Web Security

Categories

  • Angular
  • Business Strategies
  • Cloud Services
  • CRM
  • Design Pattern
  • E-commerce
  • ERP Applications
  • Javascript
  • Meteor
  • Mobile development
  • Mongo DB
  • Node JS
  • Odoo
  • Our Partners
  • PHP
  • React
  • SAAS
  • Salesforce
  • SAP
  • Selenium
  • Tech stack Migration
  • Testing
  • UI-UX Design
  • Uncategorized
  • VAPT
  • Visualforce
  • Web Development
  • Web Security

This is very important for a website to respond quickly and effectively. For this, we make websites in different technologies but what stops us from making it fast and good at the response is its third party tools, libraries, JavaScript and other tools that are heavy enough to load fast.

In AngularJS technology we make the whole website or any product totally on the code that is smart enough to respond in quick time but still there are some of the components that lag behind the loading time of its libraries and dependencies.

There is one tool that makes it easy for you to manage all your files in a best-optimized way and that is known as GRUNT.

Grunt serve

[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”justified” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

A brief introduction of GRUNT is that it is a JavaScript task runner which is mainly used for JavaScript objects as a command line tool. It is a task runner that is written on top of Node.JS.

[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”justified” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Why is GRUNT AngularJS useful?

1. Grunt can easily perform the repetitive tasks that are needed in a project. For example compilation, minifying files, doing unit testing and much more.
2. It has built in tasks that actually extend the functionality of the plugins and the scripts that we use.
3. It can automate things with very fewer efforts to make.

How can Grunt be Used?

There is a way to use GRUNT in your project and that is by installing Grunt’s command line interface (CLI) globally. The command to install GRUNT CLI is –

npm install -g grunt-cli

This will simply put the grunt command in the system path, which makes it run from any directory.

There are two project files that are essential to run the project-

1. package.json
2. Gruntfile.js

Package.json :

It is placed in the root directory of the project and is used to run the listed dependencies whenever the command npm install is run in the same folder.
Package.json file will look something like this –
{
“name”: “habilelabs”,
“version”: “0.1.1”,
“Dependencies”: {
“grunt-ng-annotate”: “~0.10.0”,
“grunt-jscs”: “~1.8.0”,
“grunt-newer”: “~1.1.0”
}
}

Gruntfile.js :

It is the default place from where all the configuration settings will go for grunt.
The basic structure of this file looks like this –
// all configuration goes inside this function
module.exports = function(grunt) {

// CONFIGURE GRUNT
grunt.initConfig({
// get the configuration info from package.json file
// this way we can use things like name and version (pkg.name)
pkg: grunt.file.readJSON(‘package.json’),

// all of our configuration goes here

});

// Load the plugin that provides the “uglify” task

If you have any query in Grunt AngularJS topic then ask in comment box. We are best Web Development company and provides Support and services.

Hope you enjoy the post, so don’t forget to share with friends.

Grunt serve

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

Posted byaishwaryaAugust 2, 2016November 4, 2019Posted inAngularTags: Grunt AngularJS, How to make a minified version of AngularJS, Minify Project using Grunt

Post navigation


:

Leave a comment

Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • PyScript – Python for the Web Browser

    PyScript – Python for the Web Browser

  • Cross-Database with Association in Postgres with Sequelize

    Cross-Database with Association in Postgres with Sequelize

  • How can You Improve Your Communication Skills – Effective Tips

    How can You Improve Your Communication Skills – Effective Tips

  • 5 Reasons that Make CRM Software Beneficial for Every Business

    5 Reasons that Make CRM Software Beneficial for Every Business

  • Do Low-Code Solutions have a Future in Web Development?

    Do Low-Code Solutions have a Future in Web Development?

  • A Revenue Management Reset in Consumer Goods

    A Revenue Management Reset in Consumer Goods

Talk to our experts now

Have a project or looking for development team? Contact us.

Get a quote

About Us

Habilelabs Private Limited is the ISO 9001:2015 certified IT company, which has marked its flagship in 20+ countries with 100+ projects successfully

Company

  • About
  • Blog
  • Careers
  • Hire Us
  • Privacy Policy

Contact Us

  • +91-9828247415
  • +91-9887992695
  • info@habilelabs.io

Follow Us

Office

  • Habilelabs Private Limited
    4th Floor, I.G.M. School Campus,
    Sec-93 Agarwal Farm, Mansarovar,
    Jaipur, Rajasthan India
    Pin:302020