diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8721c3740..bcee101f5 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -102,7 +102,7 @@ included in the next released version. 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) +- To build CSS: Install [Node.js](https://nodejs.org/en/download/package-manager) at version 8.0 or above with `npm` and then run `npm install` and `make generate-stylesheets`. - To build Images: ImageMagick, inkscape and zopflipng binaries must be available in your `PATH` to run `make generate-images`. diff --git a/Makefile b/Makefile index c1c87ef93..c87a2cb8a 100644 --- a/Makefile +++ b/Makefile @@ -4,6 +4,8 @@ IMPORT := code.gitea.io/gitea GO ?= go SED_INPLACE := sed -i +export PATH := $($(GO) env GOPATH)/bin:$(PATH) + ifeq ($(OS), Windows_NT) EXECUTABLE := gitea.exe else @@ -365,10 +367,14 @@ stylesheets-check: generate-stylesheets .PHONY: generate-stylesheets generate-stylesheets: + @hash npx > /dev/null 2>&1; if [ $$? -ne 0 ]; then \ + echo "Please install npm version 5.2+"; \ + exit 1; \ + fi; $(eval BROWSERS := "> 2%, last 2 firefox versions, last 2 safari versions") - node_modules/.bin/lessc --clean-css public/less/index.less public/css/index.css - $(foreach file, $(filter-out public/less/themes/_base.less, $(wildcard public/less/themes/*)),node_modules/.bin/lessc --clean-css public/less/themes/$(notdir $(file)) > public/css/theme-$(notdir $(call strip-suffix,$(file))).css;) - $(foreach file, $(wildcard public/css/*),node_modules/.bin/postcss --use autoprefixer --autoprefixer.browsers $(BROWSERS) -o $(file) $(file);) + npx lessc --clean-css public/less/index.less public/css/index.css + $(foreach file, $(filter-out public/less/themes/_base.less, $(wildcard public/less/themes/*)),npx lessc --clean-css public/less/themes/$(notdir $(file)) > public/css/theme-$(notdir $(call strip-suffix,$(file))).css;) + $(foreach file, $(wildcard public/css/*),npx postcss --use autoprefixer --autoprefixer.browsers $(BROWSERS) -o $(file) $(file);) .PHONY: swagger-ui swagger-ui: diff --git a/docs/content/doc/advanced/hacking-on-gitea.en-us.md b/docs/content/doc/advanced/hacking-on-gitea.en-us.md index bbb1cb658..ee2dc00fd 100644 --- a/docs/content/doc/advanced/hacking-on-gitea.en-us.md +++ b/docs/content/doc/advanced/hacking-on-gitea.en-us.md @@ -138,6 +138,8 @@ make vet lint misspell-check ### Updating the stylesheets +To generate the stylsheets, you will need [Node.js](https://nodejs.org/) at version 8.0 or above. + At present we use [less](http://lesscss.org/) and [postcss](https://postcss.org) to generate our stylesheets. Do **not** edit the files in `public/css/` directly as they are generated from `lessc` from the files in `public/less/`.