Git Product home page Git Product logo

elm.mk's Introduction

Elm.mk

Build Status

A minimal Makefile to work on Elm projects that require external js and css. It requires a working Elm installation.

Philosophy

The main goal of this boilerplate is to minimise the needs for external dependencies while providing an effective development environment. This means that it tries as much as possible to bundle pre-compiled utilities to accomplish the needed tasks.

Features

  • Cross-platform (OS X + Linux 64bit - help with Windows would be nice)
  • Elm StartApp installation
  • Project scaffold generation
  • Elm compilation with warnings
  • Scss compilation via Wellington
  • Watch and recompile via modd
  • Images (without optimization)
  • Live reload via devd
  • File generators based on templates
  • Support for unit testing (optional)
  • Support for minified builds (experimental)

Setup from scratch

  • mkdir my_new_project && cd my_new_project
  • curl -o elm.mk https://raw.githubusercontent.com/cloud8421/elm.mk/master/elm.mk
  • make -f elm.mk install

This will generate the needed folder structure and files. Note that at the end of make install, you're left with an empty Makefile that includes elm.mk, so that you can extend it for your needs and/or override its behaviour.

Project workflow

Main commands:

  • make install: installs all needed dependencies
  • make: compiles the project into build
  • make prod: compresses compiled files in dist
  • make server: serves the build folder with a local http server
  • make watch: starts the file watcher and the http server, recompiling files on save
  • make clean: deletes all compiled files
  • make help: shows all main tasks

Some guidelines:

  • Files generated into build should not be edited manually
  • All other files can be modified
  • Source .elm files should be placed in src.
  • Use src/boot.js to start your Elm application and define all ports-related glue code with the external world. The file gets copied automatically to build.
  • styles/main.scss is the stylesheet main file.
  • index.html gets copied the way it is into build
  • All images can be placed in images/, they will be automatically copied to build/images

It may also be worth checking out the documentation for the software used in this boilerplate (like Devd or Modd), as they provide functionality that it's not covered here.

Extending install targets

Install targets represent tooling dependencies that your project has.

For example you may wanna add support for image compression using a hypothetical tool called compress, whose binary you can download.

In your Makefile, you can add a CUSTOM_INSTALL_TARGETS definition, which will be picked up by make install:

CUSTOM_INSTALL_TARGETS := bin/compress

bin/compress:
  curl -o $@ http://example.com/compress

Extending compile targets

Compile targets represent the artifacts your project builds every time you run make.

For example, if you want to add a second html page to the project, you can extend CUSTOM_COMPILE_TARGETS:

CUSTOM_COMPILE_TARGETS := build/home.html

build/home.html: home.html
  cp $< $@

Extending dist targets

Dist targets represent the artifacts your project builds every time you run make prod.

For example, if you want to add a second html page to the project, you can extend CUSTOM_DIST_TARGETS:

CUSTOM_DIST_TARGETS := dist/home.html

dist/home.html: home.html
  cp $< $@

Testing

It's possible to add support for unit testing via https://github.com/rtfeldman/node-elm-test.

To do that, it's enough to call make test, which will install the needed dependencies. Note that this requires Node to be installed.

Calling make test again will rerun the test suite.

Production builds [Experimental]

As mentioned above, running make prod will build and minify files for production via UglifyJS 2 and Wellington (i.e. css generated with compressed layout). While this seems to work fine, it's under testing to see if it holds for more complex builds than just a few files.

FAQs/Comments

I don't think this should use X, Y is a better fit.

As long as it's easy to install in portable format (i.e. download in the project folder and run), please feel free to state the case for a replacement

Why is feature X missing?

Probably because I haven't thought about it.

Why Make?

Make is ubiquitous, mostly pre-installed (or very easy to install) and language-agnostic. It takes some time to adjust to it, but it's fast, effective and modular.

This make task is not optimal, it's much better if you change it like this!

Please submit a PR, I'm happy to learn

I don't know Make, but I'd like to help. Where can I learn more?

Smashing Magazine has a very good introduction and there are good books out there. They mostly focus on usage with C, but they should work out fine.

elm.mk's People

Contributors

cloud8421 avatar c11z avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.