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

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

2 个答案: