2014-10-09 2 views
46

Я глотком сценария задачи следующим образом,глотка Минимизировать все CSS-файлы в один файл

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

Как Минимизировать все CSS файлы из Src/CSS в один файл как Dist/CSS/style.min .css?

+0

возможно дубликат [CSS преуменьшать и переименовать с глотком] (http://stackoverflow.com/questions/25764668/ css-minify-and-rename-with-gulp) –

+1

gulp-minify-css теперь деформируется. https://www.npmjs.com/package/gulp-minify-css – Musa

ответ

70

В вашей задаче gulp отсутствует конкатентная труба.

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

Вот очень хороший учебник о строительстве с глотком:

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

+2

Функция rename() здесь не требуется? –

+3

Я думаю, что rename() не требуется, потому что вы не хотите переименовывать существующие файлы. Вы только хотите создать новый файл, содержащий данные concat всех ваших существующих файлов * .css –

+2

Вам не нужно переименовать(), так как вы уже определяете имя выходного файла (style.min.css) в конкатентном канале , –