将多个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-concat 和 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 扩展名进行了丑化/缩小（并将您的 html 链接更改为指向该文件名）。

Answer 2

希望有帮助。

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