Yannick PEREIRA-REIS bio photo

Yannick PEREIRA-REIS

Full stack web developer Symfony2, VueJs and AngularJs in Lyon (France), I also play with DevOps tools like Docker, Vagrant, Elasticsearch, Logstash, Kibana, Supervisor, ...

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