[gulp 4]：尝试运行 Gulp4 将 SCSS 转换为 CSS

Question

我试图运行 gulp 将SCSS 转换为CSS，gulp 没有任何错误但没有有css个文件输出到目标文件夹，我也试过改变输出路径还是不行，我的代码如下：

// gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass')(require('node-sass'));
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();
var notify = require('gulp-notify');
var sassLint = require('gulp-sass-lint');

var styleLink = {
    sassLink: 'src/**/*.(scss|sass)',
    OutputLink: '../css'
}
var browserSyncLink = {
    root: '../',
    watchHtml: '../*.html',
    watchJS: '../*.js'
}

// notify
function showErrorNotify(error) {
  var args = Array.prototype.slice.call(arguments);
  // Show notification
  notify.logLevel(0);
  notify
    .onError({
      title: '[' + error.relativePath + '] Error',
      message: '<%= error.messageOriginal %>',
      sound: 'Pop'
    })
    .apply(this, args);

  // Keep gulp from hanging on this task
  this.emit('end');
}

// sass task
function sassTask() {
  return gulp.src(styleLink.sassLink, { sourcemaps: true })
        .pipe(sass()) // compile SCSS to CSS
        .pipe(autoprefixer())
        .pipe(gulp.dest('./', { sourcemaps: '.' }));
}

function browserSyncServer(cb) {
  browserSync.init({
    server: {
      baseDir: browserSyncLink.root
    }
  })
  cb();
}

function browserSyncLoad(cb) {
  browserSync.reload();
  cb();
}

function sassLinkTask() {
  return gulp
    .src(styleLink.sassLink)
    .pipe(
      plumber({
        errorHandler: showErrorNotify
      })
    )
    .pipe(sassLint())
    .pipe(sassLint.format())
    .pipe(sassLint.failOnError());
}

function watchTask() {
  gulp.watch('../*.html', browserSyncLoad);
  gulp.watch(['src/**/*.+(scss|sass)', '../js/*.js'], gulp.series(gulp.parallel(sassTask, sassLinkTask), browserSyncLoad));
}

exports.default = gulp.series(gulp.parallel(sassTask, sassLinkTask), browserSyncServer, watchTask);

当我运行这段代码时，我也没有收到任何错误。

It seems no error..

有人能帮帮我吗？谢谢。请原谅我糟糕的英语...

Answer 1

在你的 watchTask 你有这个：

src/**/*.+(scss|sass) 注意交替前的 + 符号。

但是在你的 styleLink 变量中你有：

var styleLink = {
    sassLink: 'src/**/*.(scss|sass)',
    OutputLink: '../css'
}

改为 sassLink: 'src/**/*.+(scss|sass)',

[gulp 4]：尝试运行 Gulp4 将 SCSS 转换为 CSS

[gulp 4]: Trying to run Gulp4 to convert SCSS to CSS

css

npm

gulp

[gulp 4]：尝试 运行 Gulp4 将 SCSS 转换为 CSS

[gulp 4]: Trying to run Gulp4 to convert SCSS to CSS

css

npm

gulp

[gulp 4]：尝试运行 Gulp4 将 SCSS 转换为 CSS