Gulp + Less + Minify CSS error: concat multiple Less files? - css

Question

How do you concat multiple Less files?
For instance, I have functions.less with all the functions that I want to use them in the style.less:
functions.less:
.rotate (#deg) {
-webkit-transform: rotate(#deg * 1deg);
-moz-transform: rotate(#deg * 1deg);
-ms-transform: rotate(#deg * 1deg);
-o-transform: rotate(#deg * 1deg);
}
style.less:
.button {
.rotate (#deg: 90);
}
gulpfile.js:
// 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())
})
I will get:
Potentially unhandled rejection [2] No matching definition was found
for .rotate (#deg: 90) in file /var/www/.../style.less line no. 107
Any ideas?
EDIT:
I get this errors sometimes when I use #import:
undefined:1
SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
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
EDIT 2:
Obviously it is gulp-clean-css that is causing the problem:
// 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())
})
No error if I remove that line but then I does not minify the css anymore if I do.
Any ideas?
EDIT 3:
Entire content in gulpfile:
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 & 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'])

Answer 1

All you need to do is create a master less file and import all your less files.
So create, for example a file called master.less. Then edit this file by adding the follow instruction:
#import "functions.less";
#import "styles.less";
And thats it. Then the gulp-less does the rest!! :) It compiles al the code in one single css file.
My suggestion for your task is (this is the code i have in my project startup):
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
less = require('gulp-less'),
autoprefixer = require('autoprefixer');
concat = require('gulp-concat'),
cssnano = require('gulp-cssnano'),
browserSync = require('browser-sync');
gulp.task('less', function () {
var processors = [
autoprefixer,
cssnano
];
gulp.src(config.paths.less.src)
.pipe(less())
.pipe(postcss(processors))
.pipe(concat('bundle.min.css'))
.pipe(cssnano())
.pipe(gulp.dest('dist'))
.pipe(browserSync.reload({stream:true}))
});