Como instalar o grunt e como construir um script com ele

86

Olá, estou tentando instalar o Grunt no Windows 7 de 64 bits. Eu instalei o Grunt usando comandos

 npm install -g grunt
 npm install -g grunt-cli

mas agora, se eu tentar fazer grunt init, estou me lançando um erro -

Um Gruntfile válido não foi encontrado. Consulte o guia de primeiros passos para obter mais informações sobre como configurar o grunt: http://gruntjs.com/getting-started Erro fatal: Não foi possível encontrar o Gruntfile.

Mas quando eu olho dentro da pasta grunt em meu sistema, ela Gruntfile.jsestá lá. alguém pode me guiar como instalar este grunt corretamente e como escrever um script construído usando o grunt. Eu tenho uma página HTML e um script java, se eu quiser construir um script usando o Grunt, como posso fazer isso?

Sau
fonte
1
npm install -g gruntsignifica instalar o Grunt globalmente, o que não é mais recomendado (começando com o Grunt 0.4).
Ludder

Respostas:

229

Para configurar a compilação do GruntJS, siga estas etapas:

  1. Certifique-se de ter configurado package.jsonou configurado um novo:

    npm init
    
  2. Instale o Grunt CLI como global:

    npm install -g grunt-cli
    
  3. Instale o Grunt em seu projeto local:

    npm install grunt --save-dev
    
  4. Instale qualquer Módulo Grunt que você possa precisar em seu processo de construção. Apenas por causa deste exemplo, adicionarei o módulo Concat para combinar arquivos:

    npm install grunt-contrib-concat --save-dev
    
  5. Agora você precisa configurar seu, Gruntfile.jsque descreverá seu processo de construção. Para este exemplo, apenas combino dois arquivos JS file1.jse file2.jsna jspasta e gerei app.js:

    module.exports = function(grunt) {
    
        // Project configuration.
        grunt.initConfig({
            concat: {
                "options": { "separator": ";" },
                "build": {
                    "src": ["js/file1.js", "js/file2.js"],
                    "dest": "js/app.js"
                }
            }
        });
    
        // Load required modules
        grunt.loadNpmTasks('grunt-contrib-concat');
    
        // Task definitions
        grunt.registerTask('default', ['concat']);
    };
    
  6. Agora você estará pronto para executar seu processo de compilação seguindo o comando:

    grunt
    

Espero que isso lhe dê uma idéia de como trabalhar com a construção do GruntJS.

NOTA:

Você pode usar grunt-initpara criar Gruntfile.jsse desejar a criação baseada em assistente em vez de codificação bruta para a etapa 5.

Para fazer isso, siga estas etapas:

npm install -g grunt-init
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
grunt-init gruntfile

Para usuários do Windows: Se você estiver usando cmd.exe, será necessário mudar ~/.grunt-init/gruntfilepara %USERPROFILE%\.grunt-init\. O PowerShell reconhecerá o ~corretamente.

Qorbani
fonte
é isso que estou procurando, obrigado. Além disso, é necessário que gruntfile.js seja colocado na pasta raiz do projeto (não é possível fazer com que funcione de outra forma no Windows)?
chester89
1
A etapa 5 poderia ser configurada basicamente usando grunt init:gruntfile? Eu tentei fazer isso, mas eu sempre recebo um erro: Fatal error: Unable to find Gruntfile. A criação de Gruntfile.js é sempre um processo manual? Nesse caso, vejo uma vantagem de usar Yeoman onde um Gruntfile.js é gerado automaticamente (e isso ainda se aplica a projetos que eu criaria que não são realmente webapps.
micah
@micah, você pode usar a ferramenta grunt-init para criar Gruntfile facilmente. Vou atualizar a postagem principal e adicioná-la como uma nota.
Qorbani
@qorbani Então estou confuso. Em um diretório para este projeto não grunt, já segui as etapas 1-4. Agora acabei de executar npm install -g grunt-inite ele foi instalado com sucesso. Eu segui com isso grunt init:gruntfilee ainda me dá o mesmo erro fatal. o que estou perdendo?
micah
grunt init: gruntfile não está correto. grunt-init é um ajudante diferente para scaffolding baseado em template e você precisa instalar o template gruntfile para gerar Gruntfile.js
Qorbani
8

Algum tempo, precisamos definir a variável PATH para WINDOWS

% USERPROFILE% \ AppData \ Roaming \ npm

Depois desse teste com where grunt

Nota: Não se esqueça de fechar a janela do prompt de comando e reabri-la.

Partha Sarathi Ghosh
fonte
5

Eu tive o mesmo problema, mas resolvi isso mudando meu Grunt.js para Gruntfile.js Verifique o nome do arquivo antes de digitar grunt.cmd no Windows cmd (se você estiver usando o Windows).

andromada
fonte
2

Você deve instalar o grunt-cli nas devDependencies do projeto e, em seguida, executá-lo por meio de um script em seu package.json. Desta forma, outros desenvolvedores que trabalham no projeto usarão a mesma versão do grunt e não terão que instalar globalmente como parte da configuração.

Instale o grunt-cli com em npm i -D grunt-clivez de instalá-lo globalmente com -g.

//package.json

...

"scripts": {
  "build": "grunt"
}

Em seguida, use npm run buildpara disparar grunhido.

foimattgregg
fonte