Gulp как настроить что б он создавал и конкатенируемую версию и минифицируемую?

Question

[Леонид Кузнецов]

Задался вопросом как настроить Gulp что б он создавал и конкатенируемую версию и минифицируемую?
Не всегда хорошо когда сразу создаеться минифицируемая. Мне надо две. Пробывал создать два таска не помогает!

Answer 1

[Сергей Протько]

gulp.dest можно использовать несколько раз... как бы намекаю... + gulp.rename

Answer 2

[_ _]

Вы бы таск показали. Два таска создавать незачем, можно в одном таске создавать и одну и другую.

Answer 3

[ModestesGonze]

gulp.task('css', function () {
    gulp.src('откуда берем')
    .pipe(concatCSS('название файла'))
    .pipe(gulp.dest('куда сохраняем конкат версию'))
    .pipe(minifyCSS())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(gulp.dest('куда сохраняем мин версию'));
});

Comments

[Леонид Кузнецов]

Спасибо

Answer 4

[Леонид Кузнецов]

Ошибка вылетает непойму с чем связано,
"use strict";
var gulp = require('gulp'),
concatCSS = require('gulp-concat-css'),
rename = require('gulp-rename'),
watch = require('gulp-watch'),
notify = require('gulp-notify'),
autoprefixer = require('gulp-autoprefixer'),
livereload = require('gulp-livereload'),
connect = require('gulp-connect'),
minifyCSS = require('gulp-minify-css');

// gulp connect и livereload
gulp.task('connect', function() {
connect.server({
root: 'app',
livereload: true
});
});
// gulp connect и livereload

// Общий таск для css вызываеться командой gulp
gulp.task('css', function () {
gulp.src('css/*.css')
.pipe(concatCSS('bundle.css'))
.pipe(autoprefixer('last 15 version'))
.pipe(minifyCSS())
.pipe(rename('bundle.min.css'))
.pipe(livereload())
// .pipe(notify("Done!"))
.pipe(gulp.dest('app/')),
.pipe(connect.reload());
});
// Общий таск для css вызываеться командой gulp

//Общий таск для html вызываеться командой gulp
gulp.task('html', function () {
gulp.src('app/index.html')
.pipe(connect.reload());
});
//Общий таск для html вызываеться командой gulp

// Таск служки css файлов, любые изменения будут произведены вызываеться командой gulp watch
gulp.task('watch',function () {
gulp.watch('css/*.css',['css'])
gulp.watch('app/index.html',['html'])
});
// Таск служки css файлов, любые изменения будут произведены вызываеться командой gulp watch

// Таск по умолчанию
gulp.task('default', ['connect', 'html', 'concatCSS', 'minifyCSS', 'watch']);
// Таск по умолчанию

// Таск обьеденения всех css файлов вызываеться командой gulp concatCSS
gulp.task('concatCSS', function () {
gulp.src('css/*.css')
.pipe(concatCSS('bundle.css'))
.pipe(autoprefixer('last 15 version'))
.pipe(notify("Done!"))
.pipe(gulp.dest('app/'));
});
// Таск обьеденения всех css файлов вызываеться командой gulp concatCSS

// Таск минификации полученного обьедененного css файла вызываеться командой gulp minifyCSS
gulp.task('minifyCSS', function () {
gulp.src('css/*.css')
.pipe(minifyCSS())
.pipe(rename('bundle.min.css'))
.pipe(autoprefixer('last 15 version'))
.pipe(notify("Done!"))
.pipe(gulp.dest('app/'));
});
// Таск минификации полученного обьедененного css файла вызываеться командой gulp minifyCSS

Вот сама ошибка
... Uhoh. Got error listen EADDRINUSE ...
Error: listen EADDRINUSE
at errnoException (net.js:904:11)
at Server._listen2 (net.js:1042:14)
at listen (net.js:1064:10)
at Server.listen (net.js:1138:5)
at Server.listen (C:\WebDev\Education\node_modules\gulp-livereload\node_modules\tiny-lr\lib\server.js:154:15)
at Function.exports.listen (C:\WebDev\Education\node_modules\gulp-livereload\gulp-livereload.js:68:12)
at Function.exports.changed (C:\WebDev\Education\node_modules\gulp-livereload\gulp-livereload.js:88:20)
at Transform.reload._transform (C:\WebDev\Education\node_modules\gulp-livereload\gulp-livereload.js:24:13)
at Transform._read (_stream_transform.js:179:10)
at Transform._write (_stream_transform.js:167:12)

Comments

[karbunkul]

Убери строку вызова плагина gulp-livereload, и вызов .pipe(livereload()) в задаче CSS. gulp-connect будет вполне предостаточно для поставленной задачи. .pipe(connect.reload()) и .pipe(livereload()) делают идентичную работу