如何在 gulp.js 文件中定位单个文件答案

【问题标题】：How to target single file in gulp.js file如何在 gulp.js 文件中定位单个文件
【发布时间】：2019-05-02 09:11:18
【问题描述】：

我的代码当前监视我的 sass 文件并将样式输出到 css 文件夹。但它所做的是基于 sass 文件创建所有 css 文件，我只希望它创建一个 main.css 文件。到目前为止我的代码是：

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    livereload = require('gulp-livereload');
watchSass = require("gulp-watch-sass"),
    minifyCss = require('gulp-minify-css'),
    rename = require('gulp-rename'),
    $ = require('gulp-load-plugins')({ lazy: true });

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

gulp.task("sass:watch", function () {
    livereload.listen();
    gulp.watch('./src/scss/**/*.scss', gulp.series('sass'))
});

有什么想法吗？

我尝试了以下方法无济于事：

gulp.task('sass', function () {
    return gulp.src('./src/sass/main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(livereload())
        .pipe(gulp.dest('./public/css/'))
});


gulp.task("sass:watch", function () {
    livereload.listen();
    gulp.watch('./src/sass/main.scss', gulp.series('sass'))
});

【问题讨论】：

创建一个 scss 文件，您可以在其中导入所有其他 scss 文件。然后构建这个 scss 文件。
只输出单个文件的示例代码是什么？

标签： css sass gulp

【解决方案1】：

这是我的一个 gulp 文件的构建 css 函数的示例：

const autoprefixer = require("autoprefixer");
const gulp = require("gulp");
const sass = require("gulp-sass");
const plumber = require("gulp-plumber");
const rename = require("gulp-rename");
const postcss = require("gulp-postcss");
const uglify = require("gulp-uglify");
const cssnano = require("cssnano");

// CSS: Build & Minify Css
function css() {
    return gulp
      .src("./scss/app.scss")
      .pipe(plumber())
      .pipe(sass({ outputStyle: "expanded" }))
      .pipe(gulp.dest("./css/"))
      .pipe(rename({ suffix: ".min" }))
      .pipe(postcss([autoprefixer(), cssnano()]))
      .pipe(gulp.dest("./css/"))
  }

这是我的 app.scss 的一部分：

 // VARIABLES
 @import 'variables.scss';
 @import 'colors.scss';

 // LAYOUT
 @import 'layout/layout.scss';
 @import 'layout/header.scss';

当我想构建时，我运行：

gulp css

但您始终可以在手表上触发此功能

【讨论】：