Automatizando tarefas com grunt - O que era chato não é mais

•Transferir como PPT, PDF•

9 gostaram•25,448 visualizações

This document discusses how to automate tasks using Grunt. It introduces Grunt as a tool to automate tasks and make machines work for you to save time. It provides instructions on installing Node.js, NPM and Grunt, and creating a Gruntfile.js configuration file. It also discusses various Grunt plugins that can be used for tasks like preprocessing CSS/JavaScript, linting, watching files and more.

Tecnologia

Automatizando
tarefas com Grunt
O que era chato, não é mais :)

Fazer a máquina
trabalhar para você
Ter mais tempo para
fazer coisas legais

Instalaç ão
(NodeJS + NPM) + Grunt(NodeJS + NPM) + Grunt

npm install –g grunt-clinpm install –g grunt-cli
Grunt Cli
Disponibilizar o grunt globalmente

package.jsonpackage.json
Gruntfile.jsGruntfile.js
Configuracão

package.json
Meta informaç ões e dependências
npm initnpm init

npm install grunt --save-npm install grunt --save-
devdev

Gruntfile.js
Todas os registros de tarefas serão colocados aqui

npm install grunt-contrib-compass --save-npm install grunt-contrib-compass --save-
devdev
grunt-contrib-
compass
Compilar o SASS + Compass

grunt = iráexecutar a task default
grunt compass:dev = iráexecutar a task dev do compass
grunt compass:dist = iráexecutar a task dist do compass
No terminal

pré -processadores
grunt-contrib-sass
grunt-contrib-less
grunt-contrib-stylus
grunt-contrib-coffee

npm install grunt-contrib-watch --save-devnpm install grunt-contrib-watch --save-dev
grunt-contrib-
watch
O cara que OBSERVA tudo

npm install grunt-contrib-jshint --save-devnpm install grunt-contrib-jshint --save-dev
grunt-contrib-jshint
Verifica erros no JavaScript

npm install grunt-contrib-csslint --save-devnpm install grunt-contrib-csslint --save-dev
grunt-contrib-csslint
Verifica erros no CSS

https://github.com/andersonaguiar/TDC2014-Grunt

grunt-banner
grunt-browser-sync
grunt-autoshot
grunt-ftp-deploy
grunt-uncss
grunt-contrib-clean
grunt-contrib-copy
grunt-contrib-imagemin
grunt-autoprefixer
grunt-contrib-compress
grunt-contrib-jasmine

https://www.facebook.com/groups/gruntbrasil

Disponível em:
http://www.slideshare.net/andersonagr
Contato:
@andersonaguiar
andersonaguiar.web@gmail.com
Obrigado!

Mais conteúdo relacionado

Mais procurados

Grunt to automate JS buildTejaswita Takawale

Modernizing Your WordPress Workflow with Grunt & BowerAlan Crissey

GDG Kraków - Intro to front-end automation using bower.js & grunt.jsDominik Prokop

Introduction to Express and GruntPeter deHaan

EuroPython 2014 - How we switched our 800+ projects from Apache to uWSGIMax Tepkeev

Ac cuda c_1Josh Wyatt

Production Ready Javascript With GruntXB Software, Ltd.

[Js hcm] Deploying node.js with Forever.js and nginxNicolas Embleton

Node.js x Azure, cli usage, website deploymentCaesar Chi

Web development-workflowQiu Juntao

JSLab. Грибанов Александр. "Yeoman - избавляемся от рутинных задач"GeeksLab Odessa

Simple Tips and Tricks with AnsibleKeith Resar

Linux Server StartGavin Quan

Creating a drupal 8 theme with node.js, libsass, gulp & browsersyncAndrei Zvonkov

Herramientas frontborya09

Владимир Мигуро "Дао Node.js"EPAM Systems

Dev ops on startup environmentEvaldo Felipe

1st Chinaonrails Open Course 高级战略Jesse Cai

How to Contribute to GStreamerSamsung Open Source Group

170112robo_lab

Mais procurados (20)

Grunt to automate JS build

Modernizing Your WordPress Workflow with Grunt & Bower

