Hi
On Wed, Jun 7, 2017 at 7:10 PM, Joao Pedro De Almeida Pereira
<jdealmeidapereira@pivotal.io> wrote:
> Hello Dave,
> By the description on the email, it looks like the process is very similar
> to the Grunt process that we were talking about, but without the patch, it
> is a bit hard to get more specifics.
> Can you forward the patch so we can take a look at it.
>
> We believe that every effort done to eliminate templated Javascript and CSS
> files is well worth it, and should be followed.
Odd - the patch was sent to you as well. Oh well, here it is.
> On Tue, Jun 6, 2017 at 9:39 AM, Dave Page <dpage@pgadmin.org> wrote:
>>
>> Hi
>>
>> On Mon, Jun 5, 2017 at 10:22 AM, Surinder Kumar
>> <surinder.kumar@enterprisedb.com> wrote:
>> > Hi Dave,
>> >
>> > Please find attached patch for minifying CSS files and optimize images
>> > using
>> > Webpack.
>> >
>> > Steps to run:
>> >
>> > 1) After applying patch, go to web directory and run npm install on
>> > terminal
>> > to install packages which are used to parse/minify CSS files.
>> >
>> > 2) Run npm run build which creates dist folder inside
>> > web/pgadmin/static/
>> > directory to store processed images, fonts and css files.
>> >
>> > 3. Set DEBUG = False in config_local.py and then run python pgAdmin.py
>> > to
>> > start server.
>> > I kept generated main.css and overrides.css conditional in base.html to
>> > load
>> > them only when debug mode is False
>> >
>> >
>> > After running "npm run build", following files/directories are
>> > generated:
>> >
>> > 1) main.css - about 20 vendor CSS files are packed into this file and
>> > more
>> > importantly the paths to images are preserved.
>> >
>> > 2) overrides.css - it contains bootstrap.overrides.css and pgadmin.css,
>> > they
>> > has to be packed separately and loaded after all CSS files are loaded
>> > because the purpose of these files is to override the vendor or modules
>> > css.
>> >
>> > 3) img - it contains the images used in CSS files. The name of image
>> > files
>> > can also be hashed names for caching purpose which we can use.
>> >
>> > 4) fonts - it contains the fonts used in fontawesome.css and other css
>> > files.
>> >
>> > This is a simple patch to demonstrate how CSS files will be minified
>> > with
>> > Webpack.
>>
>> I think this is a good, simple method. It handles debug v.s release,
>> and of course, any plugin modules can include their own images/CSS
>> without even having to worry about webpacking if installed later.
>>
>> > For now it minifies only vendor CSS files, I will add modules static
>> > files
>> > in the list later on.
>>
>> I think we need to do that to get a better idea of the benefits. We
>> also need to get some of the JS code in there as well (Ashesh should
>> be able to help with that - he told me he's de-templatised a lot of
>> that now).
>>
>> > Any thoughts on minifying template CSS files which are built dynamically
>> > and
>> > loaded with dependency on other modules?
>>
>> Let's look at why they are templates. Is that required, or could they
>> be made static?
>>
>> > Also, I looked into Flask-webpack which generates bundled assets using
>> > Webpack(webpack.config.js) and provide additionally global template tags
>> > to
>> > use in Jinja templates.
>> >
>> > But it might not work with latest version of Webpack as this repo is not
>> > updated since last 2 years. I need to check with latest version and I
>> > will
>> > update on this.
>>
>> Given how straightforward this seems to be, I'm not sure it's needed.
>>
>> Joao, any comments?
>>
>> Nice work - thanks!
>>
>> --
>> Dave Page
>> Blog: http://pgsnake.blogspot.com
>> Twitter: @pgsnake
>>
>> EnterpriseDB UK: http://www.enterprisedb.com
>> The Enterprise PostgreSQL Company
>
>
--
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake
EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company