Yannick Pereira-Reis bio photo

Yannick Pereira-Reis

DevOps (docker swarm, haproxy, CI/CD, ELK, prometheus, grafana, ansible, automation, RabbitMQ, LVM, MySQL replication...) and fullstack web developer Symfony 2/3/4/5 + VueJs in Valence (France).

Twitter LinkedIn Github

Sometimes when working on “frontend tasks” with gulp, we need to merge different formats such as less, scss, css into a single minified css file.

Gulp

Modules

Of course you have to install and require the good modules:

{
  "name": "project",
  "version": "0.1.0",
  "main": "gulpfile.js",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-concat": "^2.6.0",
    "gulp-less": "^3.0.3",
    "gulp-minify-css": "^1.2.1",
    "gulp-sass": "^2.0.4",
    "merge-stream": "^1.0.0"
  }
}
var gulp = require('gulp');
var sass = require('gulp-sass');
var less = require('gulp-less');
var concat = require('gulp-concat');
var minify = require('gulp-minify-css');
var merge = require('merge-stream');

Task

To do this we need to have multiple steps inside the gulp task.

  • LESS:
var lessStream = gulp.src([...])
    .pipe(less())
    .pipe(concat('less-files.less'))
;
  • SCSS/SASS:
var scssStream = gulp.src([...])
    .pipe(sass())
    .pipe(concat('scss-files.scss'))
;
  • CSS:
var cssStream = gulp.src([...])
    .pipe(concat('css-files.css'))
;
  • The final gulp task:
gulp.task('build/admin', function() {

    var lessStream = gulp.src([...])
        .pipe(less())
        .pipe(concat('less-files.less'))
    ;

    var scssStream = gulp.src([...])
        .pipe(sass())
        .pipe(concat('scss-files.scss'))
    ;
    
    var cssStream = gulp.src([...])
        .pipe(concat('css-files.css'))
    ;

    var mergedStream = merge(lessStream, scssStream, cssStream)
        .pipe(concat('styles.css'))
        .pipe(minify())
        .pipe(gulp.dest('web/css'));

    return mergedStream;
});