将多个 scss 个文件合并为一个 css 个文件

Question

我想将所有 scss 文件合并到一个压缩的 css 文件中：

结构：

样式表/
- test.scss
- test2.scss
gulpfile.js

我尝试了这两个任务，我在几个答案和教程中找到了它们，但我总是将 scss 文件放入复制的 css 文件中：

gulp.task('sass', function() {
    return gulp.src('stylesheets/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('css/'))
});

和

gulp.task('sass', function() {
    return gulp.src('stylesheets/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('css/styles.css'))
});

！！！有效结果!!!

样式表/
- test.scss
- test2.scss
css/
- test.css
- test2.css
gulpfile.js

或第二次尝试的任务：

样式表/
- test.scss
- test2.scss
css/styles.css/
- test.css
- test2.css
gulpfile.js

???预期结果 ???

样式表/
- test.scss
- test2.scss
css/
- styles.css
gulpfile.js

有什么想法吗？

Answer 1

希望能帮上忙。

gulp.task('styles', () => {
  gulp.src([path.src.sass])
    .pipe(sassGlob())
    .on('error', util.log)
    .pipe(sass({
       includePaths: ['src/scss'],
    }))
    .on('error', util.log)
    .pipe(gulp.dest(path.dist.css))
});

Answer 2

您表示要将文件合并为一个文件并压缩该文件，因此您需要添加两个插件来完成其中的每一个。

Gulp-concat and gulp-uglify

const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

gulp.task('sass', function() {
return gulp.src('stylesheets/**/*.scss')
  .pipe(sass())
  .pipe(concat('styles.css'))
  .pipe(uglify())

  // .pipe(rename({
   //  basename: "styles",
   //   suffix: ".min",
   //   extname: ".css"
  //  }))

  .pipe(gulp.dest('css'))
});

此外，您可能需要添加 gulp-rename 以表明该文件已通过 .min.css 扩展名 uglified/minified（并更改您的 html link 指向那个文件名）。

将多个 scss 个文件合并为一个 css 个文件

Merge multiple scss files into one css file

gulp

gulp-sass