Skip to content

Commit

Permalink
Merge pull request #6 from sir-dunxalot/develop
Browse files Browse the repository at this point in the history 
- Upgraded to match Ember CLI 1.5.0 with contentFor options
- Exposed options to customize contentFor blocks
- Moved Documentation to wiki
- Added basic test
  • Loading branch information
Duncan Walker committed Jan 1, 2015
2 parents 999d177 + 8d0d0d2 commit 1e960e9
Show file tree
Hide file tree
Showing 16 changed files with 192 additions and 250 deletions.
2 changes: 1 addition & 1 deletion .editorconfig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,5 @@ indent_size = 2
indent_style = space
indent_size = 2

[*.md]
[*.{diff,md}]
trim_trailing_whitespace = false
3 changes: 3 additions & 0 deletions .gitmodules
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[submodule "docs"]
path = docs
url = [email protected]:sir-dunxalot/ember-cli-concat.wiki.git
3 changes: 3 additions & 0 deletions .travis.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ language: node_js

sudo: false

git:
submodules: false

cache:
directories:
- node_modules
Expand Down
4 changes: 2 additions & 2 deletions Brocfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
var EmberAddon = require('ember-cli/lib/broccoli/ember-addon');

var app = new EmberAddon({
storeConfigInMeta: false,
fingerprint: {
enabled: true,
},
emberCliConcat: {
enabled: false
/* Add custom options here */
/* Test custom options here */
}
});

