为什么 gulp 不能将 scss 文件转换为 css 文件？答案

【问题标题】：Why gulp cannot transpile scss file into css file?为什么 gulp 不能将 scss 文件转换为 css 文件？
【发布时间】：2019-12-20 08:55:31
【问题描述】：

我是使用 gulp 的初学者。

我正在使用 Visual Studio 代码编辑器 - 1.41.1 版本。我的操作系统是 Windows7。

我已经在 gulpjs.com 上安装了 gulp。参考链接在这里：https://gulpjs.com/。但是，当我在 Visual Studio 代码编辑器中键入命令：gulp sass 时，我的 scss 文件没有转换为 css 文件。并且，编辑器改为显示以下消息。

The term 'gulp' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of  the name, or if a path was included, verify that the path is correct and try again. At line:1 char:5
+ gulp <<<<  sass
    + CategoryInfo          : ObjectNotFound: (gulp:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

我还检查了 gulpfile.js 中的路径。我认为路径没有问题。我的 gulpfile.js 正在关注。

var gulp = require('gulp');
var sass = require('gulp-sass');

sass.compiler = require('node-sass');

gulp.task('sass', function () {
  return gulp.src('project/src/sass/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('project/dist/css'));
});

您能告诉我为什么以及如何解决这个问题吗？谢谢。

【问题讨论】：

你全局安装 gulp 了吗？
试试这个.. npm install gulp -g --latest
@MihaiT 我在全球范围内安装了 gulp。我使用以下命令进行安装。 npm install gulp-cli -g
@Mr.Alien 感谢您的建议。我试过了，但还是不行。编辑器显示相同的消息。
你用什么命令来执行它？

标签： css sass gulp

【解决方案1】：

试试这个，我已经为 gulpJs 4 创建了这个代码。它可能会帮助你

运行这个命令

npm install gulp-concat gulp-autoprefixer gulp-sass gulp-sass-glob node-sass --save-dev

如果您使用的是 linux，请使用 Sudo

    const { src, dest } = require("gulp");
const concat = require("gulp-concat");
const autoprefixer = require("gulp-autoprefixer");
const sass = require("gulp-sass");
const sassGlob = require("gulp-sass-glob");
sass.compiler = require("node-sass");



function css() {
    return src("src/css/*.css")
        .pipe(concat("style.css"))
        .pipe(sassGlob())
        .pipe(
            sass({
                outputStyle: "compressed" //expand or compact or compressed
            }).on("error", sass.logError)
        )
        .pipe(
            autoprefixer({
                cascade: true
            })
        )
        .pipe(dest("build/css/"));
}


function scss() {
    return src('src/scss/style.scss') // import your all file in style.scss
        .pipe(sassGlob())
        .pipe(
            sass({
                outputStyle: 'compressed' // you can set "expand or compact or compressed" view 
            })
                .on('error', sass.logError)
        ).pipe(
            autoprefixer({
                cascade: true
            })
        ).pipe(dest('build/scss/'));
}

exports.css = css;
exports.scss= scss;

【讨论】：