gulp将所有css文件都缩小为单个文件 [英] gulp minify all css files to a single file

问题描述

  //加载各种gulp模块
 var gulp = require（ '吞'）; 
 var concat = require（'gulp-concat'）; 
 var minifyCSS = require（'gulp-minify-css'）; 
 var autoprefixer = require（'gulp-autoprefixer'）; 
 var rename = require（'gulp-rename'）; 
 $ b $ //创建任务
 gulp.task（'css'，function（）{
 gulp.src（'src / css / ** / *。css'）
 .pipe（minifyCSS（））
.pipe（'style.min.css'））
 .pipe（autoprefixer（'last 2 version'，'safari 5'，'ie 8'，'ie 9'））
.pipe（gulp.dest（'dist / css'））
}）; 
  

如何将所有css文件从src / css缩小为dist / css / style .min.css？

解决方案

您的gulp任务缺少concat管道。

  gulp.src（'src / css / ** / *。css'）
 .pipe（minifyCSS（））
 .pipe（autoprefixer （'style.min.css'））
 .pipe（gulp.dest （'dist / css'））
  

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

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

I have gulp task script as following,

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

How to minify all the css files from src/css to a single file as dist/css/style.min.css?

解决方案

Your gulp task is missing the concat pipe.

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

Here is a very good tutorial about building with gulp:

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

这篇关于gulp将所有css文件都缩小为单个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！