0

我目前正在尝试在 WordPress 项目中将 Tailwind CSS 与 gulp 和 purgeCSS 一起使用。

一切都按预期运行，并且 CSS 文件正在编译，但是某些类不会进入编译后的 CSS，无论它们如何在标记中使用。

例如，背景颜色类，即“bg-white”包含在各种主题文件中，但每当 CSS 重新编译时，该类就会被清除。“margin-top”类也是如此，但其他任何margin类都不一样。

这是我的 gulp 文件：

var postcss = require('gulp-postcss');
var cssImport = require('postcss-import');
var gulp = require('gulp');
var cssvars = require('postcss-simple-vars');
var nested = require('postcss-nested');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var purgecss = require('gulp-purgecss')
var sass = require('gulp-sass');

var gcmq = require('gulp-group-css-media-queries');
var uglify = require('gulp-uglify-es').default;
var del = require('del');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');

var gutil = require('gulp-util');
var babel = require('gulp-babel');


// ============================================================================
//  Main Tasks
// ============================================================================


// Default task is build
gulp.task('default', ['build']);

// Development task (watch alias)
gulp.task('dev', ['watch']);

// Build task
gulp.task('build', ['clean'], function() {
    gulp.start(['styles', 'scripts']);
});

// Styles task
gulp.task('styles', function() {
    
    return gulp.src([
            './assets/sass/*.scss'
        ])
        .pipe(sass().on('error', sass.logError))
        // .pipe(sourcemaps.init())
        .pipe(postcss([
                require('postcss-import'),
                require('tailwindcss'),
                autoprefixer(),
                // cssnano()      
            ], {
            syntax: require('postcss-scss')
        }))
         .pipe(purgecss({
            content: ['./*.php', './templates/*.php', './partials/*.php', './components/*.php'],
            extractors: [
                {
                    extractor: content => {
                         return content.match(/[A-Za-z0-9-_:\/]+/g) || []
                        // return content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []                        
                        // return content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []
                        //return content.match(/[\w-/:]+(?<!:)/g) || [];
                    },
                    extensions: ['css', 'php', 'html']
                }
            ],
            safelist: {
                standard: [/^[^-]*mt-*/, /^[^-]*bg-opacity-*/, /^[^-]*bg-white/]
            }
        }))    
        .pipe(gulp.dest('./assets/css/'))
});

// Scripts task
gulp.task('scripts', function() {
    return gulp.src([            
            './node_modules/mmenu-light/dist/mmenu-light.js',                        
            './node_modules/mmenu-light/dist/mmenu-light.polyfills.js',                        
            './assets/js/util-scripts.js', 
            './assets/vendors/micromodal/micromodal.min.js',                        
            './assets/vendors/waypoints/lib/jquery.waypoints.js',                        
            './assets/js/core-js.js',                            
            './assets/js/theme-js.js'                            
        ])
        // .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(concat('theme-js.dist.js'))
        .pipe(uglify())
        // .pipe(sourcemaps.write())
        .pipe(gulp.dest('./assets/dist/js/'))
});

// ============================================================================
//  Build Tasks
// ============================================================================

/**
 * Clean directories
 *
 * @since 0.1.0
 */
gulp.task('clean', function() {
    del([
        './assets/css/*.css',
        '!./assets/css/font-awesome.min.css',
        './assets/js/*.dist.js'
    ]);
});

// END BUILD

// ============================================================================
//  Dev Tasks
// ============================================================================

/**
 * Execute tasks when files are change and live reload web page, and servers
 *
 * @since 0.1.0
 */
gulp.task('watch', function() {    
    gulp.watch('./assets/sass/**/*.scss', ['styles']);
    gulp.watch('./assets/js/*.js', ['scripts']);
    // gulp.watch('./assets/images/*', ['images']);
    gulp.watch("*.html", ['bs-reload']);
});

我还尝试了各种提取器正则表达式匹配，但它们似乎都不起作用。

奇怪的是，当我将它添加到我的 tailwind.config.js 文件的主题配置中时，后台类会编译

 backgroundColor: {
      'white': '#fff'
    },

似乎绝大多数类都在编译，但不确定是我的 purgeCSS 配置还是我在顺风中缺少的其他配置？

4

0 回答 0