Search code examples
cssgulp-jscs

gulpjs merge css and less


I'm trying to take my less files and convert them into css files, then take other css files and combine the two sets together to form one css file. I don't get any errors but the css file is never created. Is there a way to combine two different sets of css together to form one css file? Thanks in advance.

var gulp = require("gulp");
var gulpUtil = require("gulp-util");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var minify = require("gulp-minify-css");
var notify = require("gulp-notify");
var addsrc = require("gulp-add-src");

/*CSS Section*/
gulp.task("build-less", function () {

    return gulp.src([
            "Less/common.less",
            "Less/box.less",
            "Less/callout.less",
            "Less/form-controls.less",
            "Less/form.less",
            "Less/scrollbar.less",
            "Less/overflow-table.less",
            "Less/button.less",
            "Less/theme.less",
            "Less/auto-complete.less"
        ]).pipe(less())
        .pipe(addsrc([
            "Css/bootstrap.css",
                "Css/bootstrap-theme.css",
                "Distribution/Styles/theme.css",
                "Css/font-awesome.css",
                "Css/font-awesome-animation.css",
                "Css/animate.css",
                "Css/bootstrap-select.css"
        ]))
        .pipe(concat("dustball.min.css"))
        .pipe(minify())
        .pipe(gulp.dest("Destination/Styles"));
});

Solution

  • Just came across a plugin call merge2 and it worked. Below is the updated version.

    var gulp = require("gulp");
    var gulpUtil = require("gulp-util");
    var concat = require("gulp-concat");
    var uglify = require("gulp-uglify");
    var rename = require("gulp-rename");
    var less = require("gulp-less");
    var minify = require("gulp-minify-css");
    var notify = require("gulp-notify");
    var merge = require("merge2");
    
    /*CSS Section*/
    gulp.task("build-less", function () {
        var cssFiles = gulp.src([
                "Css/bootstrap.css",
                "Css/bootstrap-theme.css",
                "Distribution/Styles/theme.css",
                "Css/font-awesome.css",
                "Css/font-awesome-animation.css",
                "Css/animate.css",
                "Css/bootstrap-select.css"
            ])
            .pipe(concat("css-files.css"));
    
        var lessCssFiles = gulp.src([
                "Less/common.less",
                "Less/box.less",
                "Less/callout.less",
                "Less/form-controls.less",
                "Less/form.less",
                "Less/scrollbar.less",
                "Less/overflow-table.less",
                "Less/button.less",
                "Less/theme.less",
                "Less/auto-complete.less"
            ])
            .pipe(less())
            .pipe(concat("less-files.css"));
    
        return merge(cssFiles, lessCssFiles)
            .pipe(concat("dustball.min.css"))
            .pipe(minify())
            .pipe(gulp.dest("Distribution/Styles"));
    });