Bundle syncfusions custom theme generator css with gulp

[Pratura]

Hi,

when using your custom script generator I get the themes folder.

In my ASP.NET Core 2.0 app I have put the contents of the themes folder in wwwroot/css

How can I bundle the bootstrap-theme/ej.web.all.css file with my other css using gulp (probably gulp-concat-css-import)?

My current gulp setup doesn't work with your css since it includes @import 

I currently have this as my gulp.js:

const gulp = require('gulp');

const concat = require('gulp-concat');

const concatImport = require('gulp-concat-css-import')

const siteStyles = [

    "node_modules/bootstrap/dist/css/bootstrap.min.css",

    "node_modules/syncfusion-javascript/Content/ej/web/bootstrap-theme/ej.web.all.min.css",

    "node_modules/syncfusion-javascript/Content/ej/web/responsive-css/ej.responsive.css",

    "wwwroot/css/site.css"

];

const siteScripts = [    

    "node_modules/jquery/dist/jquery.min.js",

    "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",

    "node_modules/jsrender/jsrender.min.js",

    "node_modules/syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js",

    "wwwroot/js/site.js"

];

gulp.task('default', ['build-site']);

gulp.task('build-site', ['build-site-css', 'build-site-js']);

gulp.task('build-site-css', function () {

    return gulp.src(siteStyles)

        .pipe(concat('site.min.css'))

        .pipe(gulp.dest('wwwroot'));

});

gulp.task('build-site-js', function () {

    return gulp.src(siteScripts)

        .pipe(concat('site.min.js'))

        .pipe(gulp.dest('wwwroot'));

});

[Prem Kumar Madhan Raj]

Hi Pratura,   

  

Thanks for contacting Syncfusion Support.   

  

We have checked with your query “to bundle the bootstrap-theme/ej.web.all.min.css file with my other CSS using gulp”. Since in ej.web.all.min.css file, the CSS styles will be imported from ej.theme.min.css and ej.widgets.core.min.css file, while bundling the ej.web.all.min.css file styles will not be bundled instead only importing lines will be added. So, we request you to make use of ej.theme.min.css and ej.widgets.core.min.css files to bundle the EJ controls CSS styles as shown in the below code snippet.   

  

var siteStyles = [   

    "./node_modules/bootstrap/dist/css/bootstrap.min.css",   

    "./node_modules/syncfusion-javascript/Content/ej/web/ej.widgets.core.min.css",   

    "./node_modules/syncfusion-javascript/Content/ej/web/bootstrap-theme/ej.theme.min.css",   

    "./node_modules/syncfusion-javascript/Content/ej/web/responsivecss/ej.responsive.css",   

    "wwwroot/css/site.css"   

];   

  

For your convenience, we have also created a simple sample based on your requirement and attached the sample in the below link.   

  

Sample link: https://www.syncfusion.com/downloads/support/forum/130015/ze/Sample_Bundling-1267543210   

  

In the above sample, all the above-mentioned CSS files will be bundled into a single CSS file (site.min.css) under www.root folder. Please note that the icon files should be copied to the destination of the site.min.css file only after that the EJ icons will be displayed in the corresponding controls. Please add the below code in your gulpfile.js file in your application to copy the icon file to the site.min.css file destination.   

  

gulp.task('copy-icons', function () {   

    gulp.src('./node_modules/syncfusion-javascript/Content/ej/web/common-images/**')   

        .pipe(gulp.dest('./wwwroot/common-images'));   

});     

  

Regards,   

Prem Kumar. M

[Pratura]

Thank you for the help Kumar.

This works most of the time.

I have added the code for common-images too.

But for some reason, I sometimes get garbled icons on the grid, dropdowns etc

There are no missing request items on the network tab (chrome dev tools) and no errors.

And it happens 1 out of 5 times starting the app, so I can't figure what causes the icon problem.

Can you help?

[Prem Kumar Madhan Raj]

Hi Pratura, 

 

We have checked with your query “sometimes get garbled icons on the grid, dropdowns etc”. This is a general issue caused with CSS using font-icons also queries regarding this issue has been raised regarding this in Git-Hub too but still an exact solution is not available. Also, we are analyzing on this to get the solution and we will update you once we got the solution. Please refer the below GitHub link.  

 

Git-Hub Link: https://github.com/FortAwesome/Font-Awesome/issues/10842 

 

Regards, 

 

Prem Kumar M