Update/grunt to gulp: introduce js:uglify task #3647

jubstuff · 2016-04-11T20:10:37Z

Fixes #3487 .

Changes proposed in this Pull Request:

Introduce the js:uglify task to minify all .js files.
Load minified files when SCRIPT_DEBUG isn't defined or is false.

Make sure your changes respect WordPress' coding standards.
[x ] Did you make changes, or create a new .js file? If Grunt is installed on your testing environment, run grunt jshint before to commit your changes. It will allow you to detect errors in Javascript files.
[x ] Did you create a new action or filter? Add inline documentation to help others understand how to use the action or the filter.
[x ] Create unit tests if you can. If you're not familiar with Unit Testing, you can check this tutorial.

There were already some minified scripts included in the repository. I removed them to avoid maintaining a blacklist in the js:uglify Gulp task.

… or true

jeherve · 2016-04-12T07:25:21Z

Repeating the same $min definition so many times doesn't seem ideal. Wouldn't there be a way to check once, and then refer to that check every time we enqueue a js file?

I would also recommend considering a few other factors in that check:

Are we on WordPress.com? If so, do not add min.
Is Jetpack in development mode? If so, do not add min
Include a filter allowing third-party tools to bypass minification.

jubstuff · 2016-04-13T05:20:02Z

Thank you @jeherve .
I've updated the code based on your suggestions.

Do you think something like that could work?

jeherve · 2016-04-13T12:08:46Z

One potential issue here is that class.jetpack.php doesn't exist on WordPress.com. As a result, when we merge module files back to WordPress.com, every Jetpack::get_static_asset_suffix(); call will return an error, as the function won't exist on WordPress.com.

How about having no asset suffix by default, and add it if a specific filter is set to true?

eliorivero · 2016-04-13T14:17:49Z

It's not entirely convenient to be able to debug a JS file only when SCRIPT_DEBUG is set. Users could have a JS issue on a site and they either don't know how to or can't add the constant to the wp-config.php file. Is there another technique we can better rely on to be able to debug minified JS in production sites?

jubstuff · 2016-04-13T20:47:57Z

@jeherve
Do you mean something along these lines?

$min = apply_filters( 'jetpack_load_minified_assets', false ) ? Jetpack::get_static_asset_suffix() : '';

@eliorivero
We could introduce a $_GET parameter to override the current state. So, for instance, a URL like http://mywebsite.com/?jetpack_load_unminified_asset=1 would load the unminified scripts.

For debugging purposes we could also add sourcemaps to the js:uglify Gulp task, if that could help

What do you think?

eliorivero · 2016-04-13T20:57:28Z

Right, source maps are a convenient solution for debugging minified JS (dismiss the $_GET var).

jubstuff · 2016-04-16T12:22:18Z

I've tried another approach leveraging the script_loader_tag filter.
Instead of having to repeat the min suffix in eachwp_enqueue_script, the filter adds it when needed.

In this way the process is transparent: developers could use wp_enqueue_script without extra overhead.

beaulebens · 2016-04-18T18:55:52Z

class.jetpack.php

