scriptype/Makefile

## readme.md

      
    Raw
  

              readme.md
            
          
    This works in this folder structure:
public
  + node_modules
  + Makefile
  + package.json
  + src
    + index.html
    + fonts
      + ...
    + images
      + ...
    + scripts
      + app.js
      + ...
    + stylesheets
      + style.css
      + ...
  

and with dependencies:
{
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.3.0",
    "browserify": "^13.0.1",
    "cssnano-cli": "^1.0.4",
    "handlebars": "^4.0.5",
    "html-minifier": "^2.1.3",
    "livereload": "git+https://github.com/scriptype/node-livereload.git",
    "postcss-cli": "^2.5.2",
    "postcss-import": "^8.1.2",
    "uglifyjs": "^2.4.10",
    "watchify": "^3.7.0"
  }
}
Node and npm should be installed. Also shouldn't work on Windows for obvious reasons.

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="{{ STYLE_FILE }}">
  </head>
  <body>
    <script async defer type="text/javascript" src="{{ SCRIPT_FILE }}"></script>
    {{#if LIVE_RELOAD}}
      <script>
        document.write(
          '<script src="http://' +
              (location.host || 'localhost').split(':')[0] +
              ':35729/livereload.js?snipver=1"></' +
              'script>')
      </script>
    {{/if}}
  </body>
</html>

## Makefile
BIN = ./node_modules/.bin
DIST = ./dist
SRC = ./src

HTML_INPUT = $(SRC)/index.html
HTML_OUTPUT = $(DIST)/index.html

CSS_INPUT_DIR = $(SRC)/stylesheets
CSS_INPUT = $(CSS_INPUT_DIR)/style.css
CSS_OUTPUT_MIN_DIR = $(DIST)
CSS_OUTPUT_MIN = $(CSS_OUTPUT_MIN_DIR)/style.min.css

JS_INPUT_DIR = $(SRC)/scripts
JS_INPUT = $(JS_INPUT_DIR)/app.js
JS_OUTPUT = $(DIST)/all.js
JS_OUTPUT_MIN = $(DIST)/all.min.js

all: clean copy_static html js
	@echo "Finished $@. `date`"
	@make watch

release: clean copy_static post_html post_css post_js
	@echo "Finished $@. `date`"

clean:
	@echo "Cleaning..."
	@rm -rf $(DIST)
	@mkdir $(DIST)

watch:
	@make watch_js & \
		$(BIN)/livereload "$(DIST), $(CSS_INPUT_DIR)"

html:
	@make replace_path \
		SCRIPT_FILE=$(JS_OUTPUT) \
		STYLE_FILE=$(CSS_INPUT) \
		LIVE_RELOAD='true'

post_html:
	@make replace_path \
		SCRIPT_FILE=$(JS_OUTPUT_MIN) \
		STYLE_FILE=$(CSS_OUTPUT_MIN) \
		LIVE_RELOAD='false'
	@echo "Minifying markup..."
	@$(BIN)/html-minifier \
		--collapse-whitespace \
		--remove-attribute-quotes \
		--remove-comments \
		--remove-empty-attributes \
		--remove-redundant-attributes \
		--output $(DIST)/tmp.index.html \
		$(HTML_OUTPUT)
	@mv $(DIST)/tmp.index.html $(HTML_OUTPUT)

post_css:
	@echo "PostCSS..."
	@$(BIN)/postcss \
		--use autoprefixer \
		--use postcss-import \
		--local-plugins \
		--output $(DIST)/tmp.style.css \
		$(CSS_INPUT)
	@echo "Minifying stylesheets..."
	@$(BIN)/cssnano $(DIST)/tmp.style.css $(CSS_OUTPUT_MIN)
	@rm $(DIST)/tmp.style.css

js:
	@echo "Browserify..."
	@$(BIN)/browserify \
		--delay=100 \
		--verbose \
		--transform [ babelify --presets [ es2015 react ] ] \
		--outfile $(JS_OUTPUT) \
		--debug \
		$(JS_INPUT)

watch_js:
	@echo "Started watching JS..."
	@$(BIN)/watchify \
		--delay=100 \
		--verbose \
		--transform [ babelify --presets [ es2015 react ] ] \
		--outfile $(JS_OUTPUT) --debug \
		$(JS_INPUT)

post_js: js
	@echo "Minifying scripts..."
	@$(BIN)/uglifyjs $(JS_OUTPUT) -o $(JS_OUTPUT_MIN)
	@rm $(JS_OUTPUT)

copy_static:
	@echo "Copying static files..."
	@mkdir -p $(DIST)/fonts
	@mkdir -p $(DIST)/images
	@cp -r $(SRC)/fonts/ $(DIST)/fonts

replace_path:
	@echo "Updating markup..."
	@$(BIN)/handlebars $(HTML_INPUT) -f $(DIST)/tmp.index.hbs.js
	@node -p " \
	  var path = require('path'); \
	  var Handlebars = require('handlebars'); \
	  var template = require('./$(DIST)/tmp.index.hbs.js'); \
	  var scriptPath = path.resolve('$(SCRIPT_FILE)'); \
	  var stylePath = path.resolve('$(STYLE_FILE)'); \
	  process.chdir('$(DIST)'); \
	  Handlebars.templates['index.html']({ \
	    SCRIPT_FILE: path.relative(process.cwd(), scriptPath), \
	    STYLE_FILE: path.relative(process.cwd(), stylePath), \
	    LIVE_RELOAD: $(LIVE_RELOAD) \
	  }) \
	" > $(HTML_OUTPUT)
	@rm $(DIST)/tmp.index.hbs.js
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="{{ STYLE_FILE }}">
	</head>
	<body>
	<script async defer type="text/javascript" src="{{ SCRIPT_FILE }}"></script>
	{{#if LIVE_RELOAD}}
	<script>
	document.write(
	'<script src="http://' +
	(location.host \|\| 'localhost').split(':')[0] +
	':35729/livereload.js?snipver=1"></' +
	'script>')
	</script>
	{{/if}}
	</body>
	</html>
	BIN = ./node_modules/.bin
	DIST = ./dist
	SRC = ./src

	HTML_INPUT = $(SRC)/index.html
	HTML_OUTPUT = $(DIST)/index.html

	CSS_INPUT_DIR = $(SRC)/stylesheets
	CSS_INPUT = $(CSS_INPUT_DIR)/style.css
	CSS_OUTPUT_MIN_DIR = $(DIST)
	CSS_OUTPUT_MIN = $(CSS_OUTPUT_MIN_DIR)/style.min.css

	JS_INPUT_DIR = $(SRC)/scripts
	JS_INPUT = $(JS_INPUT_DIR)/app.js
	JS_OUTPUT = $(DIST)/all.js
	JS_OUTPUT_MIN = $(DIST)/all.min.js

	all: clean copy_static html js
	@echo "Finished $@. `date`"
	@make watch

	release: clean copy_static post_html post_css post_js
	@echo "Finished $@. `date`"

	clean:
	@echo "Cleaning..."
	@rm -rf $(DIST)
	@mkdir $(DIST)

	watch:
	@make watch_js & \
	$(BIN)/livereload "$(DIST), $(CSS_INPUT_DIR)"

	html:
	@make replace_path \
	SCRIPT_FILE=$(JS_OUTPUT) \
	STYLE_FILE=$(CSS_INPUT) \
	LIVE_RELOAD='true'

	post_html:
	@make replace_path \
	SCRIPT_FILE=$(JS_OUTPUT_MIN) \
	STYLE_FILE=$(CSS_OUTPUT_MIN) \
	LIVE_RELOAD='false'
	@echo "Minifying markup..."
	@$(BIN)/html-minifier \
	--collapse-whitespace \
	--remove-attribute-quotes \
	--remove-comments \
	--remove-empty-attributes \
	--remove-redundant-attributes \
	--output $(DIST)/tmp.index.html \
	$(HTML_OUTPUT)
	@mv $(DIST)/tmp.index.html $(HTML_OUTPUT)

	post_css:
	@echo "PostCSS..."
	@$(BIN)/postcss \
	--use autoprefixer \
	--use postcss-import \
	--local-plugins \
	--output $(DIST)/tmp.style.css \
	$(CSS_INPUT)
	@echo "Minifying stylesheets..."
	@$(BIN)/cssnano $(DIST)/tmp.style.css $(CSS_OUTPUT_MIN)
	@rm $(DIST)/tmp.style.css

	js:
	@echo "Browserify..."
	@$(BIN)/browserify \
	--delay=100 \
	--verbose \
	--transform [ babelify --presets [ es2015 react ] ] \
	--outfile $(JS_OUTPUT) \
	--debug \
	$(JS_INPUT)

	watch_js:
	@echo "Started watching JS..."
	@$(BIN)/watchify \
	--delay=100 \
	--verbose \
	--transform [ babelify --presets [ es2015 react ] ] \
	--outfile $(JS_OUTPUT) --debug \
	$(JS_INPUT)

	post_js: js
	@echo "Minifying scripts..."
	@$(BIN)/uglifyjs $(JS_OUTPUT) -o $(JS_OUTPUT_MIN)
	@rm $(JS_OUTPUT)

	copy_static:
	@echo "Copying static files..."
	@mkdir -p $(DIST)/fonts
	@mkdir -p $(DIST)/images
	@cp -r $(SRC)/fonts/ $(DIST)/fonts

	replace_path:
	@echo "Updating markup..."
	@$(BIN)/handlebars $(HTML_INPUT) -f $(DIST)/tmp.index.hbs.js
	@node -p " \
	var path = require('path'); \
	var Handlebars = require('handlebars'); \
	var template = require('./$(DIST)/tmp.index.hbs.js'); \
	var scriptPath = path.resolve('$(SCRIPT_FILE)'); \
	var stylePath = path.resolve('$(STYLE_FILE)'); \
	process.chdir('$(DIST)'); \
	Handlebars.templates['index.html']({ \
	SCRIPT_FILE: path.relative(process.cwd(), scriptPath), \
	STYLE_FILE: path.relative(process.cwd(), stylePath), \
	LIVE_RELOAD: $(LIVE_RELOAD) \
	}) \
	" > $(HTML_OUTPUT)
	@rm $(DIST)/tmp.index.hbs.js