Search code examples
javascriptgulpgulp-less

gulpfile compile only the last file


I have website that using LESS files. My gulpfile.js is looks like this:

var gulp = require("gulp");
var fs = require("fs");
var less = require("gulp-less");
var watchLess = require('gulp-watch-less2');
var embedTemplates = require('gulp-angular-embed-templates');
var concat = require('gulp-concat');
var rename = require("gulp-rename");
var csso = require('gulp-csso');
var gutil = require('gulp-util');
var terser = require('gulp-terser');
var filesExist = require('files-exist');

function buildLess(arr, outputDir, outputName) {
    return gulp.src(filesExist(arr))
        .pipe(less().on('error', gutil.log))
        .pipe(rename(outputName + '.css'))
        .pipe(gulp.dest(outputDir))
        .on('error', gutil.log);
}

gulp.task('homepage', [], function () {
    return buildLess([
        "./css/homepage/reset.less",
        "./node_modules/components-font-awesome/css/font-awesome.min.css",
        "./node_modules/bootstrap/dist/css/bootstrap.css",
        "./css/bootstrap-callouts.less",
        "./css/homepage/global.less",
        "./css/fullpage-footer.less",
        "./node_modules/fullpage.js/dist/jquery.fullpage.min.css",
        "./css/Header.less",
        "./node_modules/angular-material/angular-material.css", // Only this exists on output file.
    ], './wwwroot/css/', 'homepage');
});

gulp.task('default', [
    'homepage'
], function () { });

So, all those css\less files should be convert into one big css file on path wwwroot/css/homepage.css. After inspecting this file, I found that only the last file is actuly in the output file.

Few intersting points:

  1. If I change the last file in the list, the output of the file is being changed accordingly.
  2. All the files are exists for sure (verified by using filesExist(lst)).
  3. No errors are being printed to the screen.

My npm versions:

"devDependencies": {
    "gulp": "3.9.1",
    "gulp-less": "3.5.0",
    "gulp-watch-less": "^1.0.1",
    "gulp-watch-less2": "^2.0.4",
    "gulp-angular-embed-templates": "^2.3.0",
    "gulp-concat": "2.6.1",
    "gulp-rename": "1.4.0",
    "gulp-csso": "3.0.1",
    "gulp-terser": "1.1.7",
    "files-exist": "1.1.0"
}

What I'm doing wrong?


Solution

  • Uh... just found the problem - forgot to Concat the output.

    this is the right code:

    function buildLess(arr, outputDir, outputName) {
        return gulp.src(filesExist(arr))
            .pipe(less().on('error', gutil.log))
            .pipe(concat(outputName + '.css'))
            .pipe(gulp.dest(outputDir))
            .on('error', gutil.log)
            .pipe(config.production ? csso() : gutil.noop())
            .pipe(config.production ? rename(outputName + '.min.css') : gutil.noop())
            .pipe(config.production ? gulp.dest(outputDir) : gutil.noop());
    }