+		 */
+		$load_minified_scripts = apply_filters( 'jetpack_load_minified_scripts', $load_minified_scripts );
+
+		if ( false !== strpos( $src, $jetpack_url ) && $load_minified_scripts ) {


This block feels pretty brittle, and prone to problems (especially if there are files along the lines of core.jsdom.js or something that has .js in amongst it.

You might need to parse the URLs a bit deeper and look at the basename, then regex or whatever to see that specifically the last 3 characters are .js.

Instead of simply replacing every `.js` that is present in the file name, check just for the last three characters.

jubstuff · 2016-04-19T21:24:47Z

I have updated the code to reflect @beaulebens suggestions and added some more unit tests.

beaulebens · 2016-04-19T23:10:31Z

class.jetpack.php

+		$load_minified_scripts = apply_filters( 'jetpack_load_minified_scripts', $load_minified_scripts );
+
+		if ( false !== strpos( $src, $jetpack_url ) && $load_minified_scripts ) {
+			$file_name = basename( parse_url( $src, PHP_URL_PATH ) );


need to strtolower() just in case?

Or on the line below (just for the comparison) to avoid "changing" the filename for case-sensitive OSes.

The net result of the pull request was showing a lot of modified files, the only changes being the replacement of single quotes with double quotes, that were used for string interpolation.

There was already a method used to minify assets. So it's better to merge the two and keep functionality in one place

The existing test for Jetpack assets would ignore files from the `_inc` folder and hardcoded Jetpack folder name.

mdawaffe · 2016-05-20T15:14:35Z

class.jetpack.php

 		$file              = "{$base}/{$path}";
-		$full_path         = JETPACK__PLUGIN_DIR . substr( $file, 8 );
+		$full_path         = JETPACK__PLUGIN_DIR . substr( $file, strlen( basename( JETPACK__PLUGIN_DIR ) ) + 1 );


dereksmart · 2016-11-08T16:22:00Z

Closing since we're already using uglify in Gulp

jubstuff added 5 commits April 8, 2016 22:59

Grunt-to-gulp: add js:uglify task

29ac3df

Grunt-to-gulp: fix spacing in parenthesis

803dbef

Grunt-to-gulp: remove minified js files

5f817db

There were already some minified scripts included in the repository. I removed them to avoid maintaining a blacklist in the js:uglify Gulp task.

Grunt-to-gulp: load minified JS files when SCRIPT_DEBUG isn't defined…

08633c1

… or true

Grunt-to-gulp: load js:uglify in the default task

873efc3

samhotchkiss added the Test on WP.com label Apr 11, 2016

georgestephanis added the [Status] In Progress label Apr 11, 2016

jeherve added General [Focus] Performance Trial Project [Status] Needs Review To request a review from Crew. Label will be renamed soon. and removed [Status] In Progress labels Apr 12, 2016

Grunt-to-gulp: centralize check for loading unminified assets

8cafa84

jubstuff added 3 commits April 13, 2016 23:30

Grunt-to-gulp: add sourcemaps to js:uglify task

f46939e

Grunt-to-gulp: remove $min suffix from .js files

e21472b

Grunt-to-gulp: load minified scripts through script_loader_tag

74d2420

beaulebens reviewed Apr 18, 2016
View reviewed changes

Grunt-to-gulp: make .js replacing with .min.js more robust

e0c7621

Instead of simply replacing every `.js` that is present in the file name, check just for the last three characters.

beaulebens reviewed Apr 19, 2016
View reviewed changes

Grunt-to-gulp: manage uppercase JS file extension

59fe2c6

jeherve added this to the 4.1 milestone Apr 28, 2016

kraftbj removed the Test on WP.com label May 5, 2016

matticbot added the Touches WP.com Files label May 5, 2016

jubstuff added 7 commits May 15, 2016 22:58

Grunt-to-gulp: revert quotes to single quotes

45de7ef

The net result of the pull request was showing a lot of modified files, the only changes being the replacement of single quotes with double quotes, that were used for string interpolation.

Grunt-to-gulp: remove unnecessary method to minify assets

526c61f

There was already a method used to minify assets. So it's better to merge the two and keep functionality in one place

Grunt-to-gulp: use the full URL to test for Jetpack assets

f6d5b82

The existing test for Jetpack assets would ignore files from the `_inc` folder and hardcoded Jetpack folder name.

Grunt-to-gulp: check and filter whether to load min assets

90a081d

Grunt-to-gulp: make minifying work with different folder name

186706d

Grunt-to-gulp: add unit tests

92cd232

Grunt-to-gulp: manage files with uppercase extension

43d5c88

mdawaffe reviewed May 20, 2016
View reviewed changes

jeherve modified the milestones: 4.2, 4.1 Jun 17, 2016

jeherve modified the milestones: 4.3, 4.2 Jul 6, 2016

richardmuscat modified the milestones: 4.3, 4.4 Jul 7, 2016

dereksmart closed this Nov 8, 2016

dereksmart removed the [Status] Needs Review To request a review from Crew. Label will be renamed soon. label Nov 8, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update/grunt to gulp: introduce js:uglify task #3647

Update/grunt to gulp: introduce js:uglify task #3647

jubstuff commented Apr 11, 2016

jeherve commented Apr 12, 2016

jubstuff commented Apr 13, 2016

jeherve commented Apr 13, 2016

eliorivero commented Apr 13, 2016

jubstuff commented Apr 13, 2016

eliorivero commented Apr 13, 2016

jubstuff commented Apr 16, 2016

beaulebens Apr 18, 2016

jubstuff commented Apr 19, 2016

beaulebens Apr 19, 2016

beaulebens Apr 19, 2016

mdawaffe May 20, 2016

dereksmart commented Nov 8, 2016

Update/grunt to gulp: introduce js:uglify task #3647

Update/grunt to gulp: introduce js:uglify task #3647

Conversation

jubstuff commented Apr 11, 2016

Changes proposed in this Pull Request:

jeherve commented Apr 12, 2016

jubstuff commented Apr 13, 2016

jeherve commented Apr 13, 2016

eliorivero commented Apr 13, 2016

jubstuff commented Apr 13, 2016

eliorivero commented Apr 13, 2016

jubstuff commented Apr 16, 2016

beaulebens Apr 18, 2016

Choose a reason for hiding this comment

jubstuff commented Apr 19, 2016

beaulebens Apr 19, 2016

Choose a reason for hiding this comment

beaulebens Apr 19, 2016

Choose a reason for hiding this comment

mdawaffe May 20, 2016

Choose a reason for hiding this comment

dereksmart commented Nov 8, 2016