Как собрать gulp файл для работы с UNDERSCORES (стартовая тема wordpress), с учетом препроцессора Sass и browsersync?

Как собрать gulp файл для работы с UNDERSCORES (стартовая тема wordpress), с учетом препроцессора Sass и browsersync? Вот как выглядит иерархия файлов UNDERSCORES (на всякий случай) 5c32f68201d84785395555.png вот ссылка на UNDERSCORES underscores.me Или может быть такой gulp файл существует? Заранее спасибо.
  • Вопрос задан
  • 182 просмотра
Пригласить эксперта
Ответы на вопрос 3
Для прошлой версии gulp. Я думаю, что переписать будет несложно.
Взято из завалявшегося курса от Morten Rand-Hendriksen "WordPress: Building Themes from Scratch Using Underscores" (если что - есть на "главном" торрент-трекере).

var themename = 'humescores';

var gulp = require('gulp'),
browserSync = require('browser-sync').create(),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),

newer = require('gulp-newer'),

root = '../' + themename + '/',
scss = root + 'sass/',
js = root + 'js/',
img = root + 'images/',
languages = root + 'languages/';

// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('last 2 versions', '> 1%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root));
});

// Optimize images through gulp-image
gulp.task('images', function() {
return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
.pipe(newer(img))
.pipe(image())
.pipe(gulp.dest(img));
});

// JavaScript
gulp.task('javascript', function() {
return gulp.src([js + '*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(gulp.dest(js));
});

// Watch everything
gulp.task('watch', function() {
browserSync.init({
open: 'external',
proxy: 'humescores.dev',
port: 8080
});
gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
gulp.watch(js + '**/*.js', ['javascript']);
gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
gulp.watch(root + '**/*').on('change', browserSync.reload);
});

// Default task (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);
Ответ написан
ArsenyMatytsyn
@ArsenyMatytsyn
Teamlead команды разработчиков iAmStudio
Я думаю универсального ответа нет. Но могу рассказать, как мы собираем. Для статики создаем папку типа frontsources прямо в корне. Там все, и sass и «сырой» js, и изображения. Далее настроенный gulp уже все разбирает, куда надо. Стили в корень замещая файл style.css и т.д.
Browsersync мы не используем для работы с WP, так что тут не подскажу. Для отработки всея и всего в проекте мы локалим его либо на Open Server, ну или для работы сообща на наш сервак.
В случае с работы с серваком удобно использовать синхронизацию кода с обработкой gulp прямо на сервере, но это реально, если у вас есть полный контроль к серверу, ну или хотя бы возможность установить там необходимое окружение и запускать его. Речь о ноде и gulp, соответственно.
Ответ написан
@Codeberg
Почти готовая (все никак не закончу) стартовая тема на Underscores. Незначительно переделанная. Посмотрите, надеюсь будет понятно.
Запуск - gulp watch. Слежение за изменениями PHP нет (т.к. мне не нужно). Bootstrap 4 в комплекте. Не забудьте изменить домен в gulpfile.js на свой (на данный момент домен theme.local).
Скачать отсюда.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы