#5821 closed defect (bug) (fixed)
Update grunt build tools - Fixes JS & CSS build process
| Reported by: |
|
Owned by: |
|
|---|---|---|---|
| Milestone: | 2.1 | Priority: | highest |
| Severity: | blocker | Version: | |
| Component: | Core | Keywords: | has-patch |
| Cc: |
Description
First up, no changes in the following affect the current Grunt build tools workflow, everything remains the same.
Gruntfile.js:
- Removes legacy
grunt watchgrunt tasks fromcssjanus,clean,copy, variablepath,grunt.event.onandgrunt:configdynamic options. There is no longer any watch tasks in the BuddyPress build tools, see r8550
- Add's grunt task option
extDot: 'last',to Grunt taskscssjanus,uglifyandcssminto allow support for files with dot/period filenames, e.g.jquery.atwho.js(previously uglify/minify this file resulted a file namedjquery.min.js)
- Removes the Grunt CSS task
cssmin:rtlandcssmin:ltrwith a singlecssmin:minifytask, we are only minifying the build folder CSS so all CSS files can be minified with a single task.
- Added JSValidate task
jsvalidate:srcto validate JavaScript files in the/srcfolder, previously JavaScript files where only validated after runninggrunt build-release.
- Grunt task
grunt buildnow usesjsvalidate:srcto verify JavaScript files in the/srcfolder, previously it was only validating JavaScript files in the/buildfolder.
CSS:
- Fixes an issue where the RTL CSS of the file
jquery.autocompletefb.csswas created using the filenamejquery-rtl.css, this is fixed with SVN rename so the filename is nowjquery.autocompletefb-rtl.cssand the associated Grunt task now fixes this with theextDot: 'last'task option.
- CSS is simplified with
BP_CSS=**/*.cssfor all CSS files with an exclusion list inBP_EXCLUDED_CSSwhich excludes RTL CSS primarily from the Grunt taskcssjanusso that standardexample.cssfiles only have have RTL files with the extension ofexample-rtl.csscreated in the/srcfolder as part ofgrunt buildandgrunt build-committasks as the RTL files are committed to the/srcrepo of BuddyPress.
JavaScript:
- The JavaScript file inclusion is simplified with
BP_JS=**/*.jsfor all JavaScript files with an exclusion list inBP_EXCLUDED_JSwhich is then excluded in the Grunt taskgrunt jsintso 3rd party JavaScript files do not fail BuddyPress JSHint standards, each JavaScript file is still validated with thegrunt jsvalidatetask though.
JShint:
- Two explicit JSHint exclusions are added to BuddyPress deprecated files to allow them to pass the Grunt task
grunt jshint(This could be switched to include them inBP_EXCLUDED_JSand was an either/or choice so I chose as they are BuddyPress "Core" files and not 3rd party to add the JSHint exclusion.
src/bp-templates/bp-legacy/js/password-verify.js
src/bp-templates/bp-legacy/js/buddypress.js
Node Dependencies:
- Updates
grunt-contrib-imageminfrom~0.7.1to~0.8.0
- Updates
grunt-wp-i18nfrom~0.4.6to~0.4.7
- Removes unused
grunt-phpunit
Line Endings:
- All CSS and JavaScript files now include a blank line end of the file inline with coding standards.
Inline docs and whitespace:
- A couple of minor docs formatting and updates
- A couple whitespace and coding formatting updates
ToDo:
- After this commit, sort the tasks alphabetically (It made the patch look like a dogs breakfast if included here)
In summary the following workflow performs the following (including order of execution):
grunt build:- Using
jsvalidate:srcvalidates all 20 JavaScript (12 Core & 8 3rd party) files in the/srcfolder - Using
jshintlints all 12 BuddyPress Core JavaScript files in the/srcfolder - Using
cssjanusconverts all 10 BuddyPress CSS files to RTL equivalents in the/srcfolder
- Using
- grunt
build-commitcallsgrunt buildtasks above and:- Using
checktextdomainto check i18n text domain for all PHP files - Using
imageminminimize all images in the/srcfolder
- Using
- grunt
build-releasecallsgrunt build-commitandgrunt buildtasks above and:- Using
clean:allcleans the/buildfolder - Using
copy:allcopies all files and folders from/srcto the/buildfolder - Using
uglifyminimizes all 20 JavaScript files (12 Core & 8 3rd party) in the/buildfolder - Using
jsvalidate:buildvalidates all 40 JavaScript files (20 Core & 20 minimized) in the/buildfolder - Using
cssminminimizes all 20 CSS files (10 LTR CSS & 10 RTL CSS) in the/buildfolder - Using
makepotcreates thebuddypress.potfile in the root of the/buildfolder - Using
exec:bbpressto SVN checkout bbPress 1.2 into the/build/bp-forumsfolder - Using
exec:bpdefaultto SVN checkout BP-Default into the/build/bp-themes/bp-defaultfolder - Using
testto run the PHPUnit Grunt task to run PHPUnit single site and multi site PHPUnit tests
- Using
Attachments (2)
Change History (10)
This ticket was mentioned in IRC in #buddypress-dev by netweb. View the logs.
11 years ago
#3
in reply to:
↑ 2
;
follow-up:
↓ 7
@
11 years ago
Replying to DJPaul:
I've only time to eyeball the changes right now, but I think it looks OK. Thanks for the patch, netweb.
Thanks :)
The line ending and other whitespace changes are always going to be committed separately from anything else, so a separate patch for those would have been helpful, but at least with Git, we can be selective with files during commits, so this isn't a big deal.
Due to weird cross platform end of line issues, the BuddyPress SVN repo would always compile two RTL CSS files with new line endings, not so via the Git repo which was a strange issue but moot now.
Whilst creating this patch and verifying CSS and JS file integrity it made sense, it also saved me having to revert the SVN repo constantly every time I ran the Grunt tasks testing this patch.
sort the tasks alphabetically
Thanks for not mixing this up into this patch. :) The original idea was to have the tasks listed in the order that they're executed in (as much as possible, anyway) so that it's easier to read the file and better understand what's going on (without having to refer to the registerTask lines constantly).
Listing things alphabetically, especially considering that some of our commands run in SOURCE_DIR and some in BUILD_DIR, I think will make things more confusing. Therefore I don't think we'll want to do this with BuddyPress, unless the other core devs feel very extremely strongly about having this in alphabetical order.
As you point out some tasks use both SOURCE_DIR and BUILD_DIR and the updated grunt jsvalidate task is a prime example, grunt jsvalidate:src is the first task ran and the grunt jsvalidate:build task is the eleventh.
A console output which can be quite long, I don't want to have to scroll to the top of the console to see which position the failed task is in, commit to memory, or have to read the task order to guesstimate where it might be in Grutfile.js, I'll reference the failed task by it's name and then go and find the task, creating this patch I was wasting loads (we are only talking seconds) of time scrolling up and down (and past) tasks where I kind of expected them to be, it's a trivial issue only saving seconds, but I find it illogical in not being sorted A-Z ;)
Removes unused grunt-phpunit
Are you sure this isn't used by the
phpunittask inside thetesttask?
Yes, I see where you are coming from in thinking that though, kind of confusing and removed in [bbPress5414] and has never existed in WordPress Core yet all three projects basically all share the same Grunt PHPUnit task configuration.
The NPM package grunt-phpunit is quite a different beast and task configuration vastly different, it was looked at to fix #5627/#WP27343 but there is currently a bug that won't allow the passing of arguments to separate single site from multisite tests along with some challenging console output display issues also.
The grunt.registerMultiTask( 'phpunit' task runs both phpunit:default and phpunit:multisite tasks passing the command phpunit and args to grunt.util.spawn and actually executing the PEAR command phpunit with args, if you don't have the PEAR PHPUnit package installed and in your system path the task fails.
You could say it is similar to how grunt:exec works, a Grunt MultiTask grunt.util.spawn could probably possibly replace exec:bbpress and exec:bpdefault tasks, that's for another day though.
// The command to execute. It should be in the system path. cmd: commandToExecute,
#6
@
11 years ago
- Owner set to djpaul
- Resolution set to fixed
- Status changed from new to closed
In 8954:
#7
in reply to:
↑ 3
@
11 years ago
Sweet :)
Replying to netweb:
Due to weird cross platform end of line issues, the BuddyPress SVN repo would always compile two RTL CSS files with new line endings, not so via the Git repo which was a strange issue but moot now.
Ahh this is the EOL SVN properties, it looks like the SVN EOL properties are manually set, incoming patch fixes this for the three files affected:
I've only time to eyeball the changes right now, but I think it looks OK. Thanks for the patch, netweb.
The line ending and other whitespace changes are always going to be committed separately from anything else, so a separate patch for those would have been helpful, but at least with Git, we can be selective with files during commits, so this isn't a big deal.
Thanks for not mixing this up into this patch. :) The original idea was to have the tasks listed in the order that they're executed in (as much as possible, anyway) so that it's easier to read the file and better understand what's going on (without having to refer to the registerTask lines constantly).
Listing things alphabetically, especially considering that some of our commands run in SOURCE_DIR and some in BUILD_DIR, I think will make things more confusing. Therefore I don't think we'll want to do this with BuddyPress, unless the other core devs feel very extremely strongly about having this in alphabetical order.
Are you sure this isn't used by the
phpunittask inside thetesttask?