Pré-requisitos: Você precisa ter instalado
-> NodeJS
*Caso você não tenha ainda pode instalar!
-
É muito fácil, se você já tinha o Grunt instalado, desinstale pelo Terminal:
npm uninstall -g grunt
-
Se você não tiver permissão para desinstalar, provavelmente vai precisar usar o sudo:
sudo npm uninstall -g grunt
-
Pronto, agora é só instalar o Grunt:
npm install -g grunt-cli
- Agora você já tem o grunt instalado \o/
Para o Grunt funcionar, você precisa criar dois arquivos na raiz do seu projeto: package.json e Gruntfile.js.
O package.json é um arquivo do Node.JS. Nele ficam as informações sobre o projeto e plugins que o Grunt vai usar.
Seu package.json precisa ter essa estrutura:
{
"name": "nome_do_projeto",
"version": "1.0.0",
"title": "Título do Projeto",
"homepage": "http://www.seuSite.com.br"
}
O Gruntfile.js é o arquivo de configuração do Grunt. Nele você diz tudo o que o Grunt deve fazer.
O seu Gruntfile.js precisa ter essa estrutura:
module.exports = function(grunt){
grunt.initConfig({
// Tarefas que o Grunt vai rodar\
});
};
Na raiz do projeto , crie os arquivos package.json e Gruntfile.js.
Dentro da pasta visao/defaut , crie um diretório assets (onde ficarão nossos arquivos HTML, CSS e JS). Dentro de assets crie 3 diretórios: _html, _css e _js. Nesses diretórios ficarão os nossos arquivos fonte, que irão gerar os minificados.
A estrutura básica do projeto se dá na seguinte forma:
. |-- visao/ | |-- defaut | | |-- assets | | | |-- _html | | | |-- _css | | | |-- _js | |-- css | |-- fonts | |-- img | |-- js |-- package.json |-- Gruntfile.js
- A partir de agora, digite todos os comandos dento da pasta do seu projeto.
Vamos configurar o Grunt pra ele minificar nossos arquivos JS e gerar um novo arquivo chamado main.js em visao/defaut/js.
Primeiro vamos instalar o plugin que faz a minificação, que chama-se grunt-contrib-uglify.
Pra instalar o uglify, use a mesma magia que usou pra instalar o grunt:
npm install grunt-contrib-uglify --save-dev
- Na menida em que você vai instalando os plug-ins ao Grunt eles vão sendo adicionados ao seu arquivo package.json.
Depois de instalar o Uglify vá no seu arquivo Gruntfile.js e o deixe da seguinte maneira:
module.exports = function( grunt ) {
grunt.initConfig({
uglify : {
options : {
mangle : false
},
my_target : {
files : {
'visao/default/js/main.js':[
'visao/default/assets/_js/jquery_1_9_1.js',
'visao/default/assets/_js/functions.js',
'visao/default/assets/_js/gallery.js'
]
}
}
} // uglify
});
// Plugins do Grunt
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
// Tarefas que serão executadas
grunt.registerTask( 'default', [ 'uglify' ] );
};
Depois de configurado o uglify não tem segredo, é só fazer o mesmo procedimento com o configurar o grunt-contrib-cssmin.
Rodamos o comando:
npm install grunt-contrib-cssmin --save-dev
Depois de instalar o CssMin vá no seu arquivo Gruntfile.js e o deixe da seguinte maneira:
module.exports = function( grunt ) {
grunt.initConfig({
uglify : {
options : {
mangle : false
},
my_target : {
files : {
'visao/default/js/main.js':[
'visao/default/assets/_js/jquery_1_9_1.js',
'visao/default/assets/_js/functions.js',
'visao/default/assets/_js/gallery.js'
]
}
}
}, // uglify
cssmin: {
combine: {
files: {
'visao/default/css/main.css':[
'visao/default/assets/_css/pattern.css',
'visao/default/assets/_css/gallery.css'
]
}
}
} // cssmin
});
// Plugins do Grunt
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Tarefas que serão executadas
grunt.registerTask( 'default', [ 'uglify', 'cssmin' ] );
};
Agora já configuramos dois plugins do Grunt e já somos craques no assunto. Então é ir sem medo e correr pra o abraço. grunt-contrib-htmlmin.
Rodamos o comando:
npm install grunt-contrib-htmlmin --save-dev
Depois de instalar o Htmlmin vá no seu arquivo Gruntfile.js e o deixe da seguinte maneira:
module.exports = function( grunt ) {
grunt.initConfig({
uglify : {
options : {
mangle : false
},
my_target : {
files : {
'visao/default/js/main.js':[
'visao/default/assets/_js/jquery_1_9_1.js',
'visao/default/assets/_js/functions.js',
'visao/default/assets/_js/gallery.js'
]
}
}
}, // uglify
cssmin: {
combine: {
files: {
'visao/default/css/main.css':[
'visao/default/assets/_css/pattern.css',
'visao/default/assets/_css/gallery.css'
]
}
}
}, // cssmin
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: {
'visao/default/index.html': 'visao/default/assets/_html/index.html',
'visao/default/controle.html': 'visao/default/assets/_html/controle.html'
}
}
} // htmlmin
});
// Plugins do Grunt
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
// Tarefas que serão executadas
grunt.registerTask( 'default', [ 'uglify', 'cssmin', 'htmlmin' ] );
};
Iria ser muito chato toda vez que precisar rodar uma nova versão do projeto ter que digitar: grunt
Então tem esse outro plugin que monitora suas atividades em pastas que você determina e quando você salva o arquivo que está trabalhando ele cria um novo build do projeto!
O nome dessa mão na roda é grunt-contrib-watch.
Rodamos o comando:
npm install grunt-contrib-watch --save-dev
Já instalou o Watch? Vá no seu arquivo Gruntfile.js e o deixe da seguinte maneira:
module.exports = function( grunt ) {
grunt.initConfig({
uglify : {
options : {
mangle : false
},
my_target : {
files : {
'visao/default/js/main.js':[
'visao/default/assets/_js/jquery_1_9_1.js',
'visao/default/assets/_js/functions.js',
'visao/default/assets/_js/gallery.js'
]
}
}
}, // uglify
cssmin: {
combine: {
files: {
'visao/default/css/main.css':[
'visao/default/assets/_css/pattern.css',
'visao/default/assets/_css/gallery.css'
]
}
}
}, // cssmin
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: {
'visao/default/index.html': 'visao/default/assets/_html/index.html',
'visao/default/controle.html': 'visao/default/assets/_html/controle.html'
}
}
}, // htmlmin
watch : {
dist : {
files : [
'visao/default/assets/_js/**/*',
'visao/default/assets/_css/**/*',
'visao/default/assets/_html/**/*'
],
tasks : [ 'uglify', 'htmlmin', 'cssmin']
}
}// watch
});
// Plugins do Grunt
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-watch');
// Tarefas que serão executadas
grunt.registerTask( 'default', [ 'uglify', 'cssmin', 'htmlmin' ] );
// Tarefa para Watch
grunt.registerTask( 'w', [ 'watch' ] );
};
Certo, mas eu instalei o watch estou salvando e nada acontece.
Calma, vamos rodar essa linha de comando pra ativar o monitoramento de atividades:
grunt w
- Pra parar o monitoramento é só digitar: Ctrl + C.
#Agora preciso de feedbacks :D
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent