Answer the question
In order to leave comments, you need to log in
Pug + php(wordpress) + gulp how to make such a build!?
Now there is a pug + scss build, image compression, etc. But this assembly is purely for layout. I often make websites using WP. Now I type everything first and then I start to pull it on WP, and if I need to change something in the styles, it’s not very convenient, since I use variables, scss nesting and mixins, and then I have to add it all crookedly already in css, and in the assembly I have everything is scattered in folders, well, in general, you understand, it turns out nonsense.
I need an assembly so that I can write php in pug and all this is updated as it is now with pug + scss so that I can do the entire work cycle, layout and wordpress on one assembly and always have access to the original pug + scss sources.
How to make it all beautiful?
Here is what is:
const gulp = require('gulp');
const concatCss = require('gulp-concat-css');
const rename = require('gulp-rename');
const minifyCss = require('gulp-minify-css');
const debug = require('gulp-debug');
const sourcemaps = require('gulp-sourcemaps');
const gulpIf = require('gulp-if');
const del = require('del');
const newer = require('gulp-newer');
const browserSync = require('browser-sync').create();
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const autoprefixer = require('gulp-autoprefixer');
const include = require('gulp-include');
const rigger = require('gulp-rigger');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const cache = require('gulp-cache');
const changed = require('gulp-changed');
const sass = require('gulp-sass');
const jade = require('gulp-jade');
gulp.task('jade', function() {
return gulp.src('source/include/product-card.jade')
.pipe(jade())
.pipe(gulp.dest('public'));
});
gulp.task('fonts', function() {
return gulp.src('source/fonts/**/*')
.pipe(gulp.dest('public/fonts'));
});
gulp.task('styles', function () {
return gulp.src('source/styles/scss/**/*.scss')
.pipe(sass())
.pipe(rename('all.min.css'))
.pipe(gulp.dest('public/css'))
});
gulp.task('images', function() {
return gulp.src('source/images/**/*.{jpg,jpeg,png,gif}')
.pipe(cache(imagemin({
interlaced: true,
progressive: true,
svgoPlugins: [{removeViewBox: false}],
une: [pngquant()]
})))
.pipe(gulp.dest('public/images'));
});
gulp.task('js', function() {
return gulp.src('source/js/**/*')
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest('public/js'));
});
gulp.task('libs', function() {
return gulp.src([
'source/libs/jquery/dist/jquery.min.js',
'source/libs/slick-carousel/slick/slick.min.js',
'source/libs/jquery.maskedinput/dist/jquery.maskedinput.js',
])
.pipe(concat('libs.min.js'))
.pipe(gulp.dest('public/js'));
});
gulp.task('clean', function() {
return del('public/*');
});
gulp.task('clear', function() {
return cache.clearAll();
});
gulp.task('build', gulp.series(
'clean',
gulp.parallel('jade', 'styles', 'images', 'js', 'libs', 'fonts'))
);
gulp.task('watch', function() {
gulp.watch('source/include/**/*.*', gulp.series('jade'));
gulp.watch('source/styles/**/*.*', gulp.series('styles'));
gulp.watch('source/images/**/*.*', gulp.series('images'));
gulp.watch('source/js/**/*.*', gulp.series('js'));
gulp.watch('source/libs/**/*.*', gulp.series('libs'));
gulp.watch('source/fonts/**/*.*', gulp.series('fonts'));
});
gulp.task('server', function() {
browserSync.init({
server: 'public'
});
browserSync.watch('public/**/*.*').on('change', browserSync.reload);
});
gulp.task('dev',
gulp.series('build', gulp.parallel('watch', 'server'))
);
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question