gulp는 모든 CSS 파일을 단일 파일로 축소합니다.

gulp는 모든 CSS 파일을 단일 파일로 축소합니다.

---

다음과 같이 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로 단일 파일로 축소하는 방법은 무엇입니까?

---

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/

---

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/'))

});

참조 URL : https://stackoverflow.com/questions/26273358/gulp-minify-all-css-files-to-a-single-file