From b400b05c3f005f0f4b8e7b989c609e90b7a556d9 Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Tue, 30 Aug 2016 16:38:49 +0200 Subject: [PATCH] use webpack to build less --- .../config/webpack/webpack.config.base.js | 12 ++++-- server/sonar-web/gulpfile.js | 38 ------------------- server/sonar-web/package.json | 14 +++---- server/sonar-web/scripts/build.js | 19 ++++++++-- server/sonar-web/src/main/js/main/app.js | 2 + .../main/less/components/navigator/base.less | 4 +- .../less/components/navigator/filters.less | 4 +- .../src/main/less/components/select-list.less | 2 +- .../src/main/less/components/source.less | 2 +- .../sonar-web/src/main/less/deprecated.less | 10 ++--- .../sonar-web/src/main/less/init/icons.less | 10 ++--- .../sonar-web/src/main/less/init/tables.less | 6 +-- .../src/main/less/pages/dashboard.less | 4 +- .../src/main/less/select2-sonar.less | 6 +-- server/sonar-web/src/main/less/select2.less | 16 ++++---- server/sonar-web/src/main/less/style.less | 36 +++++++++--------- 16 files changed, 82 insertions(+), 103 deletions(-) delete mode 100644 server/sonar-web/gulpfile.js diff --git a/server/sonar-web/config/webpack/webpack.config.base.js b/server/sonar-web/config/webpack/webpack.config.base.js index 2e0dcc48236..e5ae5336916 100644 --- a/server/sonar-web/config/webpack/webpack.config.base.js +++ b/server/sonar-web/config/webpack/webpack.config.base.js @@ -2,6 +2,7 @@ var path = require('path'); var webpack = require('webpack'); var autoprefixer = require('autoprefixer'); +var ExtractTextPlugin = require('extract-text-webpack-plugin'); var autoprefixerOptions = require('./../autoprefixer'); var paths = require('./../paths'); @@ -59,7 +60,8 @@ module.exports = { filename: '[name].js' }, plugins: [ - new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js') + new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'), + new ExtractTextPlugin('../../css/sonar.css', { allChunks: true }) ], resolve: { root: path.join(__dirname, '../../src/main/js') @@ -83,8 +85,12 @@ module.exports = { } }, { - test: /\.css/, - loader: 'style-loader!css-loader!postcss-loader' + test: /\.css$/, + loader: 'style!css!postcss' + }, + { + test: /\.less$/, + loader: ExtractTextPlugin.extract('style', 'css?-url!postcss!less') }, { test: require.resolve('jquery'), loader: 'expose?$!expose?jQuery' }, { test: require.resolve('underscore'), loader: 'expose?_' }, diff --git a/server/sonar-web/gulpfile.js b/server/sonar-web/gulpfile.js deleted file mode 100644 index 4f8baa3c1b1..00000000000 --- a/server/sonar-web/gulpfile.js +++ /dev/null @@ -1,38 +0,0 @@ -/* eslint no-var: 0 */ -var del = require('del'); -var gulp = require('gulp'); -var gulpif = require('gulp-if'); -var less = require('gulp-less'); -var nano = require('gulp-cssnano'); -var autoprefixer = require('gulp-autoprefixer'); -var paths = require('./config/paths'); -var autoprefixerOptions = require('./config/autoprefixer'); - -var nanoOptions = { - zindex: false, - discardComments: { removeAll: true } -}; - -function styles (output, production) { - return gulp.src(['src/main/less/sonar.less']) - .pipe(less()) - .pipe(autoprefixer(autoprefixerOptions)) - .pipe(gulpif(production, nano(nanoOptions))) - .pipe(gulp.dest(output)); -} - -gulp.task('clean', function (done) { - del(paths.cssBuild, done); -}); - -gulp.task('styles:prod', function () { - return styles(paths.cssBuild, true); -}); - -gulp.task('styles:dev', function () { - return styles(paths.cssBuild, false); -}); - -gulp.task('default', ['clean', 'styles:prod']); -gulp.task('build', ['clean', 'styles:prod']); -gulp.task('build-fast', ['clean', 'styles:dev']); diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json index 4fadb8b993d..9e285ebb642 100644 --- a/server/sonar-web/package.json +++ b/server/sonar-web/package.json @@ -28,7 +28,6 @@ "cross-env": "2.0.0", "css-loader": "0.23.1", "d3": "3.5.6", - "del": "2.0.2", "enzyme": "2.2.0", "eslint": "^2.13.1", "eslint-plugin-import": "^1.9.2", @@ -36,17 +35,15 @@ "expose-loader": "0.7.1", "express": "4.13.4", "express-http-proxy": "0.6.0", - "gulp": "3.9.0", - "gulp-autoprefixer": "3.1.0", - "gulp-cssnano": "2.0.0", - "gulp-if": "2.0.0", - "gulp-less": "3.0.3", + "extract-text-webpack-plugin": "1.0.1", "handlebars": "2.0.0", "handlebars-loader": "1.1.4", "history": "2.0.0", "imports-loader": "0.6.5", "jquery": "2.2.0", "jsdom": "6.5.1", + "less": "2.7.1", + "less-loader": "2.2.3", "lodash": "4.6.1", "mocha": "2.3.4", "moment": "2.10.6", @@ -73,7 +70,6 @@ "sinon-chai": "2.8.0", "style-loader": "0.13.0", "underscore": "1.8.3", - "vinyl-buffer": "1.0.0", "webpack": "1.13.0", "webpack-dev-middleware": "1.6.1", "webpack-hot-middleware": "2.10.0", @@ -81,8 +77,8 @@ }, "scripts": { "start": "node ./scripts/start.js", - "build-fast": "node ./scripts/build.js --fast && gulp build-fast", - "build": "node ./scripts/build.js && gulp build", + "build-fast": "node ./scripts/build.js --fast", + "build": "node ./scripts/build.js", "test": "cross-env NODE_ENV=test mocha --opts tests/mocha.opts src/main/js/**/__tests__/**/*", "coverage": "cross-env NODE_ENV=test nyc mocha --opts tests/mocha.opts src/main/js/**/__tests__/**/* && nyc report --reporter lcov --report-dir target/coverage", "lint": "eslint src/main/js" diff --git a/server/sonar-web/scripts/build.js b/server/sonar-web/scripts/build.js index 0226ff25163..014c5822c76 100644 --- a/server/sonar-web/scripts/build.js +++ b/server/sonar-web/scripts/build.js @@ -34,11 +34,16 @@ var config = isFastBuild ? // Remove all content but keep the directory so that // if you're in it, you don't end up in Trash -console.log(chalk.cyan.bold('Cleaning output directory...')); +console.log(chalk.cyan.bold('Cleaning output directories...')); + console.log(paths.jsBuild + '/*'); -console.log(); rimrafSync(paths.jsBuild + '/*'); +console.log(paths.cssBuild + '/*'); +rimrafSync(paths.cssBuild + '/*'); + +console.log(); + if (isFastBuild) { console.log(chalk.magenta.bold('Running fast build...')); } else { @@ -46,13 +51,21 @@ if (isFastBuild) { } console.log(); -webpack(config).run(function (err, stats) { +webpack(config, function (err, stats) { if (err) { console.log(chalk.red.bold('Failed to create a production build!')); console.log(chalk.red(err.message || err)); process.exit(1); } + if (stats.compilation.errors && stats.compilation.errors.length) { + console.log(chalk.red.bold('Failed to create a production build!')); + stats.compilation.errors.forEach(function (err) { + console.log(chalk.red(err.message || err)); + }); + process.exit(1); + } + console.log(chalk.green.bold('Compiled successfully!')); var jsonStats = stats.toJson(); diff --git a/server/sonar-web/src/main/js/main/app.js b/server/sonar-web/src/main/js/main/app.js index 10de904d972..fae8f401816 100644 --- a/server/sonar-web/src/main/js/main/app.js +++ b/server/sonar-web/src/main/js/main/app.js @@ -29,6 +29,8 @@ import { installGlobal, requestMessages } from '../helpers/l10n'; import * as measures from '../helpers/measures'; import * as request from '../helpers/request'; +import '../../less/sonar.less'; + // set the Backbone's $ Backbone.$ = $; diff --git a/server/sonar-web/src/main/less/components/navigator/base.less b/server/sonar-web/src/main/less/components/navigator/base.less index 9885fc3ce88..b04fcc89f0b 100644 --- a/server/sonar-web/src/main/less/components/navigator/base.less +++ b/server/sonar-web/src/main/less/components/navigator/base.less @@ -110,7 +110,7 @@ position: absolute; z-index: @navigator-fetching-z-index; top: 0; bottom: 0; left: 0; right: 0; - background: #fff url(../images/loading.gif) no-repeat 4px 4px; + background: #fff url(../../images/loading.gif) no-repeat 4px 4px; } } @@ -329,7 +329,7 @@ overflow: auto; &.loading { - background: @white url("../images/loading.gif") no-repeat 4px 2px; + background: @white url("../../images/loading.gif") no-repeat 4px 2px; } } diff --git a/server/sonar-web/src/main/less/components/navigator/filters.less b/server/sonar-web/src/main/less/components/navigator/filters.less index 967081b4d1e..23220dc6a03 100644 --- a/server/sonar-web/src/main/less/components/navigator/filters.less +++ b/server/sonar-web/src/main/less/components/navigator/filters.less @@ -301,7 +301,7 @@ display: block; width: 16px; height: 16px; - background: #fff url(../images/loading.gif) no-repeat center center; + background: #fff url(../../images/loading.gif) no-repeat center center; } &.fetching-error { @@ -331,7 +331,7 @@ .navigator-filter-favorite-toggle { width: 16px; height: @navigatorFiltersHeight; - background: url(../images/navigator/favorite-filters@2x.png) no-repeat center center; + background: url(../../images/navigator/favorite-filters@2x.png) no-repeat center center; background-size: 16px 14px; } diff --git a/server/sonar-web/src/main/less/components/select-list.less b/server/sonar-web/src/main/less/components/select-list.less index a2bb4bb2a20..c1ff2cce108 100644 --- a/server/sonar-web/src/main/less/components/select-list.less +++ b/server/sonar-web/src/main/less/components/select-list.less @@ -74,7 +74,7 @@ } .select-list-list > li.progress { - background: url(../images/loading.gif) no-repeat 10px 5px; + background: url(../../images/loading.gif) no-repeat 10px 5px; } .select-list-list > li.progress .select-list-list-checkbox { diff --git a/server/sonar-web/src/main/less/components/source.less b/server/sonar-web/src/main/less/components/source.less index ff3050f7493..777d3b23a2e 100644 --- a/server/sonar-web/src/main/less/components/source.less +++ b/server/sonar-web/src/main/less/components/source.less @@ -92,7 +92,7 @@ .source-line-expand { .source-line-code { - background: url(../images/gray-stripes.png) repeat; + background: url(../../images/gray-stripes.png) repeat; } } diff --git a/server/sonar-web/src/main/less/deprecated.less b/server/sonar-web/src/main/less/deprecated.less index 085c0c1357d..e9b7173022b 100644 --- a/server/sonar-web/src/main/less/deprecated.less +++ b/server/sonar-web/src/main/less/deprecated.less @@ -31,7 +31,7 @@ } .loading { - background: url("../images/loading.gif") no-repeat 4px 2px; + background: url("../../images/loading.gif") no-repeat 4px 2px; color: #444; padding: 3px 25px; } @@ -264,7 +264,7 @@ th.operations, td.operations { } .source_options td { - background: url("../images/sep12.png") no-repeat scroll 0 50% transparent; + background: url("../../images/sep12.png") no-repeat scroll 0 50% transparent; padding: 0 10px; } @@ -403,13 +403,13 @@ div.autocompleteNote { } a.external { - background: url('../images/links/external.png') no-repeat 100% 0; + background: url('../../images/links/external.png') no-repeat 100% 0; padding: 0 16px 0 0; } .fav { display: inline-block; - background: url('../images/star.png') no-repeat 100% 0; + background: url('../../images/star.png') no-repeat 100% 0; width: 16px; height: 16px; vertical-align: text-bottom; @@ -417,7 +417,7 @@ a.external { .notfav { display: inline-block; - background: url('../images/star_off.png') no-repeat 100% 0; + background: url('../../images/star_off.png') no-repeat 100% 0; width: 16px; height: 16px; vertical-align: text-bottom; diff --git a/server/sonar-web/src/main/less/init/icons.less b/server/sonar-web/src/main/less/init/icons.less index 4cf3404984f..45a1634528e 100644 --- a/server/sonar-web/src/main/less/init/icons.less +++ b/server/sonar-web/src/main/less/init/icons.less @@ -23,11 +23,11 @@ @font-face { font-family: 'sonar'; - src:url('../fonts/sonar-5.2.eot?'); - src:url('../fonts/sonar-5.2.eot?#iefix') format('embedded-opentype'), - url('../fonts/sonar-5.2.woff?') format('woff'), - url('../fonts/sonar-5.2.ttf?') format('truetype'), - url('../fonts/sonar-5.2.svg?#sonar') format('svg'); + src:url('../../fonts/sonar-5.2.eot?'); + src:url('../../fonts/sonar-5.2.eot?#iefix') format('embedded-opentype'), + url('../../fonts/sonar-5.2.woff?') format('woff'), + url('../../fonts/sonar-5.2.ttf?') format('truetype'), + url('../../fonts/sonar-5.2.svg?#sonar') format('svg'); font-weight: normal; font-style: normal; } diff --git a/server/sonar-web/src/main/less/init/tables.less b/server/sonar-web/src/main/less/init/tables.less index 142ed35ea8e..f4ad6add927 100644 --- a/server/sonar-web/src/main/less/init/tables.less +++ b/server/sonar-web/src/main/less/init/tables.less @@ -150,7 +150,7 @@ table.data.no-outer-padding > tbody > tr { } .data td.category.withSubcategories { - background-image: url('../images/bullet_arrow_down.gif'); + background-image: url('../../images/bullet_arrow_down.gif'); background-position: right center; background-repeat: no-repeat; } @@ -175,12 +175,12 @@ table.sortable .sortcol { } table.sortable .sortasc { - background-image: url('../images/bullet_arrow_up.gif'); + background-image: url('../../images/bullet_arrow_up.gif'); background-position: left center; } table.sortable .sortdesc { - background-image: url('../images/bullet_arrow_down.gif'); + background-image: url('../../images/bullet_arrow_down.gif'); background-position: left center; } diff --git a/server/sonar-web/src/main/less/pages/dashboard.less b/server/sonar-web/src/main/less/pages/dashboard.less index 6000dc70941..f4f1de0d76b 100644 --- a/server/sonar-web/src/main/less/pages/dashboard.less +++ b/server/sonar-web/src/main/less/pages/dashboard.less @@ -38,7 +38,7 @@ height: 100%; top: 0; left: 0; - background: url('../images/transparent.gif') repeat; + background: url('../../images/transparent.gif') repeat; z-index: @dashboard-transparent-z-index; } @@ -265,7 +265,7 @@ #dashboard .widget-handle { cursor: move; margin: 0; - background-image: url('../images/move.png'); + background-image: url('../../images/move.png'); background-position: left center; background-repeat: no-repeat; padding-left: 20px; diff --git a/server/sonar-web/src/main/less/select2-sonar.less b/server/sonar-web/src/main/less/select2-sonar.less index 196401120e8..606d3c06c41 100644 --- a/server/sonar-web/src/main/less/select2-sonar.less +++ b/server/sonar-web/src/main/less/select2-sonar.less @@ -20,9 +20,9 @@ @import (reference) "mixins"; @import (reference) "variables"; -@imagesPath: '../images/select2.png'; -@imagesPath2x: '../images/select2x2.png'; -@spinnerPath: '../images/spinner.gif'; +@imagesPath: '../../images/select2.png'; +@imagesPath2x: '../../images/select2x2.png'; +@spinnerPath: '../../images/spinner.gif'; .select2-container { vertical-align: middle; diff --git a/server/sonar-web/src/main/less/select2.less b/server/sonar-web/src/main/less/select2.less index a3e3669d612..ead62d565a7 100755 --- a/server/sonar-web/src/main/less/select2.less +++ b/server/sonar-web/src/main/less/select2.less @@ -71,7 +71,7 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012 width: 12px; height: 12px; font-size: 1px; - background: url('../images/select2.png') right top no-repeat; + background: url('../../images/select2.png') right top no-repeat; cursor: pointer; text-decoration: none; border: 0; @@ -119,7 +119,7 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012 } .select2-container .select2-choice div b { - background: url('../images/select2.png') no-repeat 0 1px; + background: url('../../images/select2.png') no-repeat 0 1px; display: block; width: 100%; height: 100%; @@ -143,7 +143,7 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012 } .select2-search input { - background: #fff url('../images/select2.png') no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%); + background: #fff url('../../images/select2.png') no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%); padding: 4px 20px 4px 5px; outline: 0; border: 1px solid #aaa; @@ -162,7 +162,7 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012 } .select2-search input.select2-active { - background: #ffff url('../images/spinner.gif') no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%); + background: #ffff url('../../images/spinner.gif') no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%); } .select2-container-active .select2-choice, @@ -259,7 +259,7 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012 } .select2-more-results.select2-active { - background: #f4f4f4 url('../images/spinner.gif') no-repeat 100%; + background: #f4f4f4 url('../../images/spinner.gif') no-repeat 100%; } .select2-more-results { @@ -331,7 +331,7 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012 } .select2-container-multi .select2-choices .select2-search-field input.select2-active { - background: #fff url('../images/spinner.gif') no-repeat 100% !important; + background: #fff url('../../images/spinner.gif') no-repeat 100% !important; } .select2-default { @@ -368,7 +368,7 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012 width: 12px; height: 13px; font-size: 1px; - background: url('../images/select2.png') right top no-repeat; + background: url('../../images/select2.png') right top no-repeat; outline: none; } @@ -417,7 +417,7 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice div b { - background-image: url(../images/select2x2.png) !important; + background-image: url(../../images/select2x2.png) !important; background-repeat: no-repeat !important; background-size: 60px 40px !important; } diff --git a/server/sonar-web/src/main/less/style.less b/server/sonar-web/src/main/less/style.less index 5743af7c82e..7434276f08b 100644 --- a/server/sonar-web/src/main/less/style.less +++ b/server/sonar-web/src/main/less/style.less @@ -151,7 +151,7 @@ ul.headerLine li { } ul.headerLine li.sep { - background: url("../images/sep12.png") no-repeat scroll 50% 50% transparent; + background: url("../../images/sep12.png") no-repeat scroll 50% 50% transparent; padding: 0 5px 0 5px; } @@ -167,39 +167,39 @@ select.withIcons option, span.withIcons { } option.status_open { - background-image: url('../images/status/OPEN.png'); + background-image: url('../../images/status/OPEN.png'); } option.status_reopened { - background-image: url('../images/status/REOPENED.png'); + background-image: url('../../images/status/REOPENED.png'); } option.status_resolved { - background-image: url('../images/status/RESOLVED.png'); + background-image: url('../../images/status/RESOLVED.png'); } option.status_closed { - background-image: url('../images/status/CLOSED.png'); + background-image: url('../../images/status/CLOSED.png'); } option.sev_INFO, span.sev_INFO { - background-image: url('../images/priority/INFO.png'); + background-image: url('../../images/priority/INFO.png'); } option.sev_MINOR, span.sev_MINOR { - background-image: url('../images/priority/MINOR.png'); + background-image: url('../../images/priority/MINOR.png'); } option.sev_MAJOR, span.sev_MAJOR { - background-image: url('../images/priority/MAJOR.png'); + background-image: url('../../images/priority/MAJOR.png'); } option.sev_CRITICAL, span.sev_CRITICAL { - background-image: url('../images/priority/CRITICAL.png'); + background-image: url('../../images/priority/CRITICAL.png'); } option.sev_BLOCKER, span.sev_BLOCKER { - background-image: url('../images/priority/BLOCKER.png'); + background-image: url('../../images/priority/BLOCKER.png'); } /* ------------------- VARIATIONS ------------------- */ @@ -230,7 +230,7 @@ option.sev_BLOCKER, span.sev_BLOCKER { color: #444; vertical-align: bottom; font-weight: bold; - background: url('../images/information.png') no-repeat left center; + background: url('../../images/information.png') no-repeat left center; } .help p { @@ -327,7 +327,7 @@ ul.bullet { ul.bullet li { padding: 2px 0; - list-style-image: url("../images/bullet.png"); + list-style-image: url("../../images/bullet.png"); } .rule_title { @@ -625,7 +625,7 @@ table.without-header { } .line-info { - background: url('../images/information.png') no-repeat scroll left 50% transparent; + background: url('../../images/information.png') no-repeat scroll left 50% transparent; padding-left: 18px } @@ -687,25 +687,25 @@ table.nowrap td.small, td.nowrap.small, th.nowrap.small { .csv { display: block; - background: url("../images/csv.png") no-repeat scroll left 50% transparent; + background: url("../../images/csv.png") no-repeat scroll left 50% transparent; padding: 2px 0 2px 20px; } .add { display: block; - background: url("../images/add.png") no-repeat scroll left 50% transparent; + background: url("../../images/add.png") no-repeat scroll left 50% transparent; padding: 2px 0 2px 20px; } .restore { display: block; - background: url("../images/restore.gif") no-repeat scroll left 50% transparent; + background: url("../../images/restore.gif") no-repeat scroll left 50% transparent; padding: 2px 0 2px 20px; } .compare { display: block; - background: url("../images/compare.png") no-repeat scroll left 50% transparent; + background: url("../../images/compare.png") no-repeat scroll left 50% transparent; padding: 2px 0 2px 20px; } @@ -719,7 +719,7 @@ table.nowrap td.small, td.nowrap.small, th.nowrap.small { } .link-more { - background-image: url('../images/bullet_arrow_down.png'); + background-image: url('../../images/bullet_arrow_down.png'); background-repeat: no-repeat; padding-right: 20px; background-position: right center; -- 2.39.5