All of the above tasks (aside from Grunt itself) are run via Grunt. They can be run individually, if so desired (see gruntfile.js), or they can be grouped in cumulative tasks listed in the Quick-Start Guide below.
In theory, Grunt can be hauled out and replaced with any node.js-based build system, but Grunt has proven to be stable and performant for the purposes of this Starter Kit, so it's the de facto choice for development.
We use modular, classical ES2015 for all front-end JavaScript development work unless we're not allowed to, for any reason. Please bear this in mind when using this Starter Kit. The Babel Loader has been include in the Webpack Grunt task. It is up to you to decide what level of bleeding edge features you wish to use, but a good rule of thumb is to try to keep it as close to the ECMA-262 standard as possible, to ensure forwards-compatibility.
- Download and install node.js or io.js
- Pull this git repo
- Open a terminal window
npm install- Installs all package dependenciesgrunt- Builds and watchesgrunt dist- Builds and minifiesgrunt stage- Builds, minified and deploys. See below for more information.
Files and folders have been arranged so as to maintain clear separation of the front-end stack, composability, reasonability, and compatibility with multiple CMS (e.g. we use Twig, which is incredibly powerful, works in Wordpress with Timber, as well as Drupal 8, and can easily be retrofit into ExpressionEngine).
Please check out the repo and have a look at twig/index.twig, js/app.js and styl/app.styl respectively, as well as the subfolders contained within their directories, to gain a good and easy-to-grok overview of the file and folder structure.
To enable live reload, add the line:
<script src="http://localhost:8001/livereload.js"></script>
To your HTML files. This is best done using a single master Twig layout, so that it propagates to all the pages of your site. Using Live Reload is a lightweight, fully automated solution to your having to manually reload open pages in each of your open browsers, when a file is updated.
Use the grunt command once you've done so, to kickstart Live Reload after an initial build.
The src/config folder should contain only JSON files that can be used as configuration variables, both in JavaScript (using include statements) and in the grunt-twig-render task (the file location can be specified under twigRender.static.files.data in gruntfile.js).
Please write JavaScript documentation according to ESDoc standards, and generate it using esdoc. JavaScript should be fully documented in order to reduce technical debt and increase readability, and for that purpose, ESDoc provides a coverage report.
By default, the .gitignore in this repo ignores all NPM package dependency files and operating system shrapnel. It also ignores files in the dist directory, as dist files ought not to be committed.
A task named grunt-sftp-deploy has been included. It's for deploying work to servers that do not allow direct SSH access and/or prevent Git from being installed. Please refer to this documentation about creating an .ftppass file to store usernames and passwords.
Testing and coverage frameworks have been deliberately excluded from the Starter Kit to promote developer eccentricity and adaptability. Pick a test framework that works for you and a coverage kit that plays nicely with ECMAScript 2015.