From be54167b60a1f444435ec65c0609bab70cd43c5b Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 10 Nov 2016 14:57:07 +0300 Subject: [PATCH] refactoring for css-embedded images --- .../main/resources/less/asc-mixins.less | 16 ++--- .../resources/less/combo-border-size.less | 2 +- apps/common/main/resources/less/loadmask.less | 2 +- .../common/main/resources/less/variables.less | 6 +- .../main/resources/less/toolbar.less | 2 +- build/Gruntfile.js | 64 ++++--------------- build/documenteditor.json | 17 ++--- build/presentationeditor.json | 17 ++--- build/spreadsheeteditor.json | 19 ++---- 9 files changed, 47 insertions(+), 98 deletions(-) diff --git a/apps/common/main/resources/less/asc-mixins.less b/apps/common/main/resources/less/asc-mixins.less index 382d03dbf..92d940dc0 100644 --- a/apps/common/main/resources/less/asc-mixins.less +++ b/apps/common/main/resources/less/asc-mixins.less @@ -125,13 +125,13 @@ /**/ .background-ximage(@image, @image2x, @w: auto, @h: auto) { - background-image: e(%("url(%s)",@image)); + background-image: data-uri(%("%s",@image)); @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) { - background-image: e(%("url(%s)",@image2x)); + background-image: data-uri(%("%s",@image2x)); background-size: @w @h; } } @@ -139,13 +139,13 @@ @common-controls-width: 100px; .img-commonctrl, .theme-colorpalette .color-transparent, .palette-color-ext .color-transparent, .dropdown-menu li .checked:before, .input-error:before { - background: e(%("url(%s)",'@{common-image-path}/@{common-controls}')) no-repeat; + background: data-uri(%("%s",'@{common-image-path}/@{common-controls}')) no-repeat; @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) { - background-image: e(%("url(%s)",'@{common-image-path}/@{common-controls2x}')); + background-image: data-uri(%("%s",'@{common-image-path}/@{common-controls2x}')); background-size: @common-controls-width auto; } } @@ -153,13 +153,13 @@ @img-toolbarmenu-width: 60px; .img-toolbarmenu { - background: e(%("url(%s)",'@{app-image-path}/toolbar-menu.png')) no-repeat; + background: data-uri(%("%s",'@{app-image-path}/toolbar-menu.png')) no-repeat; @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) { - background-image: e(%("url(%s)",'@{app-image-path}/toolbar-menu@2x.png')); + background-image: data-uri(%("%s",'@{app-image-path}/toolbar-menu@2x.png')); background-size: @img-toolbarmenu-width auto; } } @@ -167,13 +167,13 @@ @img-colorpicker-width: 205px; .img-colorpicker, .color-transparent, .hsb-colorpicker .empty-color:before { - background: e(%("url(%s)",'@{common-image-path}/hsbcolorpicker/hsb-colorpicker.png')) no-repeat; + background: data-uri(%("%s",'@{common-image-path}/hsbcolorpicker/hsb-colorpicker.png')) no-repeat; @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) { - background-image: e(%("url(%s)",'@{common-image-path}/hsbcolorpicker/hsb-colorpicker@2x.png')); + background-image: data-uri(%("%s",'@{common-image-path}/hsbcolorpicker/hsb-colorpicker@2x.png')); background-size: @img-colorpicker-width auto; } } \ No newline at end of file diff --git a/apps/common/main/resources/less/combo-border-size.less b/apps/common/main/resources/less/combo-border-size.less index ba3f84f32..35445b6fa 100644 --- a/apps/common/main/resources/less/combo-border-size.less +++ b/apps/common/main/resources/less/combo-border-size.less @@ -23,6 +23,6 @@ } img, .image { - background: ~"url(@{common-image-path}/combo-border-size/BorderSize.png) no-repeat 0 0 #fff"; + background: ~"url(@{common-image-const-path}/combo-border-size/BorderSize.png) no-repeat 0 0 #fff"; } } diff --git a/apps/common/main/resources/less/loadmask.less b/apps/common/main/resources/less/loadmask.less index ce5db0aa1..443bf7283 100644 --- a/apps/common/main/resources/less/loadmask.less +++ b/apps/common/main/resources/less/loadmask.less @@ -28,7 +28,7 @@ } .asc-loadmask-image { - background-image: ~"url(@{common-image-path}/load-mask/loading.gif)"; + background-image: ~"url(@{common-image-const-path}/load-mask/loading.gif)"; height: 33px; width: 33px; float: left; diff --git a/apps/common/main/resources/less/variables.less b/apps/common/main/resources/less/variables.less index 11b520cb4..df9782b2a 100644 --- a/apps/common/main/resources/less/variables.less +++ b/apps/common/main/resources/less/variables.less @@ -5,8 +5,10 @@ // Paths // ------------------------- -@app-image-path: "resources/img"; -@common-image-path: "../../common/main/resources/img"; +@app-image-path: "../../resources/img"; // use for data-uri(...) +@common-image-path: "../../../../common/main/resources/img"; // use for data-uri(...) +@app-image-const-path: "../../resources/img"; // use for url(...) +@common-image-const-path: "../../../../common/main/resources/img"; // use for url(...) // Grays // ------------------------- diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less index 5bc1d5aed..d94ce1615 100644 --- a/apps/spreadsheeteditor/main/resources/less/toolbar.less +++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less @@ -245,7 +245,7 @@ #id-toolbar-mnu-item-border-width { .border-size-item { - background: ~"url(@{app-image-path}/toolbar/BorderSize.png) repeat-x scroll 0 0"; + background: ~"url(@{app-image-const-path}/toolbar/BorderSize.png) repeat-x scroll 0 0"; width: 80px; height: 20px; margin-top: -3px; diff --git a/build/Gruntfile.js b/build/Gruntfile.js index 657dfe6a0..0f936f903 100644 --- a/build/Gruntfile.js +++ b/build/Gruntfile.js @@ -141,8 +141,10 @@ module.exports = function(grunt) { production: { options: { compress: true, + ieCompat: false, + modifyVars: packageFile['main']['less']['vars'], plugins: [ - // new (require('less-plugin-clean-css'))() + new (require('less-plugin-clean-css'))() ] }, files: { @@ -158,10 +160,16 @@ module.exports = function(grunt) { }, replace: { - fixLessUrl: { - src: ['<%= pkg.main.less.files.dest %>'], + writeVersion: { + src: ['<%= pkg.api.copy.script.dest %>' + '/documents/api.js'], overwrite: true, - replacements: packageFile['main']['less']['replacements'] + replacements: [{ + from: /(\#{2}BN\#)/, + to: function(matchedWord, index, fullText, regexMatches) { + // return content.replace(/(\#{2}BN\#)/, "." + (process.env['BUILD_NUMBER'] || packageFile.build)); + return "." + (process.env['BUILD_NUMBER'] || packageFile.build); + } + }] } }, @@ -207,52 +215,6 @@ module.exports = function(grunt) { }); }); - grunt.registerTask('lessPostFix', function(){ - if (packageFile.main.less.embedImages) { - grunt.config('replace.urlToUri', { - src: ['<%= pkg.main.less.files.dest %>'], - overwrite: true, - replacements: [{ - from: /url\(\'?(?!data\:image)([^\)\'\"]+)\'?/g, - to: function(matchedWord, index, fullText, regexMatches) { - return 'data-uri(\'' + regexMatches + '\''; - } - },{ - from: /filter\:\s?alpha\(opacity\s?=\s?[0-9]{1,3}\)\;/g, - to: '' - }] - }); - - grunt.config('less.uriPostfix', { - options: { - compress: true, - ieCompat: false - }, - files: { - "<%= pkg.main.less.files.dest %>": "<%= pkg.main.less.files.dest %>" - } - }); - - grunt.config('clean.files', '<%= pkg.main.clean %>/resources/img'); - - grunt.task.run('replace:urlToUri', 'less:uriPostfix', 'clean'); - } - - grunt.config('replace.writeVersion', { - src: ['<%= pkg.api.copy.script.dest %>' + '/documents/api.js'], - overwrite: true, - replacements: [{ - from: /(\#{2}BN\#)/, - to: function(matchedWord, index, fullText, regexMatches) { - // return content.replace(/(\#{2}BN\#)/, "." + (process.env['BUILD_NUMBER'] || packageFile.build)); - return "." + (process.env['BUILD_NUMBER'] || packageFile.build); - } - }] - }); - - grunt.task.run('replace:writeVersion'); - }); - grunt.registerTask('mobile-app-init', function() { grunt.initConfig({ pkg: grunt.file.readJSON(defaultConfig), @@ -385,7 +347,7 @@ module.exports = function(grunt) { grunt.registerTask('deploy-jsrsasign', ['jsrsasign-init', 'clean', 'copy']); grunt.registerTask('deploy-requirejs', ['requirejs-init', 'clean', 'uglify']); - grunt.registerTask('deploy-app-main', ['main-app-init', 'clean', 'less', 'replace:fixLessUrl', 'requirejs', 'concat', 'imagemin', 'copy', 'lessPostFix']); + grunt.registerTask('deploy-app-main', ['main-app-init', 'clean', 'imagemin', 'less', 'requirejs', 'concat', 'copy', 'replace:writeVersion']); grunt.registerTask('deploy-app-mobile', ['mobile-app-init', 'clean', 'uglify', 'cssmin:styles', 'copy']); grunt.registerTask('deploy-app-embed', ['embed-app-init', 'clean:prebuild', 'uglify', 'less', 'replace:fixLessUrl', 'copy', 'clean:postbuild']); diff --git a/build/documenteditor.json b/build/documenteditor.json index 770265acb..7f29d0d04 100644 --- a/build/documenteditor.json +++ b/build/documenteditor.json @@ -147,21 +147,16 @@ } }, "less": { - "embedImages": true, "files": { "src": "../apps/documenteditor/main/resources/less/app.less", "dest": "../deploy/web-apps/apps/documenteditor/main/resources/css/app.css" }, - "replacements": [ - { - "from": "../../common/main/resources/img/", - "to": "../img/" - }, - { - "from": "resources/img/", - "to": "../img/" - } - ] + "vars": { + "app-image-const-path": "'../img'", + "common-image-const-path": "'../img'", + "app-image-path": "'../../../../../deploy/web-apps/apps/documenteditor/main/resources/img'", + "common-image-path": "'../../../../../deploy/web-apps/apps/documenteditor/main/resources/img'" + } }, "imagemin": { "images-app": [ diff --git a/build/presentationeditor.json b/build/presentationeditor.json index dd7ec38cd..b7b64f12e 100644 --- a/build/presentationeditor.json +++ b/build/presentationeditor.json @@ -151,21 +151,16 @@ } }, "less": { - "embedImages": true, "files": { "src": "../apps/presentationeditor/main/resources/less/app.less", "dest": "../deploy/web-apps/apps/presentationeditor/main/resources/css/app.css" }, - "replacements": [ - { - "from": "../../common/main/resources/img/", - "to": "../img/" - }, - { - "from": "resources/img/", - "to": "../img/" - } - ] + "vars": { + "app-image-const-path": "'../img'", + "common-image-const-path": "'../img'", + "app-image-path": "'../../../../../deploy/web-apps/apps/presentationeditor/main/resources/img'", + "common-image-path": "'../../../../../deploy/web-apps/apps/presentationeditor/main/resources/img'" + } }, "imagemin": { "images-app": [ diff --git a/build/spreadsheeteditor.json b/build/spreadsheeteditor.json index ffbe55ce3..f54beb657 100644 --- a/build/spreadsheeteditor.json +++ b/build/spreadsheeteditor.json @@ -1,7 +1,7 @@ { "name": "spreadsheeteditor", "version": "4.7.0", - "build": 877, + "build": 878, "homepage": "http://www.onlyoffice.com", "private": true, "sdk": { @@ -158,21 +158,16 @@ } }, "less": { - "embedImages": true, "files": { "src": "../apps/spreadsheeteditor/main/resources/less/app.less", "dest": "../deploy/web-apps/apps/spreadsheeteditor/main/resources/css/app.css" }, - "replacements": [ - { - "from": "../../common/main/resources/img/", - "to": "../img/" - }, - { - "from": "resources/img/", - "to": "../img/" - } - ] + "vars": { + "app-image-const-path": "'../img'", + "common-image-const-path": "'../img'", + "app-image-path": "'../../../../../deploy/web-apps/apps/spreadsheeteditor/main/resources/img'", + "common-image-path": "'../../../../../deploy/web-apps/apps/spreadsheeteditor/main/resources/img'" + } }, "imagemin": { "images-app": [