Ganhando tempo com Task Runners

Ganhando tempo com
Task Runners
Fabio Carvalho

Que tal
automatizar
tudo isso ?

Task Runners
Grunt, Gulp, Cake, Broccoli, ..

Concatenação e Minificação
assets/
stylesheets/
style.scss
javascripts/
libs/
jquery.js
angular.js
/vendor
jquery.swiper.js
jquery.colorbox.js
app.js
build/
style.min.css
main.min.js

Compressão de Imagens
imagemin: {
dist: {
options: {
optimizationLevel:
7,
progressive: true
},
files: [{
expand: true,
filter: 'isFile',
cwd: '<%=
dirs.images %>/',
src:
'**/*.{png,jpg,gif}',
dest: '<%=
dirs.images %>/'
}]

rsync: {
staging: {
options: {
src:
'../',
dest:
'~/PATH',
host:
'user@host.com'
}
},
production: {
options: {
src:
'../',
dest:
'~/PATH',
host:
Deploy - SSH & FTP
$ grunt ftp //
ftp
$ grunt r:prod // ssh

<body>
<h1>2º Meetup Developers & TI
GV</h1>
<h2>Seja bem-vindo!</h2>
<main>
<div class="container">
<p>Você é
foda!</p>
</div>
</main>
</body>
HTML - JADE
body
h1 2º Meetup Developers & TI GV
h2 Seja bem-vindo!
main
.container
if youAreUsingJade
p Você é
foda!
else
p Não
creio!

CSS - SASS
.card {
background-color: #EEE;
.title {
color: #999;
font-size: 18px;
font-weight: bold;
}
.description {
font-size: 14px;
}
}
.card { background-color: #EEE }
.card .title {
color: #999;
font-size: 18px;
font-weight: bold;
}
.card .description {
font-size: 14px;
}

JavaScript - CoffeeScript
outer = 1
changeNumbers = ->
inner = -1
outer = 10
inner = changeNumbers()
var changeNumbers, inner, outer;
outer = 1;
changeNumbers = function() {
var inner;
inner = -1;
return outer = 10;
};
inner = changeNumbers();

https://github.com/fccoelho7/grunt-boilerplate
Comece hoje mesmo!

Ganhando tempo com Task Runners

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (10)

Destaque

Destaque (20)

Semelhante a Ganhando tempo com Task Runners

Semelhante a Ganhando tempo com Task Runners (20)

Ganhando tempo com Task Runners

Notas do Editor