Laravel e Front End

Laravel e Front End

Fábio Vedovelli

Desenvolvendo desde 1998

PHP, Javascript

Laravel e Front End

Laravel e Front End

octimine GmbH de Munique

Busca de patentes

Laravel e Vue.js

Laravel e Front End

Front End Development

2016

Laravel e Front End

Laravel e Front End

O que aconteceu com ...

Laravel e Front End

Aconteceu isso:

Laravel e Front End

Dezenas de novas ferramentas foram criadas

Laravel e Front End

Após escolher suas ferramentas para

JAVASCRIPT e CSS

Laravel e Front End

Ainda terá que lidar com:

• Node.js e NPM
• Gulp ou Grunt
• Webpack, Browserify ou Rollup
• SASS ou LESS
• Concatenar e Minificar

Laravel e Front End

Laravel e Front End

Laravel Elixir to the rescue

Laravel e Front End

Laravel Elixir

Laravel e Front End

Text

Laravel e Front End

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');

// ... variables
var autoprefixerOptions = {
  browsers: ['last 2 versions', '> 5%', 'Firefox ESR']
};

gulp.task('sass', function () {
  return gulp
    .src(input)
    .pipe(sourcemaps.init())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(gulp.dest(output));
});

config tradicional de Gulp

Laravel e Front End

// gulpfile.js

const elixir = require('laravel-elixir');


elixir(mix => {
    mix.sass('app.scss');
});

mesma config com Elixir

Laravel e Front End

// gulpfile.js

var elixir = require('laravel-elixir');

require('laravel-elixir-vueify');
require('laravel-elixir-livereload');

elixir(function(mix) {

    mix.livereload();

    mix.browserify('main.js');

    mix.scripts([
        '../../../node_modules/jquery/dist/jquery.js',
        '../../../node_modules/jquery-ui-browserify/dist/jquery-ui.js',
        '../../../node_modules/bootstrap/dist/js/bootstrap.js',
        '../../../node_modules/bootstrap-multiselect/dist/js/bootstrap-multiselect.js',
        '../../../node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.js',
        '../../../node_modules/jquery-colorbox/jquery.colorbox.js',
        '../../../node_modules/lightgallery/dist/js/lightgallery.js',
        '../../../node_modules/lightgallery/dist/js/lg-thumbnail.js',
        '../../../node_modules/lightgallery/dist/js/lg-zoom.js',
        '../../../node_modules/lightgallery/dist/js/lg-pager.js',
        '../../../node_modules/lightgallery/dist/js/lg-fullscreen.js',
        '../../../node_modules/hopscotch/dist/js/hopscotch.js',
        '../../../node_modules/velocity-animate/velocity.js',
        '../../../node_modules/velocity-animate/velocity.ui.js',
        'libraries/highcharts-4.2.5/highcharts.src.js',
        'libraries/highcharts-4.2.5/highcharts-more.src.js',
        'libraries/highcharts-4.2.5/highcharts-3d.src.js',
        'libraries/highcharts-4.2.5/map.src.js',
        'libraries/highcharts-4.2.5/exporting.src.js',
        'libraries/highcharts-4.2.5/drilldown.src.js',
        'libraries/highcharts-4.2.5/data.src.js',
        'libraries/highcharts-4.2.5/mapdata.custom.world.js',
        'libraries/mask/jquery.mask.js',
        'ace-init.js',
        'octimine.sidebar.js',
        'octimine.submenu-hover.js',
        'octimine.widget-box.js',
        'octimine.scripts.js'
    ], 'public/js/octimine.js');

    mix.styles([
        '../../../node_modules/bootstrap/dist/css/bootstrap.css',
        '../../../node_modules/jquery-ui/themes/cupertino/jquery-ui.css',
        '../../../node_modules/bootstrap-multiselect/dist/css/bootstrap-multiselect.css',
        '../../../node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.css',
        '../../../node_modules/font-awesome/css/font-awesome.css',
        '../../../node_modules/jquery-colorbox/example4/colorbox.css',
        '../../../node_modules/lightgallery/dist/css/lightgallery.css',
        '../../../node_modules/lightgallery/dist/css/lg-transitions.css',
        '../../../node_modules/sweetalert/dist/sweetalert.css',
        '../../../node_modules/hopscotch/dist/css/hopscotch.css',
        '../../../node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.css',
        'octimine-fonts.css',
        'octimine.css',
        'octimine-skins.css',
        'octimine-reset.css',
    ], 'public/css/octimine.css');

    mix.copy('node_modules/jquery-ui/themes/cupertino/images', 'public/build/css/images');
    mix.copy('node_modules/lightgallery/dist/img', 'public/build/img');
    mix.copy('node_modules/lightgallery/dist/fonts', 'public/build/fonts');
    mix.copy('node_modules/font-awesome/fonts', 'public/build/fonts');
    mix.copy('node_modules/hopscotch/dist/img', 'public/build/img');
    mix.copy('resources/fonts', 'public/build/fonts');

    mix.version([
        'public/css/octimine.css',
        'public/js/octimine.js',
        'public/js/main.js'
    ]);
});

Laravel e Front End

// gulpfile.js

const elixir = require('laravel-elixir');


elixir(mix => {
    mix.sass('app.scss');
});

Syntactic Sugar

Laravel e Front End

Para saber mais...

Laravel e Front End

Laravel e Front End

Laravel e Front End

Laravel e Front End

Laravel e Front End

bit.ly/curso-laravel-vue

22/10, 29/10 e 05/11

ao vivo, online

Laravel e Front End

Obrigado!

@vedovelli