add make targets for js and css, add js linter (#6952)

* add make targets for js,css, add javascript linter

- add `make js`, deprecating `make javascripts`
- add `make css`, deprecating `make generate-stylesheets` and
  `make stylesheets-check`
- changed the unclean css check to only run on CI
- add JS linting via eslint with basic configuration and fixed
  discovered issues
- changed autoprefixer to use official `postcss-cli` avoiding the need
  to loop in the makefile
- moved browserslist to package.json so other future tools can use it
  too.
- update documentation for new make targets and added JS section

* fix indentation

* move functions used in html to 'exported' list

* Run lessc binary without having to install anything to node_modules

* use relative paths to node bin scripts, removing npx

* Revert "use relative paths to node bin scripts, removing npx"

This reverts commit 119b725525a8430b32ee7a6e6009b4ece544e39b.

* fix lessc and postcss plugins

* check for node_modules and use actual bin names

.drone.yml

@@ -50,7 +50,8 @@ pipeline:
     pull: true
     commands:
       - npm install
-      - make stylesheets-check
+      - make css
+      - make js
     when:
       event: [ push, tag, pull_request ]
 

.eslintrc

@@ -0,0 +1,25 @@
+root: true
+
+extends:
+  - eslint:recommended
+
+parserOptions:
+  ecmaVersion: 2015
+
+env:
+  browser: true
+  jquery: true
+  es6: true
+
+globals:
+  Clipboard: false
+  CodeMirror: false
+  emojify: false
+  SimpleMDE: false
+  Vue: false
+  Dropzone: false
+  u2fApi: false
+  hljs: false
+
+rules:
+  no-unused-vars: [error, {args: all, argsIgnorePattern: ^_, varsIgnorePattern: ^_, ignoreRestSiblings: true}]

CONTRIBUTING.md

@@ -114,7 +114,7 @@ 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) at version 8.0 or above
-  with `npm` and then run `npm install` and `make generate-stylesheets`.
+  with `npm` and then run `npm install` and `make css`.
 - To build Images: ImageMagick, inkscape and zopflipng binaries must be
   available in your `PATH` to run `make generate-images`.
 

Makefile

@@ -365,33 +365,55 @@ release-compress:
 	fi
 	cd $(DIST)/release/; for file in `find . -type f -name "*"`; do echo "compressing $${file}" && gxz -k -9 $${file}; done;
 
-.PHONY: javascripts
-javascripts: public/js/index.js
-
-.IGNORE: public/js/index.js
-public/js/index.js: $(JAVASCRIPTS)
-	cat $< >| $@
-
-.PHONY: stylesheets-check
-stylesheets-check: generate-stylesheets
-	@diff=$$(git diff public/css/*); \
-	if [ -n "$$diff" ]; then \
-		echo "Please run 'make generate-stylesheets' and commit the result:"; \
-		echo "$${diff}"; \
+.PHONY: js
+js:
+	@if ([ ! -d "$(PWD)/node_modules" ]); then \
+		echo "node_modules directory is absent, please run 'npm install' first"; \
 		exit 1; \
 	fi;
-
-.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 := "> 1%, last 2 firefox versions, last 2 safari versions, ie 11")
+	npx eslint public/js
+
+.PHONY: css
+css:
+	@if ([ ! -d "$(PWD)/node_modules" ]); then \
+		echo "node_modules directory is absent, please run 'npm install' first"; \
+		exit 1; \
+	fi;
+	@hash npx > /dev/null 2>&1; if [ $$? -ne 0 ]; then \
+		echo "Please install npm version 5.2+"; \
+		exit 1; \
+	fi;
+
 	npx lesshint public/less/
 	npx lessc --clean-css="--s0 -b" 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="--s0 -b" 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);)
+	npx postcss --use autoprefixer --no-map --replace public/css/*
+
+	@diff=$$(git diff public/css/*); \
+	if ([ ! -z "$CI" ] && [ -n "$$diff" ]); then \
+		echo "Generated files in public/css have changed, please commit the result:"; \
+		echo "$${diff}"; \
+		exit 1; \
+	fi;
+
+.PHONY: javascripts
+javascripts:
+	echo "'make javascripts' is deprecated, please use 'make js'"
+	$(MAKE) js
+
+.PHONY: stylesheets-check
+stylesheets-check:
+	echo "'make stylesheets-check' is deprecated, please use 'make css'"
+	$(MAKE) css
+
+.PHONY: generate-stylesheets
+generate-stylesheets:
+	echo "'make generate-stylesheets' is deprecated, please use 'make css'"
+	$(MAKE) css
 
 .PHONY: swagger-ui
 swagger-ui:

docs/content/doc/advanced/hacking-on-gitea.en-us.md

@@ -136,30 +136,36 @@ You should lint, vet and spell-check with:
 make vet lint misspell-check
 ```
 
-### Updating the stylesheets
+### Updating CSS
 
-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/`.
-
-If you wish to work on the stylesheets, you will need to install `lessc` the
-less compiler and `postcss`. The recommended way to do this is using `npm install`:
+To generate the CSS, you will need [Node.js](https://nodejs.org/) 8.0 or greater and the build dependencies:
 
 ```bash
-cd "$GOPATH/src/code.gitea.io/gitea"
 npm install
 ```
 
-You can then edit the less stylesheets and regenerate the stylesheets using:
+At present we use [less](http://lesscss.org/) and [postcss](https://postcss.org) to generate our CSS. Do
+**not** edit the files in `public/css` directly, as they are generated from `lessc` from the files in `public/less`.
+
+Edit files in `public/less`, run the linter, regenerate the CSS and commit all changed files:
 
 ```bash
-make generate-stylesheets
+make css
 ```
 
-You should commit both the changes to the css and the less files when making
-PRs.
+### Updating JS
+
+To run the JavaScript linter you will need [Node.js](https://nodejs.org/) 8.0 or greater and the build dependencies:
+
+```bash
+npm install
+```
+
+Edit files in `public/js` and run the linter:
+
+```bash
+make js
+```
 
 ### Updating the API
 

package.json

@@ -2,9 +2,16 @@
   "license": "MIT",
   "devDependencies": {
     "autoprefixer": "9.5.1",
+    "eslint": "5.16.0",
     "less": "3.9.0",
     "less-plugin-clean-css": "1.5.1",
     "lesshint": "^6.3.6",
-    "postcss-cli-simple": "3.0.0"
-  }
+    "postcss-cli": "6.1.2"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 firefox versions",
+    "last 2 safari versions",
+    "ie 11"
+  ]
 }

public/js/draw.js

@@ -1,3 +1,5 @@
+/* globals gitGraph */
+
 $(document).ready(function () {
 	var graphList = [];