CSS 路径在 gulp 和下划线之间没有对齐

Question

我正在创建一个 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
  )
})

Answer 1

此行不正确：

.pipe(gulp.dest('../wp-content/themes/sew-in-tune/app/css/styles.css')) // Outputs it in the css folder

gulp.dest 采用文件夹名称而不是文件名。您的代码可能正在创建一个实际上名为 styles.css 的文件夹。

您的“sass”任务的gulp.src 通常是一个文件，例如“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
      }));