问题描述
我需要您的帮助,以便在 wordpress 主题中使用 PurgeCSS 和 gulp 从 Bootstrap 中删除未使用的样式。
这是我的 gulpfile.babel.js
代码
先谢谢你:-)
import { src,dest,watch,series,parallel } from 'gulp';
import yargs from 'yargs';
import sass from 'gulp-sass';
import Purgecss from 'purgecss';
import purgecsswordpress from 'purgecss-with-wordpress';
import cleanCss from 'gulp-clean-css';
import gulpif from 'gulp-if';
import postcss from 'gulp-postcss';
import sourcemaps from 'gulp-sourcemaps';
import autoprefixer from 'autoprefixer';
import imagemin from 'gulp-imagemin';
import del from 'del';
import webpack from 'webpack-stream';
import named from 'vinyl-named';
import browserSync from "browser-sync";
import zip from "gulp-zip";
import info from "./package.json";
import replace from "gulp-replace";
import wpPot from "gulp-wp-pot";
const PRODUCTION = yargs.argv.prod;
const server = browserSync.create();
export const serve = done => {server.init({
proxy: "https://marulab.local"
});
done();
};
export const reload = done => {
server.reload();
done();
};
export const clean = () => del(['assets']);
export const styles = () => {
return src(['src/scss/style.scss','src/scss/admin.scss'])
.pipe(gulpif(!PRODUCTION,sourcemaps.init()))
.pipe(sass().on('error',sass.logError))
.pipe(gulpif(PRODUCTION,postcss([ autoprefixer ])))
.pipe(gulpif(PRODUCTION,cleanCss({compatibility:'ie8'})))
.pipe(gulpif(!PRODUCTION,sourcemaps.write()))
.pipe(dest('assets/css'))
.pipe(server.stream());
}
export const purgeCss = () => {
return src(['assets/css/*.css'])
.pipe(Purgecss({
content: ['**/*.PHP'],css: ['assets/css/*.css'],safelist: purgecsswordpress.safelist
}))
.pipe(dest('assets/css'))
}
export const images = () => {
return src('src/images/**/*.{jpg,jpeg,png,svg,gif}')
.pipe(gulpif(PRODUCTION,imagemin()))
.pipe(dest('assets/images'));
}
export const copy = () => {
return src(['src/**/*','!src/{images,js,scss}',scss}/**/*'])
.pipe(dest('assets'));
}
export const scripts = () => {
return src(['src/js/script.js','src/js/admin.js'])
.pipe(named())
.pipe(webpack({
module: {
rules: [
{
test: /\.js$/,use: {
loader: 'babel-loader',options: {
presets: []
}
}
}
]
},mode: PRODUCTION ? 'production' : 'development',devtool: !PRODUCTION ? 'inline-source-map' : false,output: {
filename: '[name].js'
},externals: {
jquery: 'jQuery'
},}))
.pipe(dest('assets/js'));
}
export const compress = () => {
return src([
"**/*","!node_modules{,/**}","!bundled{,"!src{,"!.babelrc","!.gitignore","!gulpfile.babel.js","!package.json","!package-lock.json",])
.pipe(
gulpif(
file => file.relative.split(".").pop() !== "zip",replace("_themename",info.name)
)
)
.pipe(zip(`${info.name}.zip`))
.pipe(dest('bundled'));
};
export const pot = () => {
return src("**/*.PHP")
.pipe(
wpPot({
domain: "_themename",package: info.name
})
)
.pipe(dest(`languages/${info.name}.pot`));
};
export const watchForChanges = () => {
watch('src/scss/**/*.scss',styles);
watch('src/images/**/*.{jpg,gif}',series(images,reload));
watch(['src/**/*',scss}/**/*'],series(copy,reload));
watch('src/js/**/*.js',series(scripts,reload));
watch("**/*.PHP",reload);
}
export const dev = series(clean,parallel(styles,purgeCss,images,copy,scripts),serve,watchForChanges);
export const build = series(clean,pot,compress);
export default dev;
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)