Gulp é uma ferramenta Javascript para automatizar tarefas como minificar arquivos, compilar CSS/LESS, comprimir imagens e enviar arquivos. Ele é mais rápido que Grunt por usar streams do Node.js. Gulp possui código mais limpo e uma curva de aprendizado mais suave que Grunt.

1. Matheus Thomaz

2. O que é?
● Ferramenta de build
● Javascript task-runner
● Automatizador de tarefas

3. Porque usar um automatizador de
tarefas
● Minificar imagens
● preprocessar CSS
● Enviar arquivos para FTP
● Comprimir javascript
● Criar sprites
● Etc...

5. Porque usar gulp?

6. Grunt Gulp
Um plugin pode ter mais de uma
tarefa
Cada plugin tem apenas uma tarefa
Javascript Objects Node-like
Plugins para funções básicas Funções básicas integradas

7. Porque usar gulp?
● O Gulp é muito mais rápido que o Grunt por utilizar as
streams do nodejs para escrever arquivos diretamente
no disco.
● Código mais claro e limpo
● Menor curva de apredizado

8. Grunt
module.exports = function(grunt) {
grunt.initConfig({
concat: {
'dist/all.js': ['src/*.js']
},
uglify: {
'dist/all.min.js': ['dist/all.js']
},
jshint: {
files: ['gruntfile.js', 'src/*.js']
},
watch: {
files: ['gruntfile.js', 'src/*.js'],
tasks: ['jshint', 'concat', 'uglify']
}
});
// Load Our Plugins grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Register Default Task grunt.registerTask('default', ['jshint',
'concat', 'uglify']);
};
Gulp
var gulp = require('gulp'), jshint = require('gulp-jshint'),
concat = require('gulp-concat'), rename = require('gulp-rename'),
uglify = require('gulp-uglify');
// Lint JSgulp.task('lint', function() {
return gulp.src('src/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Concat & Minify JSgulp.task('minify', function(){
return gulp.src('src/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
// Watch Our Filesgulp.task('watch', function() {
gulp.watch('src/*.js', ['lint', 'minify']);
});
// Defaultgulp.task('default', ['lint', 'minify', 'watch']);

9. Grunt
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
cssmin: {
combine: {
files:
{
'style.min.css': ['style.css']
}
}
}
});
// Load the plugin that provides the "uglify"
task.
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Default task(s).
grunt.registerTask('default', ['cssmin']);
};
Gulp
var gulp = require('gulp'),
minify = require('gulp-minify-css');
gulp.task('styles', function() { return
gulp.src('./style.css')
.pipe(minify())
.pipe(gulp.dest('./dist/'));
});
gulp.task('default', function() {
gulp.run('styles');
});

10. Funções Básicas

11. Funções Básicas
gulp.task(name, fn)
Registra uma função pelo seu nome.

12. Funções Básicas
gulp.task(name, fn)
gulp.task('less', function () {
gulp.src(path.less)
.pipe(less())
.pipe(gulp.dest('contents/assets/css'));
});

13. Funções Básicas
gulp.run(task, task, ...)
DEPRECATED

14. Funções Básicas
gulp.watch(glob, fn)
gulp.task('watch', function ( ) {
gulp.watch('assets/less/*.less', ['less']);
});

15. Funções Básicas
gulp.watch(glob, fn)
Executa uma função quando um arquivo alterado bate com o glob.

16. Funções Básicas
gulp.src(glob)
Retorna um caminho para acessar arquivos

17. Funções Básicas
gulp.src(glob)
gulp.task('less', function () {
gulp.src('assets/less/*.less')
.pipe(less())
.pipe(gulp.dest('contents/assets/css'));
});

18. Funções Básicas
gulp.dest(glob)
Retorna um caminho para gravar arquivos

19. Funções Básicas
gulp.dest(glob)
gulp.task('less', function () {
gulp.src('assets/less/*.less')
.pipe(less())
.pipe(gulp.dest('contents/assets/css'));
});

20. Instalação

21. Dependências
Node
Node Package Manager

22. Instalação
npm init
npm install gulp --save-dev

23. Iniciando um projeto

24. Projeto
var gulp = require('gulp'),
less = require('gulp-less'),
imagemin = require('gulp-imagemin'),
uglify = require('gulp-uglify');

25. Projeto
gulp.task('less', function () {
gulp.src(path.less)
.pipe(less())
.pipe(gulp.dest('assets/css'));
});

26. Projeto
gulp.task('images', function () {
gulp.src(path.img)
.pipe(imagemin())
.pipe(gulp.dest('build/assets/img'));
});

27. Projeto
gulp.task('js', function () {
gulp.src(path.js)
.pipe(uglify({outSourceMap: true}))
.pipe(gulp.dest('assets/js/min'));
});

28. Projeto
gulp.task('watch', function () {
gulp.watch(path.less, ['less']);
});

29. Projeto
gulp.task('default', ['watch']);
gulp.task('build', ['images', 'js', 'less']);

30. Projeto - executando
$ gulp
// Executa a task ‘default’
$ gulp nomeTask
// Executa a task chamada

31. Obrigado