Gulp and WordPress

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

Transcript

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? nboychev90@gmail.com fb.me/NikolaBoychev github.com/NBoychev nboychev.com