Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Development Practices with Gulp - Alessandro Kaounas

Modern Development Practices with Gulp - Alessandro Kaounas

Ο Αλέξανδρος στην ομιλία του θα επιδείξει σύγχρονες πρακτικές ανάπτυξης με το Gulp και πώς θα βελτιώσετε μια υπάρχουσα ροή εργασίας. Ταυτόχρονα θα μας δείξει από την αρχή πώς να χρησιμοποιήσουμε το Gulp για να δημιουργήσουμε ένα επιτυχημένο έργο και πώς να διατηρήσουμε ή να επικαιροποιήσουμε ένα ήδη υπάρχον.

Alessandro at his speech, will demonstrate modern development practises with Gulp and how to improve an existing working flow. At the same time he will show from scratch how to use Gulp to build a successful project and how to maintain or update an existing.

WordPress Greek Community

December 15, 2018
Tweet

More Decks by WordPress Greek Community

Other Decks in Technology

Transcript

  1. Alessandro Kaounas
    Modern Development Practices with GULP

    View full-size slide

  2. Getting started
    with GULP
    GULP is a toolkit for automating painful or time-
    consuming tasks in your development workflow
    Example Tasks
    - Refresh browser on change files
    - Minify JavaScript & CSS
    - Compile SASS/LESS to CSS
    - Deploy source code to the output directory
    - Upload files via FTP to a production server

    View full-size slide

  3. Setting up the
    environment
    Install Node / Gulp Setup package.json Create gulpfile.js Write Gulp tasks
    Gulp works cross-platform, so you do not need to worry about your platform

    View full-size slide

  4. Install Node / Gulp

    View full-size slide

  5. Meeting the API
    gulp.task
    Used to define a new gulp task
    gulp.src 
    Used to point where the input files to the task are located
    gulp.dest 
    Used to point where the output files needed to be written
    gulp.watch 
    Used to make gulp to watch on the changes of files
    1
    2
    3
    4

    View full-size slide

  6. How GULP works
    PIPE

    View full-size slide

  7. Theme developing
    See code in action

    View full-size slide

  8. Any Questions?

    View full-size slide