繁体   English   中英

SCSS到Style.css

[英]SCSS to Style.css

长话故事,致力于此的主要开发人员不再与公司合作,我必须接管他们建立的项目 - 所以所有的帮助都将受到赞赏。

我对WordPress和SCSS / Foundation都不太熟悉,所以这将是一个学习过程。 我需要进行css更改并进行部署,但它根本没有显示我本地环境的变化。

以下是我的知识:
- 基金会用来建立这个
- SCSS正在转换为Style.css
- https://cdn.site.pl/wp-content/themes/sites/style.css?ver=4.9.10 - 有一个版本应用于style.css的末尾

以下是我的gulpfile.js中的任务:
在此输入图像描述

这是他的文件:

默认的gulp任务运行gulp脚本和gulp样式。 要运行此任务,请在Terminal中导航到项目的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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM