O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Gulp

442 visualizações

Publicada em

Apresentação de conhecimentos na AG2 Publicis Modem

Publicada em: Tecnologia
  • Seja o primeiro a comentar

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

×