Я создаю сайт WordPress, но CSS не появляется. Я думаю, что я сузил это до пути, не являющегося правильным. но всякий раз, когда я пытаюсь исправить путь, gulp создает новый вывод CSS. Я использую подчеркивание sassified и gulp sass, которые, как я думаю, не встречаются на одном и том же пути. Я могу получить подчеркивание get_stylesheet_uri, чтобы использовать файл CSS, который успешно выводит стилизацию на моей странице. но я не могу получить правильный путь в моем файле gulpfile для вывода в тот же файл CSS
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');
// Basic Gulp task syntax
gulp.task('hello', function() {
console.log('Hello Zell!');
})
// Development Tasks
// -----------------
// Start browserSync server
gulp.task('browserSync', function() {
browserSync.init({
proxy: "localhost/sewintune"});
});
gulp.task('sass', function() {
return gulp.src('app/sass/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass().on('error', sass.logError)) // Passes it through a gulp-sass, log errors to console
.pipe(gulp.dest('../wp-content/themes/sew-in-tune/app/css/styles.css')) // Outputs it in the css folder
.pipe(browserSync.reload({ // Reloading with Browser Sync
stream: true
}));
})
// Watchers
gulp.task('watch', function() {
gulp.watch('app/sass/**/*.scss', ['sass']);
gulp.watch('app/*.php', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
})
// Optimization Tasks
// ------------------
// Optimizing CSS and JavaScript
gulp.task('useref', function() {
return gulp.src('app/*.php')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'));
});
// Optimizing Images
gulp.task('images', function() {
return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/images'))
});
// Copying fonts
gulp.task('fonts', function() {
return gulp.src('app/fonts/**/*')
.pipe(gulp.dest('dist/fonts'))
})
// Cleaning
gulp.task('clean', function() {
return del.sync('dist').then(function(cb) {
return cache.clearAll(cb);
});
})
gulp.task('clean:dist', function() {
return del.sync(['dist/**/*', '!dist/images', '!dist/images/**/*']);
});
// Build Sequences
// ---------------
gulp.task('default', function(callback) {
runSequence(['sass', 'browserSync'], 'watch',
callback
)
})
Эта строка неверна:
.pipe(gulp.dest('../wp-content/themes/sew-in-tune/app/css/styles.css')) // Outputs it in the css folder
gulp.dest
принимает имя_папки, а не имя файла. Ваш код, вероятно, создает папку с именем styles.css
,
Ваш gulp.src
для задачи ‘sass’ обычно используется один файл, такой как ‘styles.scss’, который импортирует в него ваши партиалы. [Не единственный способ сделать это.] Так что эта задача может выглядеть так:
gulp.task('sass', function() {
return gulp.src('app/sass/**/styles.scss')
.pipe(sass().on('error', sass.logError))
// with no other modification, the below is the directory linked to in your html + styles.css
.pipe(gulp.dest('../wp-content/themes/sew-in-tune/app/css'))
.pipe(browserSync.reload({
stream: true
}));
Других решений пока нет …