GDG Kraków - Intro to front-end automation using bower.js & grunt.js

Introduction to Express and Grunt

EuroPython 2014 - How we switched our 800+ projects from Apache to uWSGI

Ac cuda c_1

Production Ready Javascript With Grunt

[Js hcm] Deploying node.js with Forever.js and nginx

Node.js x Azure, cli usage, website deployment

Web development-workflow

JSLab. Грибанов Александр. "Yeoman - избавляемся от рутинных задач"

Simple Tips and Tricks with Ansible

Linux Server Start

Creating a drupal 8 theme with node.js, libsass, gulp & browsersync

Herramientas front

Владимир Мигуро "Дао Node.js"

Dev ops on startup environment

1st Chinaonrails Open Course 高级战略

How to Contribute to GStreamer

170112

Semelhante a Automatizando tarefas com grunt - O que era chato não é mais

GruntJSPredhin Sapru

Building your own personal minion with grunt.jsBrent Swisher

JLPDevs - Optimization Tooling for Modern Web App DevelopmentJLP Community

Modern Development ToolsYe Maw

Install Nagios Core On CentOS 7sharad chhetri

GruntAndrii Siusko

Grunt & Front-end WorkflowPagepro

PythonHungTrinh69

Grunt training deckJames Ford

Get Grulping with JavaScript Task Runners (Matt Gifford)Future Insights

Cara instalعبد المنان الشافعي

Using GruntJSEgor Miasnikov

Speed up your development environment PHP + Nginx + Fedora + PGMarcus Sá

Grunt: the wild boar dev's best friend - WordCamp London 2018Marco Chiesi

Modern Web Application Development Workflow - EclipseCon France 2014Stéphane Bégaudeau

Time's Important - Let Task Management Save YoursJames Bundey

Modern Web Application Development Workflow - EclipseCon Europe 2014Stéphane Bégaudeau

Deploying Foreman in Enterprise Environmentsinovex GmbH

Grunt js and WordPressWP Australia

Docker to the Rescue of an Ops TeamDocker, Inc.

Semelhante a Automatizando tarefas com grunt - O que era chato não é mais (20)

GruntJS

Building your own personal minion with grunt.js

JLPDevs - Optimization Tooling for Modern Web App Development

Modern Development Tools

Install Nagios Core On CentOS 7

Grunt

Grunt & Front-end Workflow

Python

Grunt training deck

Get Grulping with JavaScript Task Runners (Matt Gifford)

Cara instal

Using GruntJS

Speed up your development environment PHP + Nginx + Fedora + PG

Grunt: the wild boar dev's best friend - WordCamp London 2018

Modern Web Application Development Workflow - EclipseCon France 2014

Time's Important - Let Task Management Save Yours

Modern Web Application Development Workflow - EclipseCon Europe 2014

Deploying Foreman in Enterprise Environments

Grunt js and WordPress

Docker to the Rescue of an Ops Team

Último

Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2

CNv6 Instructor Chapter 6 Quality of Servicegiselly40

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge

Salesforce Community Group Quito, Salesforce 101Paola De la Torre

Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik

The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad

Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer

IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge

Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC

Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun

Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer

GenCyber Cyber Security Day PresentationMichael W. Hawkins

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia

Histor y of HAM Radio presentation slidevu2urc

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal

Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700

08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls

04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG

Automatizando tarefas com grunt - O que era chato não é mais

1. Automatizando tarefas com Grunt O que era chato, não é mais :)

2. @andersonaguiar

3. www.div64.com

10.

11.

12.

13.

14.

15. QUE TAL AUTOMATIZAR?

16.

17. Fazer a máquina trabalhar para você Ter mais tempo para fazer coisas legais

18.

19. O que é o Grunt?

20.

21. http://gruntjs.com/

22. https://github.com/gruntjs/grunt

23. Instalaç ão (NodeJS + NPM) + Grunt(NodeJS + NPM) + Grunt

24. http://nodejs.org

25. npm install –g grunt-clinpm install –g grunt-cli Grunt Cli Disponibilizar o grunt globalmente

26.

27.

