use webpack to build less

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?_' },

server/sonar-web/gulpfile.js

@@ -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']);

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"

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();

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.$ = $;
 

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;
   }
 }
 

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;
 }
 

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 {

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;
   }
 }
 

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;

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;
 }

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;
 }
 

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;

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;

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;
   }

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;