grunhido básico

gruntjs é um executor de tarefas JavaScript incrível que é usado para … bem, você adivinhou a execução de tarefas. Então vamos começar a trabalhar com grunhido.

<b> Primeira instalação do grunt </b>

npm install -g grunt-cli

<b> Agora vamos configurar o grunt para o seu projeto </b>

adicione o package.json e o Gruntfile.js. ao seu projeto

<b> package.json </b>

package.json é usado para listar o Grunt e os plug-ins do Grunt de que seu projeto precisa como dependências.

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.3.3",
    "grunt-contrib-uglify": "~0.4.0"
  }
}

<b> Gruntfile.js </b>

O Gruntfile é usado para configurar ou definir tarefas grunt e carregar plug-ins Grunt. Aqui está um exemplo de um aplicativo de calculadora Gruntfile:

module.exports = function (grunt) {
    grunt.initConfig({
        meta: {
            banner: '/* my minified app */'
        },
        min: {
            dist: {
                src: ['<banner>', 'calculator/*.js'],
                dest: ['calculator.min.js']
            }
        },
        watch: {
            files: ['calculator/*.js'],
            tasks: ['min']
        }
    });
    grunt.registerTask('default', [
        'min:dist'
    ]);

};

Neste Gruntfile, a tarefa min, que pode ser executada na linha de comando como grunt min, irá minificar todos os seus arquivos JavaScript na pasta / calculator para calculator.min.js.

Também registramos uma tarefa padrão do grunt, portanto, a execução do grunt executará a tarefa padrão. Poderíamos ter configurado uma tarefa dist como mostrado abaixo.

grunt.registerTask('dist', ['concat:dist', 'uglify:dist']);

Ok, então esse é um exemplo do que o grunt pode fazer por nós, muito bom … que outras tarefas podemos adicionar ao nosso Gruntfile.js.

<b> Que tal compilar seu código coffeescript em js </b>

// install the grunt plugin
npm install grunt-contrib-coffee --save-dev
// add this to your GruntFile, 
grunt.loadNpmTasks('grunt-contrib-coffee');

<b> ou compilando seu menos código em css </b>

// install the grunt plugin
npm install grunt-contrib-less --save-dev
// add this to your GruntFile, 
grunt.loadNpmTasks('grunt-contrib-less');

<b> ou otimização de exigir arquivos js </b>

// install the grunt plugin
npm install grunt-contrib-requirejs --save-dev
// add this to your GruntFile, 
grunt.loadNpmTasks('grunt-contrib-requirejs');

Sim, o grunt pode fazer todas essas coisas. Cada um desses plug-ins precisará ser configurado em seu Gruntfile por meio do método grunt.initConfig. Mais sobre como configurar plug-ins Grunt

<b> a configuração do plugin Grunt less é mostrada abaixo </b>

less: {
  development: {
    options: {
      paths: ["assets/css"]
    },
    files: {
      "path/to/result.css": "path/to/source.less"
    }
  }
}

<b> Aprenda a configurar alguns de seus plug-ins Grunt em npmjs.org </b>

plugin menos grunhido

plugin grunt do coffeescript

plugin do requirejs grunt