Expand Down
248 changes: 37 additions & 211 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,253 +1,79 @@
# Ember-cli-concat
Ember-cli-concat [![Build Status](https://travis-ci.org/sir-dunxalot/ember-cli-concat.svg?branch=develop)](https://travis-ci.org/sir-dunxalot/ember-cli-concat) [![Ember Addon](https://s3.amazonaws.com/images.jebbit.com/ember/badge.svg)](//emberaddons.com)
======

`ember-cli-concat` is an Ember CLI addon that:
- Concatenates your javascript files into a single js file for production
- Concatenates your stylesheets into a single css file for production
- Automatically adds the relevant `<script>` and `<style>` tags to your index.html file
Ember CLI Concat is an Ember addon that concatinates Ember CLI's app and vendor files into a single JS file and a single CSS file in production environments. In other words, less HTTP requests and a faster page load speed!

In other words, in production builds `vendor.css` and `app-name.css` will become `app.css`, and the same for the javascript files. This addon also handles the `<script>` and `<link rel="stylesheet">` tags in your index.html file so you don't have to worry about requesting assets that don't exist.
By default:
- In production environments:
- `vendor.css` and `app-name.css` will become `app.css`
- `vendor.js` and `app-name.js` will become `app.js`
- In all environments:
- Only the relevant `<script>` and `<link rel="stylesheet">` will be added to your index.html file so you don't have to worry about requesting assets that don't exist
- Source maps will be produced

**By default, concatenation only takes place in production builds**


## Contents

- [Installation](#installation)
- [Customizable options](#customizable-options)
- [Asset fingerprinting](#asset-fingerprinting)
- [Using with Ember Testing](#using-with-ember-testing)
- [Documentation](#documentation)
- [Features in the Works](#features-in-the-works)
- [Issues](#issues)
- [Development](#development)
- [Inspirational quotation](#inspirational-quotation)

## Installation

Add the package:
## Installation

```
npm install --save-dev ember-cli-concat
```

And remove the main `<script>` and `<link rel="stylesheet">` tags from your app's main HTML file (usually `app/index.html`):

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dummy</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

{{content-for 'head'}}

<!-- Removed stylesheets -->
<!-- <link rel="stylesheet" href="assets/vendor.css"> -->
<!-- <link rel="stylesheet" href="assets/app-name.css"> -->
</head>
<body>
{{content-for 'body'}}

<!-- Removed scripts -->
<!-- <script src="assets/vendor.js"> -->
<!-- <script src="assets/app-name.js"> -->
</body>
</html>
```

*Please note: usage with Ember Testing requires you to change your `tests.dummy/app/index.html` file. See the section on [using with Ember Testing](#using-with-ember-testing) for more details.*

## Customizable Options

Several options are made available for you to customize the addon. They can be set in your app's Brocfile as follows:

```js
var app = new EmberApp({
emberCliConcat: {
enabled: true,
footer: null,
forceConcatination: false,
header: null,
outputDir: 'assets',
outputFileName: 'app',
useSelfClosingTags: false,
wrapScriptsInFunction: true
}
});
```


#### enabled

Disables concatenation of files no matter what other options are set (e.g. `forceConcatination: true`). Useful for debugging purposes.

Property | Value
---------|--------
name | enabled
type | Boolean
default | true


#### footer

The string to add to the end of all concatenated files. Usually this is a comment. For example:

```js
string: '// Copyright © I Am Devloper 2014'
```

Property | Value
---------|--------
name | footer
type | String
default | null


#### forceConcatination

An override the developer can utilize to concatenate regardless of the environment. Useful for debugging purposes.

Property | Value
---------|--------
name | forceConcatination
type | Boolean
default | false


#### header

The string to add to the start of all concatenated files. Usually this is a comment. For example:

```js
string: '// Author: I Am Devloper'
```

Property | Value
---------|--------
name | header
type | String
default | null


#### outputDir

The output directory that the concatenated files will be saved to. Define it as a relative path with no opening or closing slashes. For example:
Once you have installed the NPM module you must follow the [setup instructions]() to make sure your `index.html` files are not requesting resources you don't need.

`outputDir` is combined with `outputFileName` to determine the full file path for saving concatenated files.

```js
outputDir: 'assets'
// or
outputDir: 'assets/public'
```

Property | Value
---------|--------
name | outputDir
type | String
default | 'assets'
## Documentation

Documentation including installation, usage, and customizable options is available [in the wiki](https://github.com/sir-dunxalot/ember-cli-concat/wiki).

#### useSelfClosingTags

Whether or not to use self closing HTML tags for the `<style>` and `<link>` tags to be compatible with certain (outdated :p) templating engines.
## Features in the Works

For example, if you set `useSelfClosingTags` to `true`:
- Test suite
- Asset map support (especially in test environment)

```html
<link href="assets/app.css">
<!-- Becomes... -->
<link href="assets/app.css" />
```

Property | Value
---------|--------
name | useSelfClosingTags
type | Boolean
default | false
## Issues

If you have any issues or feature requests/ideas, please [open an issue](https://github.com/sir-dunxalot/ember-flash-messages/issues/new) or submit a PR.

#### outputFileName

The name of the concatenated file that will hold the styles or script for your project. Define it as a string with no file extention. This addon will automatically append the require file extentions. For example:
## Development

```js
outputFileName: 'app' // Results in app.css and app.js being created
```shell
git clone https://github.com/sir-dunxalot/ember-cli-concat.git
ember install
ember s
```

The full file path is determine by `outputFileName` and `outputDir`. For example:
The test suite can be ran as follows:

```js
outputDir: 'assets',
outputFileName: 'app'
// Results in assets/app.css and assets/app.js being created
```shell
ember test
```

Property | Value
---------|--------
name | outputFileName
type | String
default | 'app'


#### wrapScriptsInFunction
### Working on wiki documentation:

Whether or not to wrap the concatenated javascript in an eval statement.
Clone the repo as above. Then run:

Property | Value
---------|--------
name | wrapScriptsInFunction
type | Boolean
default | true

## Asset Fingerprinting

`ember-cli-concat` is compatible with `broccoli-asset-rev` ([repo](https://github.com/rickharrison/broccoli-asset-rev)) out-of-the-box. If you require support for other 'link-changing' addons, please let me know.

## Using With Ember Testing

Ember CLI uses a dummy app to run your tests against. This app has its own `index.html` file and, therefore, you must change it like you changed your main `index.html` file previously.

Remove your `vendor`, `bar`, and `test-support` tags as below. Don't worry - this addon will write them for you on-the-fly.

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bar Tests</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

{{content-for 'head'}}
{{content-for 'test-head'}}

<!-- Removed stylesheets -->
<!-- <link rel="stylesheet" href="assets/vendor.css"> -->
<!-- <link rel="stylesheet" href="assets/bar.css"> -->
<!-- <link rel="stylesheet" href="assets/test-support.css"> -->
<style>
// Ember Testing inline styling here
</style>
</head>
<body>
{{content-for 'body'}}
{{content-for 'test-body'}}
<!-- Removed scripts -->
<!-- <script src="assets/vendor.js"></script> -->
<!-- <script src="assets/test-support.js"></script> -->
<!-- <script src="assets/bar.js"></script> -->
<script src="testem.js"></script>
<script src="assets/test-loader.js"></script>
</body>
</html>
```shell
cd docs
git submodule update --init --recursive # Updates submodule
```

## Issues
You can open a PR to the documentation, as usual. Please note it is technically a seperate git repo.

Please open an issue or PR.

## Inspirational Quotation

Expand Down
4 changes: 2 additions & 2 deletions bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
"handlebars": "~1.3.0",
"jquery": "^1.11.1",
"ember": "1.8.1",
"ember-data": "1.0.0-beta.11",
"ember-resolver": "~0.1.10",
"ember-data": "1.0.0-beta.12",
"ember-resolver": "~0.1.11",
"loader.js": "stefanpenner/loader.js#1.0.1",
"ember-cli-shims": "stefanpenner/ember-cli-shims#0.0.3",
"ember-cli-test-loader": "rwjblue/ember-cli-test-loader#0.0.4",
Expand Down
1 change: 1 addition & 0 deletions docs
Submodule docs added at 6739b5
Loading

0 comments on commit 1e960e9

Please sign in to comment.