Adgile

Commands

The commands below execute the different tasks available to you in Adgile. Each task is invoked by using the keyword adgile or the initials adg.
Now, open a terminal window, grab a coffee and let's get to work.

Overview

adgile || adg

Use the basic keyword to get an overview of all the available commands in your command line.
You can append any of these flags for the same purpose: -i, --info, -h or --help.

Build

adg build

When using the build task, Adgile does the following things:

  • Empty the export folder
  • Compile SASS to CSS
  • Inject CSS and JS into the html-templates
  • Inject partials into the referencing html-templates
  • Copy all resulting html-, css-, js-, image, document and other files to an export folder

Note that the export folder is cleared at the start of every build. So make sure you edit the template files and not the export files, otherwise your changes will be lost.

Serve

adg build -s || adg build --serve

When adding the --serve flag to your build task, Adgile launches a local server and goes through the same steps as above. Afterwards, it watches your local project for any changes you make. When a change is detected, the corresponding html-, sass- or js-file is compiled and the browser automatically refreshes and shows your changes.

By default, this local server can be accessed by visiting your localhost at port 3000 (http://localhost:3000). When serving multiple adgile builds simultaneously, each successive build can be viewed on an incrementation of this port (eg. 3001, 3002, etc).

This port can also be visited when using a proxy or a virtual host.

You can test your application on multiple devices locally, by replacing localhost with your local IP address. This address can change and is found in your network settings. For easy access, it is also printed in your command line after your first serve is ready.

Production

adg build -p || adg build --production

When adding the --production flag to your build task, Adgile optimizes your project for deployment to a live environment. In addition to the build steps mentioned earlier, it also does the following:

  • Minify and optimize images for display on the web
  • Minify, uglify and concatenate all JavaScript files (most often into a single core-libs.min.js file)
  • Strip all comments and debug statements (like console.log, etc)
  • Minify all compiled CSS files into a single main.min.css file
  • Remove the .sass-cache folder from your project
  • Minify all HTML files (turned off by default in the config.json)

It is still important to write your code as DRY and clear as possible, but this step does take away some of the clutter that otherwise would slow down your beautiful website. Therefore I advise you to always run through this production step before pushing your website to a live environment.

Note that this is the most demanding process for Adgile to run, so in larger projects this step can take a few minutes to complete, especially if your website has a lot of imagery.

Serve & Production

There may be some use cases in which you want to have the production build served, instead of the development build. For example, when either the CSS or JavaScript files are absolutely linked and injection is not possible. This is sometimes true when integrating adgile in a back-end setup or CMS like Wordpress. You can serve in production with the following command:

adg build -sp

The "s" stands for serve and the "p" for production.

Note that compilation is a lot slower here and it might take a few seconds for your browser to update.

Tunnel

adg build -s -t || adg build -s --tunnel

While your local IP address allows you to share your current build with people on the same network, you can't share it across networks this way. Enter the Tunnel! By appending -t or --tunnel to your serve command, Adgile generates a URL that can be shared to people elsewhere on a different network.

Page Speed Insights

adg build -s -t --psi || adg build -s --tunnel --psi

There are many online services where you can check the speed of your website, and Adgile has a basic PSI-checker built into it. If you want to see if your website performs well, add the --psi flag to your serve command. A tunnel is required for this.

This process may take from 30 seconds to a couple of minutes before the result is printed to your command line. A minimal score of 80 is recommended.

Open Browser

adg build -s -o || adg build -s --open

When appending the flag -o or --open to your command, you open your active project in a new browser window or in a new tab if your browser was already open.

Open Editor

adg build -s -e || adg build -s --edit

When appending the flag -e or --edit to your command, you open the current working directory in the code editor that is specified in the project's config.json. The default editor for Adgile is Sublime Text 3.

Check Version

adg -v || adg --version

This simply prints out the current version of your Adgile package.

Verbose

adg build --verbose

The --verbose flag makes every processing step visible in the command line. This makes it easier to pinpoint in which specific step Adgile encounters an error or warning. Therefore, this flag is almost only used for debugging purposes.

Inline

adg inline

This command is extremely useful in email development. It simply inlines all of your css styles and exports the result into an _export folder, but without all the quirks and glitches in any online free inliner tool.

Like the build-command, you have to be in the current working directory. The command line tells you how many files were inlined this way.