Grunt - Instalando

Este capítulo fornece um procedimento passo a passo de como instalar o Grunt em seu sistema.

Requisitos do sistema para Grunt

  • Operating System - Plataforma cruzada

  • Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

Instalação do Grunt

Step 1- Precisamos de NodeJs para executar o Grunt. Para baixar NodeJs, abra o linkhttps://nodejs.org/en/, você verá uma tela conforme mostrado abaixo -

Baixe a versão mais recente dos recursos do arquivo zip.

Step 2- Em seguida, execute a configuração para instalar o NodeJs em seu computador.

Step 3- Em seguida, você precisa definir as variáveis ​​de ambiente .

Path User Variable

  • Clique com o botão direito em My Computer.
  • Selecione Properties.
  • Em seguida, selecione Advanced guia e clique em Environment Variables.
  • Na janela Variáveis ​​de ambiente , clique duas vezes no PATH como mostrado na tela.

  • Você obterá uma janela Editar variável do usuário , conforme mostrado. Adicione o caminho da pasta NodeJs no campo Valor da variável como C: \ Arquivos de programas \ nodejs \ node_modules \ npm . Se o caminho já estiver definido para outros arquivos, você precisa colocar um ponto e vírgula (;) depois disso e adicionar o caminho NodeJs conforme mostrado abaixo -

Ao final, clique no botão OK .

System Variable

  • Em Variáveis ​​do sistema , clique duas vezes em Caminho, conforme mostrado na tela a seguir.

  • Você obterá uma janela Editar Variável do Sistema , conforme mostrado. Adicione o caminho da pasta NodeJs no campo Variable Value como C: \ Program Files \ nodejs \ e clique em OK como mostrado abaixo -

Step 4 - Para instalar o Grunt em seu sistema, você precisa instalar a interface de linha de comando (CLI) do Grunt globalmente, conforme mostrado abaixo -

npm install -g grunt-cli

A execução do comando acima colocará o comando grunt no caminho do sistema, o que o tornará executado a partir de qualquer diretório.

Instalar o grunt-cli não instala o executor de tarefas Grunt. A função do grunt-cli é executar a versão do Grunt que foi instalada ao lado de um Gruntfile . Ele permite que uma máquina instale várias versões do Grunt simultaneamente.

Step 5 - Agora, vamos criar configuration files a fim de executar o Grunt.

package.json

O arquivo package.json é colocado no diretório raiz do projeto, ao lado do Gruntfile . O package.json é usado para executar corretamente cada dependência listada sempre que você executa o comandonpm install na mesma pasta que package.json.

O package.json básico pode ser criado digitando o seguinte comando no prompt de comando -

npm init

O arquivo package.json básico será como mostrado abaixo -

{
   "name": "tutorialspoint",
   "version": "0.1.0",
   "devDependencies": {
      "grunt-contrib-jshint": "~0.10.0",
      "grunt-contrib-nodeunit": "~0.4.1",
      "grunt-contrib-uglify": "~0.5.0"
   }
}

Você pode adicionar Grunt e gruntplugins em um arquivo pacakge.json existente por meio do seguinte comando -

npm install <module> --save-dev

No comando acima, <module> representa o módulo a ser instalado localmente. O comando acima também adicionará o <module> a devDependencies automaticamente.

Por exemplo, o comando a seguir instalará a versão mais recente do Grunt e a adicionará às suas devDependencies -

npm install grunt --save-dev

Gruntfile.js

O arquivo Gruntfile.js é usado para definir nossa configuração para o Grunt. É o lugar onde nossas configurações serão gravadas. O arquivo Gruntfile.js básico é mostrado abaixo -

// our wrapper function (required by grunt and its plugins)
// 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
      uglify: {
         // uglify task configuration
         options: {},
         build: {}
      }
   });

   // log something
   grunt.log.write('Hello world! Welcome to Tutorialspoint!!\n');

   // Load the plugin that provides the "uglify" task.
   grunt.loadNpmTasks('grunt-contrib-uglify');

   // Default task(s).
   grunt.registerTask('default', ['uglify']);
};