title: Gulp + Less + Minify CSS error: concat multiple Less files?
body: <p>How do you concat multiple Less files?</p>
  
  <p>For instance, I have <code>functions.less</code> with all the functions that I want to use them in the <code>style.less</code>:</p>
  
  <p>functions.less:</p>
  
  <pre><code>.rotate (@deg) {
      -webkit-transform: rotate(@deg * 1deg);
      -moz-transform: rotate(@deg * 1deg);
      -ms-transform: rotate(@deg * 1deg);
      -o-transform: rotate(@deg * 1deg);
  }
  </code></pre>
  
  <p>style.less:</p>
  
  <pre><code>.button {
      .rotate (@deg: 90);
  }
  </code></pre>
  
  <p>gulpfile.js:</p>
  
  <pre><code>// Task to compile less.
  gulp.task('compile-less', function () {
    return gulp.src([
      'stylesheets/*.less'
    ])
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(concat('compiled.css'))
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('stylesheets'))
  })
  
  // Task to minify css.
  gulp.task('minify-css', function () {
    return gulp.src([
      'stylesheets/compiled.css'
    ])
    .pipe(sourcemaps.init())
    .pipe(cleanCSS({debug: true}))
    .pipe(concat('bundle.min.css'))
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('dist'))
    .pipe(livereload())
  })
  </code></pre>
  
  <p>I will get:</p>
  
  <blockquote>
    <p>Potentially unhandled rejection [2] No matching definition was found
    for <code>.rotate (@deg: 90)</code> in file /var/www/.../style.less line no. 107</p>
  </blockquote>
  
  <p>Any ideas?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I get this errors sometimes when I use <code>@import</code>:</p>
  
  <pre><code>undefined:1
  
  
  
  SyntaxError: Unexpected end of JSON input
      at JSON.parse (&lt;anonymous&gt;)
      at loadInputSourceMapFromLocalUri (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:177:15)
      at extractInputSourceMapFrom (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:116:17)
      at fetchAndApplySourceMap (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:79:10)
      at doApplySourceMaps (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:57:14)
      at applySourceMaps (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:33:5)
      at Object.callback (/var/www/.../node_modules/clean-css/lib/reader/read-sources.js:25:12)
      at doInlineImports (/var/www/.../node_modules/clean-css/lib/reader/read-sources.js:200:25)
      at Object.callback (/var/www/.../node_modules/clean-css/lib/reader/read-sources.js:324:14)
      at doInlineImports (/var/www/.../node_modules/clean-css/lib/reader/read-sources.js:200:25
  </code></pre>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>Obviously it is <code>gulp-clean-css</code> that is causing the problem:</p>
  
  <pre><code>// CSS compilation.
  var concat = require('gulp-concat')
  var cleanCSS = require('gulp-clean-css')
  var concatCss = require('gulp-concat-css') // optional
  
  gulp.task('minify-css', function () {
    return gulp.src([
      'stylesheets/style.css'
    ])
    .pipe(sourcemaps.init())
    // .pipe(cleanCSS({debug: true}))
    .pipe(concat('bundle.min.css'))
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('dist'))
    .pipe(livereload())
  })
  </code></pre>
  
  <p>No error if I remove that line but then I does not minify the css anymore if I do.</p>
  
  <p>Any ideas?</p>
  
  <p><strong>EDIT 3:</strong></p>
  
  <p>Entire content in gulpfile:</p>
  
  <pre><code>var gulp = require('gulp')
  var sourcemaps = require('gulp-sourcemaps')
  var livereload = require('gulp-livereload')
  
  // JavaScript development.
  var browserify = require('browserify')
  var babelify = require('babelify')
  var source = require('vinyl-source-stream')
  var buffer = require('vinyl-buffer')
  var uglify = require('gulp-uglify')
  
  // Less compilation.
  var less = require('gulp-less')
  
  // CSS compilation.
  var concat = require('gulp-concat')
  var cleanCSS = require('gulp-clean-css')
  var concatCss = require('gulp-concat-css') // optional
  
  // HTML compilation.
  var htmlmin = require('gulp-htmlmin')
  var path = require('path')
  var foreach = require('gulp-foreach')
  
  // Task to compile js.
  gulp.task('compile-js', function () {
    return browserify({
      extensions: ['.js', '.jsx'],
      entries:  ['./javascripts/app.js'],
      debug: true
    })
    .transform('babelify', {
      presets: ['es2015', 'es2017', 'react'],
      plugins: [
  
        // Turn async functions into ES2015 generators
        // https://babeljs.io/docs/plugins/transform-async-to-generator/
        "transform-async-to-generator"
      ]
    })
    .bundle()
    .pipe(source('bundle.min.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('dist'))
    .pipe(livereload())
  })
  
  // Task to compile less.
  gulp.task('compile-less', function () {
    return gulp.src([
      'stylesheets/*.less'
    ])
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('stylesheets'))
  })
  
  // Task to minify css.
  gulp.task('minify-css', function () {
    return gulp.src([
      'stylesheets/style.css'
    ])
    .pipe(sourcemaps.init())
    .pipe(cleanCSS({debug: true}))
    .pipe(concat('bundle.min.css'))
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('dist'))
    .pipe(livereload())
  })
  
  // Loop each html.
  // https://www.npmjs.com/package/gulp-foreach
  gulp.task('minify-html', function () {
    return gulp.src('*.html')
      .pipe(foreach(function(stream, file){
        // Get the filename.
        // https://github.com/mariusGundersen/gulp-flatMap/issues/4
        // https://nodejs.org/api/path.html#path_path_basename_p_ext
        var name = path.basename(file.path)
        return stream
          .pipe(htmlmin({
            collapseWhitespace: true,
            removeComments: true
          }))
          .pipe(concat('min.' + name))
      }))
      .pipe(gulp.dest(''))
  })
  
  // Task to copy fonts to dist.
  gulp.task('compile-fonts', function() {
    return gulp.src([
      'fonts/*',
      'node_modules/material-design-icons/iconfont/MaterialIcons-Regular.*',
      'node_modules/foundation-icon-fonts/foundation-icons.*',
    ])
    .pipe(gulp.dest('dist/fonts/'))
  })
  
  // Task to copy images to dist.
  gulp.task('compile-images', function() {
    return gulp.src([
      'images/*',
      'node_modules/jquery-ui-bundle/images/*',
    ])
    .pipe(gulp.dest('dist/images/'))
  })
  
  // Task to watch less &amp; css changes.
  gulp.task('watch', function () {
    gulp.watch('javascripts/*.js', ['compile-js'])  // Watch all the .js files, then run the js task
    gulp.watch('stylesheets/*.less', ['compile-less'])  // Watch all the .less files, then run the less task
    gulp.watch('stylesheets/*.css', ['minify-css'])  // Watch all the .css files, then run the css task
    gulp.watch('stylesheets/*.css', ['compile-fonts'])  // Watch all the .css files, then run the font task
    gulp.watch('stylesheets/*.css', ['compile-images'])  // Watch all the .css files, then run the image task
  })
  
  // Development:
  // Task when running `gulp` from terminal.
  gulp.task('default', ['watch'])
  
  // Production:
  // Task when running `gulp build` from terminal.
  gulp.task('build', ['minify-css', 'compile-fonts', 'compile-js', 'minify-html'])
  </code></pre>