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
pull/2559/head^2
silverwind 7 years ago committed by Lunny Xiao
parent fa1cbc2896
commit 1fbfccb4fc
  1. 2
      .drone.yml
  2. 1
      .gitignore
  3. 10
      CONTRIBUTING.md
  4. 13
      Makefile
  5. 6
      package.json
  6. 3132
      public/css/index.css

@ -16,6 +16,8 @@ pipeline:
TAGS: bindata sqlite TAGS: bindata sqlite
GOPATH: /srv/app GOPATH: /srv/app
commands: commands:
- apk -U add nodejs nodejs-npm
- npm install
- make clean - make clean
- make generate - make generate
- make vet - make vet

1
.gitignore vendored

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

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

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

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

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save