From edfc0d74221555dd32864c76ea55c9762666c1ec Mon Sep 17 00:00:00 2001 From: PedroHLC Date: Tue, 5 Dec 2017 12:01:07 -0200 Subject: [PATCH] New build Remove placeholders and add real values to package.json Recreate dependencies list in package.json Update webpack and its dependencies Changes Makefile to use newer webpack Enhance webpack usages in Makefile Prefer yarn then npm in Makefile Update postcss --- .gitignore | 2 ++ Makefile | 74 ++++++++++++++++++++++++----------------------- package.json | 70 +++++++++++++++----------------------------- postcss.config.js | 5 ++++ webpack.config.js | 17 +++++------ 5 files changed, 77 insertions(+), 91 deletions(-) create mode 100644 postcss.config.js diff --git a/.gitignore b/.gitignore index bc02f883..cbe3f164 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,8 @@ build/ stats/*.dat npm-debug.log release.tar.gz +package-lock.json +yarn.lock # IntelliJ /.idea diff --git a/Makefile b/Makefile index c73752d6..4f9efc29 100644 --- a/Makefile +++ b/Makefile @@ -1,33 +1,26 @@ -# Does not work with BSD Make :( .PHONY: default setup prepare build build-css release default: dev -UNAME := $(shell uname) +# Default settings nodebin := node_modules/.bin main := src/Main.elm port := 8000 -server := $(nodebin)/webpack-dev-server --hot --inline --port $(port) + +# Automatic settings +UNAME := $(shell uname) +PATH := $(PATH):$(nodebin) +JS_PACKAGE_MNGR := $(shell which yarn || which npm) ################################################################################ # Setup ################################################################################ +# Prepare all dependencies setup: - ifeq ($(UNAME),FreeBSD) - rm -rf node_modules/elm-webpack-loader - endif git submodule init git submodule update - npm install + $(JS_PACKAGE_MNGR) install elm-package install -y - # FreeBSD compat hack - # Clone elm-webpack-loader, remove `elm` from deps and then `npm install` it. - ifeq ($(UNAME),FreeBSD) - mkdir node_modules/elm-webpack-loader - cp -r /usr/local/elm/elm-webpack-loader/* node_modules/elm-webpack-loader - endif - # ??? not sure why some bins aren't installed as executable - # this seems to be only on the FreeBSD build server chmod +x node_modules/.bin/* stats/*.sh ################################################################################ @@ -36,6 +29,7 @@ setup: list_instances = ps ax | grep -E "(elm\-make|webpack\-dev\-server)" | grep -v grep +# Compile-once compile: ifneq ($(shell $(list_instances)),) $(error Probably already building) @@ -43,6 +37,7 @@ compile: (elm-make $(main) && rm -f index.html && ./stats/succeedBuild.sh) || \ (./stats/increaseFailedBuilds.sh && false) +# Keep compiling compile-loop: -while :; do $(MAKE) compile; sleep 2; done @@ -50,13 +45,17 @@ compile-loop: # Build ################################################################################ +# Clean build enviroment prepare: - rm -rf build/ && mkdir -p build/ + rm -rf build/ && \ + mkdir -p build/ +# Update index.html and compile css build: prepare - cat static/index.html > build/index.html - $(nodebin)/elm-css src/Core/Stylesheets.elm -o static/css + cat static/index.html | touch build/index.html + elm-css src/Core/Stylesheets.elm -o static/css +# Add CSS hot-reloader build-css: prepare awk '/\<\/body/ \ {print \ @@ -64,42 +63,46 @@ build-css: prepare \<\/script\> \ "}1' \ static/index.html > build/index.html - $(nodebin)/elm-css src/Core/Stylesheets.elm -o static/css + elm-css src/Core/Stylesheets.elm -o static/css +# Creates release.tar.gz release: build - npm run build - tar -zcf release.tar.gz build/ && mv release.tar.gz build/ + webpack + tar -zcf release.tar.gz build/ && \ + mv release.tar.gz build/ ################################################################################ # Dev ################################################################################ -# For dev, first we compile the whole app, and only then we run npm. -# The rationale is simple: `npm start` will compile with debug and warn -# flags, which makes the whole step much slower. Compiling first without -# them ensures the "bulk" of the job is done quickly, and only then we -# add the debug flags. There is little difference when only a couple -# of changes are made, but it makes everything much faster when the -# whole app, with dependencies, need to be built. This usually happens -# when adding dependencies, changing branches etc. +# For dev, first we compile the whole app, and only then we watch. dev: compile build watch # Add annoying css hot reloader. Useful when editing styles. dev-css: compile build-css watch -# Start webpack +# Starts webpack server with inline & hot-reload watch: ifneq ($(shell $(list_instances)),) $(error Probably already running) endif - npm start + webpack-dev-server \ + --progress \ + --cache false \ + --port $(port) ################################################################################ # Tools ################################################################################ -server: - $(server) +# Starts webpack server without inline nor hot-reload +host: + webpack-dev-server \ + --progress \ + --cache false \ + --inline false \ + --hot false \ + --port $(port) lint: elm-format --validate src/ @@ -109,7 +112,7 @@ lint: ################################################################################ test: - $(nodebin)/elm-test + elm-test test-quick: sed 's/10/1/g' tests/Config.elm > tests/Config.elm.tmp && \ @@ -132,7 +135,6 @@ test-loop: clean: rm -rf build/* && \ - rm -f *.html && \ - rm -f release.tar.gz && \ + rm -f *.html release.tar.gz && \ git clean -id && \ git checkout tests/Config.elm diff --git a/package.json b/package.json index 4c6cd98c..1b8323a0 100644 --- a/package.json +++ b/package.json @@ -1,54 +1,32 @@ { - "name": "elm-webpack-starter", - "description": "Webpack setup for writing Elm apps", - "version": "0.8.4", - "license": "MIT", - "author": "Peter Morawiec", + "name": "heborn", + "description": "Web client for Hacker Experience 1", + "version": "0.0.1", + "license": "AGPL-3.0", "repository": { "type": "git", - "url": "https://github.com/moarwick/elm-webpack-starter" - }, - "watch": { - "elm-css": { - "patterns": [ - "src/OS/Style.elm", - "src/OS/*/Style.elm", - "src/Apps/*/Style.elm", - "src/Core/Style.elm", - "src/Core/Stylesheets.elm" - ], - "extensions": "elm" - } - }, - "scripts": { - "start": "webpack-dev-server --hot --inline --port 8000 & npm run watch", - "build": "webpack", - "reinstall": "npm i rimraf && rimraf node_modules && npm uninstall -g elm && npm i -g elm && npm i && elm package install", - "watch": "npm-watch", - "elm-css": "sleep 4 && elm-css src/Core/Stylesheets.elm -o build/css/", - "comment": "sleep 4 on elm-css is required so there is no conflict/slow-down on compilation time" - }, - "devDependencies": { - "autoprefixer": "^6.3.6", - "copy-webpack-plugin": "^4.0.1", - "css-loader": "^0.26.1", - "elm-hot-loader": "^0.5.4", - "extract-text-webpack-plugin": "^1.0.1", - "file-loader": "^0.9.0", - "html-webpack-plugin": "^2.17.0", - "postcss-loader": "^1.1.1", - "rimraf": "^2.5.2", - "style-loader": "^0.13.1", - "url-loader": "^0.5.7", - "webpack": "^1.13.1", - "webpack-dev-server": "^1.14.1", - "webpack-merge": "^2.4.0", - "elm-css": "^0.6.0" + "url": "https://github.com/hackerexperience/heborn" }, "dependencies": { - "elm-test": "0.18.2", - "leaflet": "^1.1.0", + "autoprefixer": "^7.2.1", + "copy-webpack-plugin": "^4.2.3", + "css-loader": "^0.28.7", + "elm": "^0.18.0", + "elm-css": "^0.6.1", + "elm-format": "^0.6.1-alpha", + "elm-hot-loader": "^0.5.4", + "elm-test": "^0.18.11", + "elm-webpack-loader": "^4.4.0", + "extract-text-webpack-plugin": "^3.0.2", + "file-loader": "^1.1.5", + "html-webpack-plugin": "^2.30.1", + "leaflet": "^1.2.0", "npm-watch": "^0.1.8", - "webpack-dev-server": "^1.16.3" + "postcss-loader": "^2.0.9", + "style-loader": "^0.19.0", + "url-loader": "^0.6.2", + "webpack": "^3.10.0", + "webpack-dev-server": "^2.9.5", + "webpack-merge": "^4.1.1" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 00000000..233a0372 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,5 @@ +module.exports = ({ file, options, env }) => ({ + plugins: { + 'autoprefixer': { browsers: ['last 2 versions'] }, + } +}) diff --git a/webpack.config.js b/webpack.config.js index 61f6cc90..f81a8d3a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -28,7 +28,7 @@ var commonConfig = { }, resolve: { - extensions: ['', '.js', '.elm', '.css', '.png', '.jpg'], + extensions: ['.js', '.elm', '.css', '.png', '.jpg'], alias: { leaflet_css: __dirname + "/node_modules/leaflet/dist/leaflet.css", leaflet_js: __dirname + "/node_modules/leaflet/dist/leaflet.js" @@ -51,7 +51,7 @@ var commonConfig = { }, { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, - loader: "file?publicPath=../&name=fonts/[name].[ext]" + loader: "file-loader?publicPath=../&name=fonts/[name].[ext]" }, { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, @@ -63,10 +63,11 @@ var commonConfig = { }, { test: /\.(css|scss)$/, - loader: ExtractTextPlugin.extract( 'style-loader', [ + use: [ + 'style-loader', 'css-loader', - 'postcss-loader', - ]) + 'postcss-loader' + ] } ] }, @@ -82,8 +83,6 @@ var commonConfig = { ) ], - postcss: [ autoprefixer( { browsers: ['last 2 versions'] } ) ] - }; // additional webpack settings for local env (when invoked by 'npm start') @@ -102,7 +101,7 @@ if ( TARGET_ENV === 'development' ) { { test: /\.elm$/, exclude: [/elm-stuff/, /node_modules/], - loader: 'elm-hot!elm-webpack?verbose=true&warn=true&debug=true' + loader: 'elm-hot-loader!elm-webpack-loader?verbose=true&warn=true&debug=true' } ] }, @@ -125,7 +124,7 @@ if ( TARGET_ENV === 'production' ) { { test: /\.elm$/, exclude: [/elm-stuff/, /node_modules/], - loader: 'elm-webpack' + loader: 'elm-webpack-loader' } ] },