move CSS build to webpack (#9983)
- added new 'make webpack' target - deprecated 'make js' and 'make css' - extend webpack config to load the less files - updated docs I had to rename the source file of `arc-green.less` to avoid generating a useless JS entrypoint via webpack-fix-style-only-entries which would not work with different source/destination filenames. I hear that there should be cleaner solutions possible once we upgrade to Webpack 5. Co-authored-by: zeripath <art27@cantab.net>
This commit is contained in:
zeripath
@ -15,7 +15,7 @@ steps:
|
||||
pull: always
|
||||
image: node:10 # this step is kept at the lowest version of node that we support
|
||||
commands:
|
||||
- make css js
|
||||
- make webpack
|
||||
|
||||
- name: build-without-gcc
|
||||
pull: always
|
||||
|
||||
@ -7,6 +7,9 @@ insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
end_of_line = lf
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[*.go]
|
||||
indent_style = tab
|
||||
indent_size = 8
|
||||
|
||||
@ -114,15 +114,7 @@ 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, JS and images.
|
||||
|
||||
- To build CSS and JS: Install [Node.js](https://nodejs.org/en/download/package-manager) at version 10.0 or above
|
||||
with `npm` and then run `npm install`, `make css` and `make js`.
|
||||
- To build Images: ImageMagick, inkscape and zopflipng binaries must be
|
||||
available in your `PATH` to run `make generate-images`.
|
||||
|
||||
For more details on how to generate files, build and test Gitea, see the [hacking instructions](https://docs.gitea.io/en-us/hacking-on-gitea/)
|
||||
See the [hacking instructions](https://docs.gitea.io/en-us/hacking-on-gitea/).
|
||||
|
||||
## Code review
|
||||
|
||||
|
||||
47
Makefile
47
Makefile
@ -46,16 +46,13 @@ LDFLAGS := $(LDFLAGS) -X "main.MakeVersion=$(MAKE_VERSION)" -X "main.Version=$(G
|
||||
PACKAGES ?= $(filter-out code.gitea.io/gitea/integrations/migration-test,$(filter-out code.gitea.io/gitea/integrations,$(shell GO111MODULE=on $(GO) list -mod=vendor ./... | grep -v /vendor/)))
|
||||
|
||||
GO_SOURCES ?= $(shell find . -name "*.go" -type f)
|
||||
JS_SOURCES ?= $(shell find web_src/js web_src/css -type f)
|
||||
CSS_SOURCES ?= $(shell find web_src/less -type f)
|
||||
WEBPACK_SOURCES ?= $(shell find web_src/js web_src/css web_src/less -type f)
|
||||
|
||||
JS_DEST := public/js/index.js
|
||||
CSS_DEST := public/css/index.css
|
||||
WEBPACK_DEST := public/js/index.js public/css/index.css
|
||||
BINDATA_DEST := modules/public/bindata.go modules/options/bindata.go modules/templates/bindata.go
|
||||
BINDATA_HASH := $(addsuffix .hash,$(BINDATA_DEST))
|
||||
|
||||
JS_DEST_DIR := public/js
|
||||
CSS_DEST_DIR := public/css
|
||||
WEBPACK_DEST_DIRS := public/js public/css
|
||||
FOMANTIC_DEST_DIR := public/fomantic
|
||||
|
||||
TAGS ?=
|
||||
@ -87,9 +84,6 @@ TEST_MSSQL_DBNAME ?= gitea
|
||||
TEST_MSSQL_USERNAME ?= sa
|
||||
TEST_MSSQL_PASSWORD ?= MwantsaSecurePassword1
|
||||
|
||||
# $(call strip-suffix,filename)
|
||||
strip-suffix = $(firstword $(subst ., ,$(1)))
|
||||
|
||||
.PHONY: all
|
||||
all: build
|
||||
|
||||
@ -102,10 +96,9 @@ help:
|
||||
@echo " - build creates the entire project"
|
||||
@echo " - clean delete integration files and build files but not css and js files"
|
||||
@echo " - clean-all delete all generated files (integration test, build, css and js files)"
|
||||
@echo " - css rebuild only css files"
|
||||
@echo " - js rebuild only js files"
|
||||
@echo " - webpack rebuild only js and css files"
|
||||
@echo " - fomantic rebuild fomantic-ui files"
|
||||
@echo " - generate run \"make fomantic css js\" and \"go generate\""
|
||||
@echo " - generate run \"make fomantic webpack\" and \"go generate\""
|
||||
@echo " - fmt format the code"
|
||||
@echo " - generate-swagger generate the swagger spec from code comments"
|
||||
@echo " - swagger-validate check if the swagger spec is valid"
|
||||
@ -141,7 +134,7 @@ node-check:
|
||||
|
||||
.PHONY: clean-all
|
||||
clean-all: clean
|
||||
rm -rf $(JS_DEST_DIR) $(CSS_DEST_DIR) $(FOMANTIC_DEST_DIR)
|
||||
rm -rf $(WEBPACK_DEST_DIRS) $(FOMANTIC_DEST_DIR)
|
||||
|
||||
.PHONY: clean
|
||||
clean:
|
||||
@ -161,7 +154,7 @@ vet:
|
||||
$(GO) vet $(PACKAGES)
|
||||
|
||||
.PHONY: generate
|
||||
generate: fomantic js css
|
||||
generate: fomantic webpack
|
||||
GO111MODULE=on $(GO) generate -mod=vendor -tags '$(TAGS)' $(PACKAGES)
|
||||
|
||||
.PHONY: generate-swagger
|
||||
@ -481,6 +474,7 @@ release-compress:
|
||||
|
||||
node_modules: package-lock.json
|
||||
npm install --no-save
|
||||
@touch node_modules
|
||||
|
||||
.PHONY: npm-update
|
||||
npm-update: node-check | node_modules
|
||||
@ -489,12 +483,14 @@ npm-update: node-check | node_modules
|
||||
npm install --package-lock
|
||||
|
||||
.PHONY: js
|
||||
js: node-check $(JS_DEST)
|
||||
js:
|
||||
@echo "'make js' is deprecated, please use 'make webpack'"
|
||||
$(MAKE) webpack
|
||||
|
||||
$(JS_DEST): $(JS_SOURCES) | node_modules
|
||||
npx eslint web_src/js webpack.config.js
|
||||
npx webpack --hide-modules --display-entrypoints=false
|
||||
@touch $(JS_DEST)
|
||||
.PHONY: css
|
||||
css:
|
||||
@echo "'make css' is deprecated, please use 'make webpack'"
|
||||
$(MAKE) webpack
|
||||
|
||||
.PHONY: fomantic
|
||||
fomantic: node-check $(FOMANTIC_DEST_DIR)
|
||||
@ -505,15 +501,14 @@ $(FOMANTIC_DEST_DIR): semantic.json web_src/fomantic/theme.config.less | node_mo
|
||||
npx gulp -f node_modules/fomantic-ui/gulpfile.js build
|
||||
@touch $(FOMANTIC_DEST_DIR)
|
||||
|
||||
.PHONY: css
|
||||
css: node-check $(CSS_DEST)
|
||||
.PHONY: webpack
|
||||
webpack: node-check $(WEBPACK_DEST)
|
||||
|
||||
$(CSS_DEST): $(CSS_SOURCES) | node_modules
|
||||
$(WEBPACK_DEST): $(WEBPACK_SOURCES) | node_modules
|
||||
npx eslint web_src/js webpack.config.js
|
||||
npx stylelint web_src/less
|
||||
npx lessc web_src/less/index.less public/css/index.css
|
||||
$(foreach file, $(filter-out web_src/less/themes/_base.less, $(wildcard web_src/less/themes/*)),npx lessc web_src/less/themes/$(notdir $(file)) > public/css/theme-$(notdir $(call strip-suffix,$(file))).css;)
|
||||
npx postcss --use autoprefixer --use cssnano --no-map --replace public/css/*
|
||||
@touch $(CSS_DEST)
|
||||
npx webpack --hide-modules --display-entrypoints=false
|
||||
@touch $(WEBPACK_DEST)
|
||||
|
||||
.PHONY: update-translations
|
||||
update-translations:
|
||||
|
||||
@ -140,24 +140,21 @@ You should run revive, vet and spell-check on the code with:
|
||||
make revive vet misspell-check
|
||||
```
|
||||
|
||||
### Working on CSS
|
||||
### Working on JS and CSS
|
||||
|
||||
Edit files in `web_src/less` and run the linter and build the CSS files via:
|
||||
Edit files in `web_src` and run the linter and build the files in `public`:
|
||||
|
||||
```bash
|
||||
make css
|
||||
```
|
||||
|
||||
### Working on JS
|
||||
|
||||
Edit files in `web_src/js`, run the linter and build the JS files via:
|
||||
|
||||
```bash
|
||||
make js
|
||||
make webpack
|
||||
```
|
||||
|
||||
Note: When working on frontend code, it is advisable to set `USE_SERVICE_WORKER` to `false` in `app.ini` which will prevent undesirable caching of frontend assets.
|
||||
|
||||
### Building Images
|
||||
|
||||
To build the images, ImageMagick, `inkscape` and `zopflipng` binaries must be available in
|
||||
your `PATH` to run `make generate-images`.
|
||||
|
||||
### Updating the API
|
||||
|
||||
When creating new API routes or modifying existing API routes, you **MUST**
|
||||
|
||||
376
package-lock.json
generated
376
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -17,7 +17,6 @@
|
||||
"@babel/plugin-transform-runtime": "7.7.6",
|
||||
"@babel/preset-env": "7.7.7",
|
||||
"@babel/runtime": "7.7.7",
|
||||
"autoprefixer": "9.7.3",
|
||||
"babel-loader": "8.0.6",
|
||||
"core-js": "3.6.2",
|
||||
"css-loader": "3.4.1",
|
||||
@ -25,10 +24,10 @@
|
||||
"eslint": "6.8.0",
|
||||
"eslint-config-airbnb-base": "14.0.0",
|
||||
"eslint-plugin-import": "2.19.1",
|
||||
"less": "3.10.3",
|
||||
"fast-glob": "3.1.1",
|
||||
"less-loader": "5.0.0",
|
||||
"mini-css-extract-plugin": "0.9.0",
|
||||
"optimize-css-assets-webpack-plugin": "5.0.3",
|
||||
"postcss-cli": "7.1.0",
|
||||
"postcss-loader": "3.0.0",
|
||||
"postcss-preset-env": "6.7.0",
|
||||
"postcss-safe-parser": "4.0.1",
|
||||
@ -39,7 +38,8 @@
|
||||
"vue-loader": "15.8.3",
|
||||
"vue-template-compiler": "2.6.11",
|
||||
"webpack": "4.41.5",
|
||||
"webpack-cli": "3.3.10"
|
||||
"webpack-cli": "3.3.10",
|
||||
"webpack-fix-style-only-entries": "0.4.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"defaults"
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
// TODO: Instead of having each theme file define each
|
||||
// CSS/LESS item in this file and then overide
|
||||
// in the theme files
|
||||
@ -1,5 +1,3 @@
|
||||
@import "_base";
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
@ -1,23 +1,38 @@
|
||||
const path = require('path');
|
||||
const TerserPlugin = require('terser-webpack-plugin');
|
||||
const { SourceMapDevToolPlugin } = require('webpack');
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
const cssnano = require('cssnano');
|
||||
const fastGlob = require('fast-glob');
|
||||
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const PostCSSSafeParser = require('postcss-safe-parser');
|
||||
const PostCSSPresetEnv = require('postcss-preset-env');
|
||||
const PostCSSSafeParser = require('postcss-safe-parser');
|
||||
const TerserPlugin = require('terser-webpack-plugin');
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
const { resolve, parse } = require('path');
|
||||
const { SourceMapDevToolPlugin } = require('webpack');
|
||||
|
||||
const themes = {};
|
||||
for (const path of fastGlob.sync(resolve(__dirname, 'web_src/less/themes/*.less'))) {
|
||||
themes[parse(path).name] = [path];
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
mode: 'production',
|
||||
entry: {
|
||||
index: ['./web_src/js/index'],
|
||||
swagger: ['./web_src/js/swagger'],
|
||||
jquery: ['./web_src/js/jquery'],
|
||||
index: [
|
||||
resolve(__dirname, 'web_src/js/index.js'),
|
||||
resolve(__dirname, 'web_src/less/index.less'),
|
||||
],
|
||||
swagger: [
|
||||
resolve(__dirname, 'web_src/js/swagger.js'),
|
||||
],
|
||||
jquery: [
|
||||
resolve(__dirname, 'web_src/js/jquery.js'),
|
||||
],
|
||||
...themes,
|
||||
},
|
||||
devtool: false,
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'public'),
|
||||
path: resolve(__dirname, 'public'),
|
||||
filename: 'js/[name].js',
|
||||
chunkFilename: 'js/[name].js',
|
||||
},
|
||||
@ -88,7 +103,7 @@ module.exports = {
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.css$/i,
|
||||
test: /\.(less|css)$/i,
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
@ -96,7 +111,8 @@ module.exports = {
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
importLoaders: 2,
|
||||
url: false,
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -107,12 +123,19 @@ module.exports = {
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'less-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new VueLoaderPlugin(),
|
||||
// needed so themes don't generate useless js files
|
||||
new FixStyleOnlyEntriesPlugin({
|
||||
silent: true,
|
||||
}),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: 'css/[name].css',
|
||||
chunkFilename: 'css/[name].css',
|
||||
|
||||
Reference in New Issue
Block a user