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

Gulp and WordPress

Gulp and WordPress

A talk for the WordPress Meetup #2 in Varna (January 27, 2017)

Nikola Boychev

January 27, 2017
Tweet

Other Decks in Technology

Transcript

  1. None
  2. Nikola Boychev JavaScript Engineer

  3. –techopedia.com “Build tools are programs that automate the creation of

    executable applications from source code.”
  4. Build Tools • Package management • Code Lint • Optimisation

    • Test • Compilation • Deploy • Others
  5. Front-end Build Tools

  6. Why Gulp? • Performance • Configuration / Learning curve •

    Community
  7. NodeJS Streams

  8. NodeJS Streams • Streams make programming in node simple and

    elegant • You can just snap together the streaming modules like lego bricks or garden hoses • .pipe()
  9. Select in Gulp

  10. Node Glob • Gulp uses node-glob • Globs are patterns

    • The most common ones: • “filename.ext” - matches just the file named “filename.ext” • “dir/*.ext” - matches all the files with extension “ext” in directory “dir” • “dir/**/*.ext” - matches all the files with extension “ext” in “dir” and its sub directories • “dir/**/*” - matches all the files in “dir” and its sub directories
  11. Examples

  12. How to install Gulp 1. $ npm init 2. $

    npm install --global gulp-cli 3. $ npm install --save-dev gulp
  13. SASS var gulp = require('gulp'); var sass = require('gulp-sass'); //

    SASS task gulp.task('sass', function() { gulp.src('./src/sass/app.scss') // Compile SASS .pipe(sass()) // Save the processed css to file .pipe(gulp.dest('./assets/css')); }); // Default task (used for fallback, when running gulp, without task specified.) gulp.task('default', ['sass']);
  14. SASS var gulp = require('gulp'); var sass = require('gulp-sass'); //

    SASS task gulp.task('sass', function() { gulp.src('./src/sass/app.scss') // Compile SASS .pipe(sass()) // Save the processed css to file .pipe(gulp.dest('./assets/css')); }); // Default task (used for fallback, when running gulp, without task specified.) gulp.task('default', ['sass']);
  15. SASS var gulp = require('gulp'); var sass = require('gulp-sass'); //

    SASS task gulp.task('sass', function() { gulp.src('./src/sass/app.scss') // Compile SASS .pipe(sass()) // Save the processed css to file .pipe(gulp.dest('./assets/css')); }); // Default task (used for fallback, when running gulp, without task specified.) gulp.task('default', ['sass']);
  16. SASS var gulp = require('gulp'); var sass = require('gulp-sass'); //

    SASS task gulp.task('sass', function() { gulp.src('./src/sass/app.scss') // Compile SASS .pipe(sass()) // Save the processed css to file .pipe(gulp.dest('./assets/css')); }); // Default task (used for fallback, when running gulp, without task specified.) gulp.task('default', ['sass']);
  17. SASS var gulp = require('gulp'); var sass = require('gulp-sass'); //

    SASS task gulp.task('sass', function() { gulp.src('./src/sass/app.scss') // Compile SASS .pipe(sass()) // Save the processed css to file .pipe(gulp.dest('./assets/css')); }); // Default task (used for fallback, when running gulp, without task specified.) gulp.task('default', ['sass']);
  18. SASS var gulp = require('gulp'); var sass = require('gulp-sass'); //

    SASS task gulp.task('sass', function() { gulp.src('./src/sass/app.scss') // Compile SASS .pipe(sass()) // Save the processed css to file .pipe(gulp.dest('./assets/css')); }); // Default task (used for fallback, when running gulp, without task specified.) gulp.task('default', ['sass']);
  19. SASS var gulp = require('gulp'); var sass = require('gulp-sass'); //

    SASS task gulp.task('sass', function() { gulp.src('./src/sass/app.scss') // Compile SASS .pipe(sass()) // Save the processed css to file .pipe(gulp.dest('./assets/css')); }); // Default task (used for fallback, when running gulp, without task specified.) gulp.task('default', ['sass']);
  20. JS Concat var gulp = require('gulp'); var concat = require('gulp-concat');

    // JS task gulp.task('js', function() { gulp.src([ ‘./src/js/modules/**/*.js’, ‘./src/js/app.js’ ]) // Concat JS .pipe(concat('app.js')) // Save the processed js to file .pipe(gulp.dest('./assets/js')) }) // Default task (used for fallback, when running gulp, without task specified.) gulp.task('default', ['js']);
  21. JS Concat var gulp = require('gulp'); var concat = require('gulp-concat');

    // JS task gulp.task('js', function() { gulp.src([ ‘./src/js/modules/**/*.js’, ‘./src/js/app.js’ ]) // Concat JS .pipe(concat('app.js')) // Save the processed js to file .pipe(gulp.dest('./assets/js')) }) // Default task (used for fallback, when running gulp, without task specified.) gulp.task('default', ['js']);
  22. JS Concat var gulp = require('gulp'); var concat = require('gulp-concat');

    // JS task gulp.task('js', function() { gulp.src([ ‘./src/js/modules/**/*.js’, ‘./src/js/app.js’ ]) // Concat JS .pipe(concat('app.js')) // Save the processed js to file .pipe(gulp.dest('./assets/js')) }) // Default task (used for fallback, when running gulp, without task specified.) gulp.task('default', ['js']);
  23. Resources • WordPress Theme Gulp Boilerplate: github.com/NBoychev/wp-gulp-boilerplate • Useful stuff:

    • Gulp docs: https://gulp.readme.io/ • Streams: https://gulp.readme.io/docs/understanding-streams • Node Glob: https://github.com/isaacs/node-glob
  24. Thank you! Questions? [email protected] fb.me/NikolaBoychev github.com/NBoychev nboychev.com