Gulp how to configure it to create both a concatenated version and a minified one?

Question

css

I wondered how to configure Gulp so that it creates both a concatenated version and a minified one?
It is not always good when a minified one is created right away. I need two. Probyval create two tasks does not help!

Answer 1

gulp.dest can be used multiple times... kinda hint... + gulp.rename

Answer 2

You would show the task. There is no need to create two tasks, you can create both one and the other in one task.

Answer 3

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

Answer 4

The error takes off with what is connected,
"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 and livereload
gulp.task('connect', function() {
connect.server({
root: 'app',
livereload: true
});
});
// General task for css called by gulp command
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());
});
// Generic task for css called by gulp
// Generic task for html called by gulp
gulp.task('html', function () {
gulp.src('app/index.html')
.pipe(connect.reload() );
});
// Task of css files servant, any changes will be made by gulp watch command
gulp.task('watch',function () {
gulp.watch('css/*.css',['css'])
gulp.watch(' app/index.html',['html'])
});
// Task to serve css files, any changes will be called by gulp watch command
// Default
task gulp.task('default', ['connect', 'html', 'concatCSS', 'minifyCSS', 'watch']) ;
// Default
task // The task to bundle all css files is called by the gulp concatCSS command
gulp.task('concatCSS', function () {
gulp.src('css/*.css')
.pipe(concatCSS('bundle.css' ))
.
.pipe(gulp.dest('app/'));
});
// The task of concatenating all css files is called by the gulp concatCSS command
// The task of minifying the resulting concatenated css file is called by the gulp minifyCSS command
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 /'));
});
// The minification task for the resulting merged css file is called by the gulp minifyCSS command
Here is the error itself
... Uhoh. Got error listen EADDRINUSE ...
Error:
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)