html - SCSS 到 Style.css
问题描述
长话短说,为此工作的主要开发人员不再与公司合作,我必须接管他们建立的项目 - 所以所有帮助都将不胜感激。
我对 WordPress 和 SCSS/Foundation 不太熟悉,所以这将是一个学习过程。我需要进行 css 更改并部署它,但它根本没有显示我本地环境的更改。
这是我所拥有的知识:
- Foundation 用于构建它
- SCSS 正在转换为 Style.css
- https://cdn.site.pl/wp-content/themes/sites/style.css?ver=4.9 .10 - style.css 末尾有一个版本
这是他的文档:
默认的 gulp 任务运行 gulp 脚本和 gulp 样式。要运行此任务,请在终端中导航到项目的 htdocs 目录,然后键入:
吞咽
我得到这个回应:
[14:00:37] 任务从未定义:默认
[14:00:37] 要列出可用任务,请尝试运行:gulp --tasks
下面,我将提供整个 gulpfile.js 文件
const argv = require('yargs').argv;
const {
src,
dest,
parallel,
series,
watch
} = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const concat = require('gulp-concat');
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
// Usage in gulp: gulp task-name --theme=theme-name
// Default value is 'f-sites'
const themeName = argv.theme ? argv.theme : 'f-sites';
// GULP CONFIG
const config = {
themeName: themeName,
themeDirectory: `wp-content/themes/${themeName}`
};
// GULP TASKS
// SCSS/CSS TASKS
//==================================================
function sassToCss() {
const nodeModulesSassPaths = [
'node_modules/foundation-sites/scss',
'node_modules/slick-carousel/slick',
'node_modules/jquery-fancybox/source/scss',
'node_modules/font-awesome/scss'
];
const srcPaths = [
`${config.themeDirectory}/scss/theme.scss`,
`${config.themeDirectory}/scss/theme-rtl.scss`
];
return src(srcPaths, { sourcemaps: true })
.pipe(sass({ includePaths: nodeModulesSassPaths }).on('error', sass.logError))
.pipe(autoprefixer({ browsers: ['last 2 versions', 'ie >= 10'] }))
.pipe(dest(`${config.themeDirectory}/css`, { sourcemaps: true }));
}
function cssConcatLTR() {
const srcFiles = [
`${config.themeDirectory}/css/wordpress.css`,
'./node_modules/animate.css/animate.css',
`${config.themeDirectory}/css/theme.css`,
];
return src(srcFiles, { sourcemaps: true })
.pipe(concat('project.css'))
.pipe(dest(`${config.themeDirectory}/css`, { sourcemaps: true }));
}
function cssConcatRTL() {
const srcFiles = [
config.themeDirectory + '/css/wordpress.css',
'./node_modules/animate.css/animate.css',
config.themeDirectory + '/css/theme-rtl.css'
];
return src(srcFiles, { sourcemaps: true })
.pipe(concat('project-rtl.css'))
.pipe(dest(`${config.themeDirectory}/css`, { sourcemaps: true }));
}
function cssMinifyLTR() {
const plugins = [cssnano()];
return src(`${config.themeDirectory}/css/project.css`)
.pipe(postcss(plugins))
.pipe(rename('style.css'))
.pipe(dest(config.themeDirectory));
}
function cssMinifyRTL() {
const plugins = [cssnano()];
return src(`${config.themeDirectory}/css/project-rtl.css`)
.pipe(postcss(plugins))
.pipe(rename('style-rtl.css'))
.pipe(dest(config.themeDirectory));
}
exports.default = parallel(
series(
sassToCss,
parallel(cssConcatLTR, cssConcatRTL),
parallel(cssMinifyLTR, cssMinifyRTL)
),
series(jsConcat, jsMinify)
);
exports.styles = series(
sassToCss,
parallel(cssConcatLTR, cssConcatRTL),
parallel(cssMinifyLTR, cssMinifyRTL)
);
exports.scripts = series(jsConcat, jsMinify);
解决方案
这可能是 gulp-cli 的版本造成的,您可以尝试升级它。
相关问题: https ://github.com/gulpjs/gulp-cli/issues/191 https://github.com/gulpjs/gulp/issues/1634
推荐阅读
- frontend - 当页面 slug 中有“adwords”时,Gatsby 页面不加载
- c# - 单一方法或泛型 It.IsAny 的模拟行为松散
- java - 如何使用 Java 从 XML 文件中获取属性
- javascript - 数学是对象还是类?
- colors - SSRS:是否可以根据树形图中的系列颜色更改边框颜色?
- python - 将每日数据转换为季度数据并在预测后转换回来
- ajax - zapier 使用 mailchimp 发送邮件
- npm - NPM 模块(handontable)未安装子依赖项(numbro)作为项目依赖项
- javascript - 使用 Internet Explorer 双击复选框的问题
- node.js - 无效登录:535-5.7.8 不接受用户名和密码