Front End Tasks

Command line tool for client side web application development. Great for develoeprs who prefer to write plain html, css, and javascript that works without any special pre-processing. This tool helps optimize, lint, and test that code.

Installation

$ gem install front_end_tasks

The fe command will be available after installing Front End Tasks.

Usage

Front End Tasks can be used from the command line or scripted with Ruby.

build

Compiles the given html file by combining and minifying javascript and stylesheet tags according to speical html comments (see HTML Comments section).

$ fe build path/to/public_dir path/to/public_dir/index.html

FrontEndTasks.build('path/to/public_dir', './build', ['path/to/public_dir/index.html'])

server

Run a development server on localhost.

$ fe server --public_dir app/

FrontEndTasks.server(:public_dir => './app')

lint

Run the given files through JSLint.

$ fe lint app/js/file_to_lint.js app/js/another_file.js

FrontEndTasks.lint('./app/js/file_to_lint.js', './app/js/another_file.js')

spec

Run Jasmine specs

$ fe spec --source_files app/js/post.js --spec_files spec/PostSpec.js

FrontEndTasks.spec({
  :source_files => ['app/js/post.js'],
  :spec_files   => ['spec/PostSpec.js']
})

gzip

Create a compressed .gz version of the given files

$ fe gzip app/js/app.js app/js/home.js

FrontEndTasks.gzip('app/js/app.js', 'app/js/home.js')

list_scripts

List the javascript files that are included in the html (script tags) or js (importScripts) file

$ fe list_scripts ./app/index.html

FrontEndTasks.list_scripts('./app/index.html')

HTML Comments

build:script

Combine and minify scripts. Takes an argument that specifies the resulting file. See the following example

<!-- build:script js/scripts.min.js -->
<script src="/js/app.js"></script>
<script src="/js/home.js"></script>
<!-- /build -->

The above combine and minify app.js and home.js together into scripts.min.js

<script src="/js/scripts.min.js"></script>

Note: Only script tags that reference local urls are allowed between build:script and /build html comments.

build:style

Similar to build:script, but for stylesheets

<!-- build:style css/styles.min.css -->
<link href="vendor/bootstrap-3.1.1-dist/css/bootstrap.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<!-- /build -->

The above becomes

<link href="css/styles.min.css" rel="stylesheet">

Note: Only link tags that reference local urls are allowed between build:style and /build html comments.

HTML Script Target Attributes

The build command accepts a src_targets option. It is useful for including certain versions of a script. For example, Ember.js comes with a development version with debugging tools and a lighter weight production version. We can include Ember into our HTML like this:

<script src="ember.js"
  build-production-src="ember.prod.js"></script>

By default, we use the ember.js development version by specifying it with the src attribute. To build for production we can pass the src_targets option to the build command

$ fe build path/to/public_dir path/to/public_dir/index.html --src_targets=production

FrontEndTasks.build('path/to/public_dir', './build', ['path/to/public_dir/index.html'], :src_targets => ['production'])

It is possible to specify multiple src_targets.

Target specific script

The src attribute may be omitted if it is only relevant for a target. This is useful for including a script for a test target only.

<script build-test-src="tests/app_tests.js"></script>

The above script is not included in development (since the src is not specified), but it can be included when running the build command with test included in src_targets.

Full example

<script src="ember.js"
  build-production-src="ember.prod.js"></script>
<script src="config/development.js"
  build-bitcoin-mainnet-src="config/bitcoin_mainnet.js"
  build-bitcoin-testnet-src="config/bitcoin_testnet.js"></script>
<script build-test-src="tests/app_tests.js"></script>

The following combination of src_targets will include the specified scripts.

No src_targets

ember.js
config/development.js

src_targets=production

ember.prod.js
config/development.js

src_targets=production bitcoin-mainnet

ember.prod.js
config/bitcoin_mainnet.js

src_targets=bitcoin-testnet

ember.js
config/bitcoin_testnet.js

src_targets=test

ember.js
config/development.js
tests/app_tests.js

External References

The build command will find any references to other files in the project and include them in the resulting build.

Stylesheets

CSS Files may reference fonts, images, etc... by using url(...).

The contents inside url() are flattened to the file's basename. For example:

@font-face {
  src: url('../fonts/glyphicons-halflings-regular.eot');
}

Turns into

@font-face {
  src: url('glyphicons-halflings-regular.eot');
}

The above font file will be moved into the same directory as the combined stylesheet (remember that file paths from stylesheets are relative to the location of the calling stylesheet).

Note: Since all the files references from stylesheets are placed in the same directory, the filenames must be unique.

Javascripts

Javascript files may have references to worker scripts. For example:

var worker = new Worker('/js/workers/worker.js')

The worker script references are kept the same. The worker script is copied to the build with the same directory structure. Worker scripts are then processed by replacing importScripts calls.

importScripts('/js/workers/worker_helper.js')

The above is replaced with the contents of the given file, then the whole worker script is minified.

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.