Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gulp

436 views

Published on

Apresentação de conhecimentos na AG2 Publicis Modem

Published in: Technology
  • Be the first to comment

Gulp

  1. 1. Matheus Thomaz
  2. 2. O que é? ● Ferramenta de build ● Javascript task-runner ● Automatizador de tarefas
  3. 3. Porque usar um automatizador de tarefas ● Minificar imagens ● preprocessar CSS ● Enviar arquivos para FTP ● Comprimir javascript ● Criar sprites ● Etc...
  4. 4. Porque usar gulp?
  5. 5. 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
  6. 6. 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
  7. 7. 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']);
  8. 8. 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'); });
  9. 9. Funções Básicas
  10. 10. Funções Básicas gulp.task(name, fn) Registra uma função pelo seu nome.
  11. 11. Funções Básicas gulp.task(name, fn) gulp.task('less', function () { gulp.src(path.less) .pipe(less()) .pipe(gulp.dest('contents/assets/css')); });
  12. 12. Funções Básicas gulp.run(task, task, ...) DEPRECATED
  13. 13. Funções Básicas gulp.watch(glob, fn) gulp.task('watch', function ( ) { gulp.watch('assets/less/*.less', ['less']); });
  14. 14. Funções Básicas gulp.watch(glob, fn) Executa uma função quando um arquivo alterado bate com o glob.
  15. 15. Funções Básicas gulp.src(glob) Retorna um caminho para acessar arquivos
  16. 16. Funções Básicas gulp.src(glob) gulp.task('less', function () { gulp.src('assets/less/*.less') .pipe(less()) .pipe(gulp.dest('contents/assets/css')); });
  17. 17. Funções Básicas gulp.dest(glob) Retorna um caminho para gravar arquivos
  18. 18. Funções Básicas gulp.dest(glob) gulp.task('less', function () { gulp.src('assets/less/*.less') .pipe(less()) .pipe(gulp.dest('contents/assets/css')); });
  19. 19. Instalação
  20. 20. Dependências Node Node Package Manager
  21. 21. Instalação npm init npm install gulp --save-dev
  22. 22. Iniciando um projeto
  23. 23. Projeto var gulp = require('gulp'), less = require('gulp-less'), imagemin = require('gulp-imagemin'), uglify = require('gulp-uglify');
  24. 24. Projeto gulp.task('less', function () { gulp.src(path.less) .pipe(less()) .pipe(gulp.dest('assets/css')); });
  25. 25. Projeto gulp.task('images', function () { gulp.src(path.img) .pipe(imagemin()) .pipe(gulp.dest('build/assets/img')); });
  26. 26. Projeto gulp.task('js', function () { gulp.src(path.js) .pipe(uglify({outSourceMap: true})) .pipe(gulp.dest('assets/js/min')); });
  27. 27. Projeto gulp.task('watch', function () { gulp.watch(path.less, ['less']); });
  28. 28. Projeto gulp.task('default', ['watch']); gulp.task('build', ['images', 'js', 'less']);
  29. 29. Projeto - executando $ gulp // Executa a task ‘default’ $ gulp nomeTask // Executa a task chamada
  30. 30. Obrigado

×