Minify css using Gulp

Question

I want only "app.scss" in minified version, right now I am getting all three SCSS file converted into ".min" files. Please help

var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename')

gulp.task('sass', function(){
    return gulp.src(['scss/style.scss', 'scss/variable.scss', 'scss/app.scss'])
    .pipe(sass())
    .pipe(gulp.dest('css'))
    .pipe(sass({outputStyle:'compressed'}))
    .pipe(rename({suffix:'.min'}))
    .pipe(gulp.dest('css'))
});

Answer 1

You're currently piping all three files to the same sass pipe with the same compressed setting. There are various options to fix this, including:

• use gulp-if to selectively do compressed an non-compressed calls to sass
• create different streams and use merge-stream to return them as one merged result from your task

Answer 2

What is happening is you are running all your commands on a single source blob. This causes all operations to perform on the same set of files. What you need is the output of one command into another. This is also the correct way to do it, by writing an individual task for each operation.

Use a sequence plugin to perform the tasks one after another and use another gulp.src to get the combined file. Something like this:

gulp.task('sass', function(){
    // Compile Sass
    return gulp.src(['scss/style.scss', 'scss/variable.scss', 'scss/app.scss'])
    ... bla bla ...

});

gulp.task('minify', function(){
    // Minify
    return gulp.src(['app.scss'])
    ... bla bla ...
});

gulp.task('all', function(cb){
    gulpSequence(['sass', 'minify'], cb);
});