Geek Answers Handbook

How to merge (rather than compile) several fewer files into one using grunt

I am having trouble finding a solution to this problem. I have a smaller app.less file, which consists of @import statements @import . Now I want to create a file with fewer files, which includes all the imported fewer files, because I want to send it to the client to compile it (yes, I have reasons to do this).

Thus, the smaller the file should not be compiled at the grunt build stage, but only be concatenated, so the client does not need to download slightly fewer files. I feel that this is a question that should have appeared for others, and when compiling less on the client, but I could not find a single solution. I don't care if concatenation happens with grunt-contrib-less or any other tool.

+4
source share
2 answers

Fewer documents says:

Use @import (inline) to include external files, but not to process them.

See Import At-Rules and @import (inline)

You can create a new file, for example concatenate.less and import the .less files with the inline . Then, if you process it, it will work just like concatenation, CSS will not be processed from it.

concatenate.less

 @import (inline) "file1.less" @import (inline) "file2.less" @import (inline) "file3.less"

And use the Grunt task, as you did, just for clarity, rename the output file extension to .less . Tested, should give you exactly what you wanted.

Nested Import

As @ seven-phase-max noted, in this case, the problem will be related to nested imports.

The decision will be grouchy - includes .

  • Use grunt-includes with the includeRegexp option to create the files listed in concatenate.less , with the already imported LESS files in some other folder.
  • Change the paths of the concatenate.less files to this folder.
  • Start your LESS compilation of the Grunt task as usual.
+7
source

if someone works with gulp,

you can just create concatenate.less as @Rene Korss sugested and use the same command as less to compile.

Fewer results for concatenate.css filename, which is misleading in our case, so I use gulp-rename to have the file name by the name I want.

 var src = 'path-to-concatenate-less-file'; var destination = 'path-to-destination'; gulp.task('concatenate-styles', function () { var compile= gulp.src(src) .pipe(less()) .pipe(rename('concatenate-all.less')) .pipe(gulp.dest(destination)) .pipe(notify("Saved file: <%= file.relative %>!")); compile.on('error', console.error.bind(console)); return compile; });

Example concatenate.less:

 @import (inline) "general.less"; @import (inline) "typography.less";
+3
source

More articles:


All Articles