Gulp-työkalun käyttö
Gulp-työkalun avulla voit pienentää ja koota resurssejasi automaattisesti. Tähän sisältyy esimerkiksi Sass-tiedostojen muuntaminen CSS-tiedostoiksi tai CoffeeScript-tiedostojen muuntaminen JavaScript-tiedostoiksi. Gulp voi myös optimoida kuvasi ja suorittaa monia muita tehtäviä. Browsersync-työkalun avulla se voi jopa ladata selainikkunasi uudelleen useilla laitteilla automaattisesti.
Gulpin oletusasetukset vaativat mukautusta teeman tarkkailemiseksi
Seravon pohja sisältää esimerkin gulpfile.js -tiedostosta. Esimerkkimme kokoaa Sass-tiedostoja esimerkkiteemasta ja sisältää Browsersyncin konfiguroituna sille, joten voit käyttää sitä pohjana omille projekteillesi.
Asenna ensin /data/wordpress/package.json -tiedostossa määritellyt riippuvuudet:
cd /data/wordpress/ && npm install
Tämän jälkeen voit aktivoida Browsersync-työkalun seuraavalla komennolla:
cd /data/wordpress/ && gulp watch
Käynnistymisen jälkeen sisäinen verkkopalvelin (nginx) ohjaa kaiken liikenteen automaattisesti Browsersyncin kautta, ja voit hyödytään realiaikaista uudelleenkäynnistystä kehitystyön aikana.
Esimerkkitiedosto
/*
* This is default barebone for gulp, add your own modifications here
* It also serves as an example of how to use browser-sync in this environment
*/
const gulp = require('gulp');
const browserSync = require('browser-sync');
const sass = require('gulp-sass')(require('sass'));
const reload = browserSync.reload;
/*
* src array contains the files which the gulp will be watching
* Choose your theme over here
*/
var src = {
scss: 'htdocs/wp-content/themes/yourtheme/scss/*.scss',
css: 'htdocs/wp-content/themes/yourtheme/css',
php: [
'htdocs/wp-content/themes/*/*.php',
'htdocs/wp-content/plugins/*/*.php',
'htdocs/wp-content/mu-plugins/*/*.php',
],
};
// Compile sass into CSS
gulp.task('sass', () => {
return gulp
.src(src.scss)
.pipe(sass())
.pipe(gulp.dest(src.css))
.pipe(reload({ stream: true }));
});
// Serve all files through browser-sync
gulp.task(
'serve',
gulp.series('sass', () => {
// Initialize browsersync
// Nginx is configured to use any service in port 1337
// as middleware to WordPress in vagrant environment
browserSync.init({
// browsersync with a php server
proxy: `https://${process.env.DEFAULT_DOMAIN}`,
open: false,
port: 1337,
ui: {
port: 1338,
},
notify: true,
});
// Watch sass files and compile them. Use polling because the Virtualbox
// shared folders implementation does not emit file system events from the
// host to the VM: https://github.com/floatdrop/gulp-watch/issues/213.
gulp.watch(src.scss, { usePolling: true }, gulp.series('sass'));
// Update the page automatically if php files change
gulp.watch(src.php, { usePolling: true }).on('change', reload);
})
);
// Give another name for serve
gulp.task('watch', gulp.series('serve'));
// Default task just compiles everything
// This is run when site is deployed!
gulp.task('default', gulp.series('sass'));