使用Gulp将所有CSS文件压缩成一个文件

Question

我有以下的gulp任务脚本，

// loads various gulp modules
var gulp = require('gulp');
var concat = require('gulp-concat');
var minifyCSS = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');

// create task
gulp.task('css', function(){
    gulp.src('src/css/**/*.css')
        .pipe(minifyCSS())
        .pipe(rename('style.min.css'))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))
        .pipe(gulp.dest('dist/css'))
});

如何将src/css目录下的所有CSS文件压缩为一个文件dist/css/style.min.css？

- Dipendra Gurung

---

可能是使用Gulp进行CSS压缩和重命名的重复问题。 - Preview

gulp-minify-css现在已经过时了。https://www.npmjs.com/package/gulp-minify-css - Musa Haidari

Answer 1

你的gulp任务缺少concat管道。

gulp.src('src/css/**/*.css')
    .pipe(minifyCSS())
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))
    .pipe(concat('style.min.css'))
    .pipe(gulp.dest('dist/css'))

这是一篇关于使用gulp构建的非常好的教程：

http://www.smashingmagazine.com/2014/06/11/building-with-gulp/

- Modern Labs

---

这里不需要使用rename()函数吗？ - Dipendra Gurung

我认为不需要使用rename()，因为您不想重命名现有文件。您只需要创建一个新文件，其中包含所有现有文件*.css的连接数据。 - Modern Labs

由于您已经在concat管道中定义了输出文件名(style.min.css)，因此不需要使用rename()。 - Jae Barclay

Answer 2

我认为最好使用cleancss gulp插件。

const cleanCSS = require('gulp-clean-css');  // npm install gulp-clean-css --save-dev

gulp.task('css', () => {

return gulp.src('assets/styles/*.css')
  .pipe(cleanCSS({
      debug: true,
      compatibility: 'ie8',
      level: {
          1: {
              specialComments: 0,
          },
      },
  }))
  .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
  }))
  .pipe(rename({
      basename: 'main-styles',
      suffix: '.min',
  }))
  .pipe(gulp.dest('dist/assets/styles/'))

});

- Seyed Abbas Seyedi

---

为什么？有什么区别吗？我在这篇文章中刚刚删除了gulp-css-plugin，因为我正在检查为什么编译CSS时会出现问题，我认为可能是gulp-css-plugin的原因。 - jircdeveloper

gulp-minify-css包已被弃用，gulp-minify-css的作者建议所有开发人员使用gulp-clean-css插件。 - Seyed Abbas Seyedi