Browse Source

Use standard lessc and minify CSS using Node.js (#2337)

* Use standard lessc and minify CSS using Node.js

This changes the previous nonstandard `lessc` to the official one and
enables CSS minification via the clean-css module.

To build CSS, Node.js is required along with a `npm install` to get the
tools installed locally in node_modules so there is no dependency on
binaries in PATH. Benefits include:

- Allows one to have a standard lessc in PATH.
- Can now use command line switches on lessc.
- Minified CSS brings faster page load times and also has the benefit
  of discouraging contributors from editing CSS directly.

To build CSS, Node.js is required along with a `npm install` to get the
tools installed locally based on the information in `package.json`.

The 'make stylesheet' task was modified to run without condition. This
makes it easier to work on the make task itself without having to delete
files.

Also fixes: https://github.com/go-gitea/gitea/issues/2198

* install node, npm and modules on drone

* .PHONY

* use 'minify' to minify CSS
silverwind 2 years ago
parent
commit
1fbfccb4fc
6 changed files with 25 additions and 3139 deletions
  1. 2 0
      .drone.yml
  2. 1 0
      .gitignore
  3. 10 0
      CONTRIBUTING.md
  4. 5 8
      Makefile
  5. 6 0
      package.json
  6. 1 3131
      public/css/index.css

+ 2 - 0
.drone.yml

@@ -16,6 +16,8 @@ pipeline:
16 16
       TAGS: bindata sqlite
17 17
       GOPATH: /srv/app
18 18
     commands:
19
+      - apk -U add nodejs nodejs-npm
20
+      - npm install
19 21
       - make clean
20 22
       - make generate
21 23
       - make vet

+ 1 - 0
.gitignore

@@ -58,3 +58,4 @@ coverage.all
58 58
 /integrations/indexers-sqlite
59 59
 /integrations/mysql.ini
60 60
 /integrations/pgsql.ini
61
+/node_modules

+ 10 - 0
CONTRIBUTING.md

@@ -97,6 +97,16 @@ and is synced regularily to Crowdin. Once a translation has reached
97 97
 A SATISFACTORY PERCENTAGE it will be synced back into this repo and
98 98
 included in the next released version.
99 99
 
100
+## Building Gitea
101
+
102
+Generally, the go build tools are installed as-needed in the `Makefile`.
103
+An exception are the tools to build the CSS and images.
104
+
105
+- To build CSS: Install [Node.js](https://nodejs.org/en/download/package-manager)
106
+  with `npm` and then run `npm install` and `make stylesheets`.
107
+- To build Images: ImageMagick, inkscape and zopflipng binaries must be
108
+  available in your `PATH` to run `make generate-images`.
109
+
100 110
 ## Code review
101 111
 
102 112
 Changes to Gitea must be reviewed before they are accepted, no matter who

+ 5 - 8
Makefile

@@ -15,7 +15,6 @@ else
15 15
 endif
16 16
 
17 17
 BINDATA := modules/{options,public,templates}/bindata.go
18
-STYLESHEETS := $(wildcard public/less/index.less public/less/_*.less)
19 18
 DOCKER_TAG := gitea/gitea:latest
20 19
 GOFILES := $(shell find . -name "*.go" -type f ! -path "./vendor/*" ! -path "*/bindata.go")
21 20
 GOFMT ?= gofmt -s
@@ -299,14 +298,12 @@ stylesheets-check: stylesheets
299 298
 	fi;
300 299
 
301 300
 .PHONY: stylesheets
302
-stylesheets: public/css/index.css
303
-
304
-.IGNORE: public/css/index.css
305
-public/css/index.css: $(STYLESHEETS)
306
-	@which lessc > /dev/null; if [ $$? -ne 0 ]; then \
307
-		$(GO) get -u github.com/kib357/less-go/lessc; \
301
+stylesheets:
302
+	@hash minify > /dev/null 2>&1; if [ $$? -ne 0 ]; then \
303
+		$(GO) get -u github.com/tdewolff/minify/cmd/minify; \
308 304
 	fi
309
-	lessc -i $< -o $@
305
+	node_modules/.bin/lessc --no-ie-compat public/less/index.less public/css/index.css
306
+	minify -o public/css/index.css public/css/index.css
310 307
 
311 308
 .PHONY: swagger-ui
312 309
 swagger-ui:

+ 6 - 0
package.json

@@ -0,0 +1,6 @@
1
+{
2
+  "license": "MIT",
3
+  "dependencies": {
4
+    "less": "^2.7.2"
5
+  }
6
+}

File diff suppressed because it is too large
+ 1 - 3131
public/css/index.css