28. package.jsonpackage.json Gruntfile.jsGruntfile.js Configuracão

29. package.json Meta informaç ões e dependências npm initnpm init

30. npm install grunt --save-npm install grunt --save- devdev

31.

32. npm installnpm install

33. Gruntfile.js Todas os registros de tarefas serão colocados aqui

34. Plugins e Utilizaç ão

35. npm install grunt-contrib-compass --save-npm install grunt-contrib-compass --save- devdev grunt-contrib- compass Compilar o SASS + Compass

36.

37.

38.

39.

40. grunt = iráexecutar a task default grunt compass:dev = iráexecutar a task dev do compass grunt compass:dist = iráexecutar a task dist do compass No terminal

41. pré -processadores grunt-contrib-sass grunt-contrib-less grunt-contrib-stylus grunt-contrib-coffee

42. DEMO

43. npm install grunt-contrib-watch --save-devnpm install grunt-contrib-watch --save-dev grunt-contrib- watch O cara que OBSERVA tudo

44.

45. npm install grunt-contrib-jshint --save-devnpm install grunt-contrib-jshint --save-dev grunt-contrib-jshint Verifica erros no JavaScript

46.

47. npm install grunt-contrib-csslint --save-devnpm install grunt-contrib-csslint --save-dev grunt-contrib-csslint Verifica erros no CSS

48.

49. DEMO

50.

51. https://github.com/andersonaguiar/TDC2014-Grunt

52. OUTROS PLUGINS > 2.830

53. http://gruntjs.com/plugins

54. grunt-banner grunt-browser-sync grunt-autoshot grunt-ftp-deploy grunt-uncss grunt-contrib-clean grunt-contrib-copy grunt-contrib-imagemin grunt-autoprefixer grunt-contrib-compress grunt-contrib-jasmine

55. https://www.facebook.com/groups/gruntbrasil

56. http://gruntjs.com/who-uses-grunt

57. Perguntas ?

58. Disponível em: http://www.slideshare.net/andersonagr Contato: @andersonaguiar andersonaguiar.web@gmail.com Obrigado!

Notas do Editor

Projeto maduro.
Projeto maduro.
Projeto maduro.
Projeto maduro.
Projeto maduro.
Projeto maduro.
Projeto maduro.
Projeto maduro.
Projeto maduro.
Projeto maduro.
Projeto maduro.
Mostrar sites das ferramentas comuns
Mostrar sites das ferramentas comuns
Projeto maduro.
Projeto maduro.
Windows, mac, linux. Node já vem com o NPM nas versões a partir de 0.6.x
Fazendo isso o comando Grunt estará disponível para você no terminal de forma global
Instalando o grunt no projeto
Instalando o grunt no projeto
Instalando o grunt no projeto
Instalando o grunt no projeto
Esse comando irá baixar todas as dependências necessárias para o projeto de acordo com o package.json
Instalando o grunt no projeto
Esse comando irá baixar todas as dependências necessárias para o projeto de acordo com o package.json
Fazendo isso o comando Grunt estará disponível para você no terminal de forma global
Fazendo isso o comando Grunt estará disponível para você no terminal de forma global
Fazendo isso o comando Grunt estará disponível para você no terminal de forma global
Fazendo isso o comando Grunt estará disponível para você no terminal de forma global
Fazendo isso o comando Grunt estará disponível para você no terminal de forma global
Tarefas comuns: compilar pré-processador, lint, sprite, live reload, concatenação...
Tarefas comuns: compilar pré-processador, lint, sprite, live reload, concatenação...
Tarefas comuns: compilar pré-processador, lint, sprite, live reload, concatenação...
Esse comando irá baixar todas as dependências necessárias para o projeto de acordo com o package.json
Tarefas comuns: compilar pré-processador, lint, sprite, live reload, concatenação...

Automatizando tarefas com grunt - O que era chato não é mais

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Automatizando tarefas com grunt - O que era chato não é mais

Semelhante a Automatizando tarefas com grunt - O que era chato não é mais (20)

Último

Último (20)

Automatizando tarefas com grunt - O que era chato não é mais

Notas do Editor