[RFC] Use assetic for assets (.css|.js) file management

Note: We are moving the topics of this forum and it will be deleted at some point

Publish your own request for comments/change or patches for the next version of phpBB. Discuss the contributions and proposals of others. Upcoming releases are 3.2/Rhea and 3.3.
User avatar
brunoais
Registered User
Posts: 958
Joined: Fri Dec 18, 2009 3:55 pm

Re: [RFC] Use assetic for assets (.css|.js) file management

Post by brunoais » Tue Jul 15, 2014 8:41 am

There's a live update extension... I found that while trying to understand what gulp is. I still don't really know about using it. I'll get some time around to understand that.

User avatar
callumacrae
Infrastructure Team
Infrastructure Team
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [RFC] Use assetic for assets (.css|.js) file management

Post by callumacrae » Tue Jul 15, 2014 8:48 am

Nicofuma wrote:
callumacrae wrote:Are you going to suggest packaging a test library so that front-end developers don't have to install PHPUnit?
It's already the case: composer and travis...

But I'm not sure that we can compare composer and front-end tools because the composer dependencies change at least once per release, you rarely have to run composer install but with front-end tools you have to run your gulp compile each time a styling PR is merged?
Nah, I'd actually suggest including the compiled assets in the repo for this reason—only people making front-end changes would need to have front-end tools installed. Easy to resolve merge conflicts in the resulting files, you just run `gulp compile` again (or they could be un-minified during development).
brunoais wrote:There's a live update extension... I found that while trying to understand what gulp is. I still don't really know about using it. I'll get some time around to understand that.
You're thinking of livereload, but that's not what that does. livereload injects CSS and JS changes into the browser, and refreshes the page when you change the HTML.

There is watch functionality built in (provided by gaze), but Gulp needs to be running to use it, which isn't worth it unless you're making multiple changes.

Check out my article on Smashing Magazine for more on Gulp.
Made by developers, for developers!
My blog

Nicofuma
3.2 Release Manager
3.2 Release Manager
Posts: 297
Joined: Sun Apr 13, 2014 1:40 am
Location: Paris

Re: [RFC] Use assetic for assets (.css|.js) file management

Post by Nicofuma » Tue Jul 15, 2014 9:12 am

callumacrae wrote: Nah, I'd actually suggest including the compiled assets in the repo for this reason—only people making front-end changes would need to have front-end tools installed. Easy to resolve merge conflicts in the resulting files, you just run `gulp compile` again (or they could be un-minified during development).
okay
Member of the phpBB Development-Team
No Support via PM

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 788
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [RFC] Use assetic for assets (.css|.js) file management

Post by hanakin » Tue Jul 15, 2014 4:15 pm

late to the discussion, but the way I see build tools working this will not matter. You have a development version and a production version.
During development you have an unminified/uncompressed set of css files that are produced to work with. You can then write a test to ensure that the timestamp of all generated css files are newer than the newest less file to ensure that the PR passes. Then upon release a minified/compressed version of the css files will be generated by a dev that would be the official file that is packaged. The development version will still be included but labeled and separated from the minified version.

so something like

Code: Select all

+assets
 + css
     - development css files
     + minified
        - minified css files
  + less
      -less files

User avatar
callumacrae
Infrastructure Team
Infrastructure Team
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [RFC] Use assetic for assets (.css|.js) file management

Post by callumacrae » Tue Jul 15, 2014 4:47 pm

No need for an uncompressed version, source maps are amazing and supported by all the browsers commonly used for front-end development.

Project I'm working on right now uses browserify and minifies its JS, and I can view all the separate JS files in the inspector as if they were never touched by browserify or the minifier.
Made by developers, for developers!
My blog

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 788
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [RFC] Use assetic for assets (.css|.js) file management

Post by hanakin » Tue Jul 15, 2014 7:47 pm

callumacrae wrote:No need for an uncompressed version, source maps are amazing and supported by all the browsers commonly used for front-end development.

Project I'm working on right now uses browserify and minifies its JS, and I can view all the separate JS files in the inspector as if they were never touched by browserify or the minifier.
I agree that source maps coupled with workspaces in chrome are extremely powerful and versatile. But this is a workflow and not ideally suited for all so an uncompressed version should still be included, exspecially for those who do not wish to use a preprocessor.

Post Reply