SCSS到Style.css

Question

长话短说，从事此工作的主要开发人员已不再在公司任职，我必须接管他们建立的项目-因此，所有帮助将不胜感激。

我对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样式。跑步   要执行此任务，请在终端中导航到项目的htdocs目录，然后   类型：

     

gulp

我得到这个回应：

  

[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);

Answer 1

这可能是由于gulp-cli版本引起的，您可以尝试对其进行升级。

相关问题： https://github.com/gulpjs/gulp-cli/issues/191 https://github.com/gulpjs/gulp/issues/1634