Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Decouple grunt #417

Merged
merged 1 commit into from
Jan 4, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion app/learning/deployment.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,18 @@ title: Deploying a Yeoman Site
sidebar: sidebars/learning.html
---

Running `grunt build` generates an optimized version of your application in the `dist` directory. There are multiple ways to version and deploy this code to production.
Running the `build` task generates an optimized version of your application in the `dist` directory. There are multiple ways to version and deploy this code to production.

## Gulp-gh-pages

Using [the `gulp-gh-pages` Gulp plugin](https://www.npmjs.com/package/gulp-gh-pages), you can let your application deploy using a specific task, such as `gulp deploy`. It takes various options:

* The Git origin, this defaults to `origin`.
* The branch to push to, defaults to `gh-pages`.
* The commit message.
* An option to specify if the branch should be pushed to the origin automatically.

For more information you can always checkout [its readme](https://github.com/rowoot/gulp-gh-pages#readme).

## Grunt-build-control task

Expand Down
18 changes: 9 additions & 9 deletions app/learning/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ sidebar: sidebars/learning.html

[What is a package manager?](#what-is-pkg-manager)

[How does Yeoman differ from Grunt?](#yeoman-vs-grunt)
[How does Yeoman differ from build tools, such as Grunt or Gulp?](#yeoman-vs-builders)

[How does Yeoman differ from tools like Brunch or Ember-cli](#yeoman-vs-Ember-Brunch)

Expand Down Expand Up @@ -52,13 +52,13 @@ A command-line interface is a means for developers to interact with a system usi
A package manager is a tool for automating the process of installing, upgrading, configuring and managing dependencies for projects. Good examples of package manager would be npm (Node.js), Bower (Web), Pypi (Python), Gem (Ruby), Composer (PHP), NuGet (.NET), etc.


### <a name="yeoman-vs-grunt"> How does Yeoman differ from Grunt?</a>
### <a name="yeoman-vs-builders"> How does Yeoman differ from build tools, such as Grunt or Gulp?</a>

Yeoman builds upon a number of open-source tools to offer an opinionated workflow that helps developers achieve common tasks more easily. [Grunt.js](http://gruntjs.com) is one of these tools and powers our underlying build process and task plugin architecture.
Yeoman builds upon a number of open-source tools to offer an opinionated workflow that helps developers achieve common tasks more easily. [Gulp](http://gulpjs.com/) and [Grunt](http://gruntjs.com/) are task runners we use. These power our underlying build process and task plugin architecture.

On top of this architecture, we've highly customized tasks, profiles and systems which work well together and also provide developers with features like our generator system and Bower integration. Yeoman takes care of configuring your Gruntfile and setup to support Sass, CoffeeScript and Require.js out of the box. With additional features like wiring, an improved `serve` and `init`.
On top of this architecture, we've highly customized tasks, profiles and systems which work well together and also provide developers with features like our generator system and Bower integration. Yeoman takes care of configuring your config files and setups Sass, CoffeeScript and Require.js out of the box. With additional features like wiring, an improved `serve` and `init`.

Developers are free to customize any Grunt tasks configured by Yeoman.
Developers are free to customize any configurations initialized by Yeoman.


### <a name="yeoman-vs-Ember-Brunch"> How does Yeoman differ from tools like Brunch or Ember-cli?</a>
Expand Down Expand Up @@ -138,7 +138,7 @@ You can also add `yeoman_test` as an environment variable with any value to perm

### <a name="livereloading"> Can I use livereloading with a custom webserver?</a>

You bet! You can remove the `connect` task from your Gruntfile and manually insert this snippet into your HTML:
You bet! You can remove the `connect` task from your Gruntfile/Gulpfile and manually insert this snippet into your HTML:

```html
<!-- livereload script -->
Expand All @@ -148,16 +148,16 @@ You bet! You can remove the `connect` task from your Gruntfile and manually inse
</script>
```

After that, simply run `grunt serve` like you normally would and enjoy automatic page refreshes.
After that, simply run the `serve` task like you normally would and enjoy automatic page refreshes.


### <a name="cloning"> What should I do after cloning a web application generated with Yeoman?</a>

Yeoman creates a `.gitignore` file for you. This file adds `node_modules` and `bower_components` folders to the blacklist. So, to run `grunt serve` and download the Javascript dependencies listed in the `bower.json` file, you need to run both:
Yeoman creates a `.gitignore` file for you. This file adds `node_modules` and `bower_components` folders to the blacklist. So, to run the `serve` task and download the Javascript dependencies listed in the `bower.json` file, you need to run both:

```sh
npm install
bower install
$ bower install
```

And check if these folders are created correctly.
Expand Down
35 changes: 30 additions & 5 deletions app/learning/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ The Yeoman workflow is comprised of three core tools for improving your producti

* [yo](https://github.com/yeoman/yo) - the scaffolding tool from Yeoman
* [bower](http://bower.io) - the package management tool
* [grunt](http://gruntjs.com) - the build tool
* A build tool, such as [Grunt](http://gruntjs.com/) or [Gulp](http://gulpjs.com/).

Each of these projects are independently maintained by their respective communities, but work well together as a part of a prescriptive workflow for keeping you effective. Let’s walk through what these binaries can do.

Expand All @@ -26,10 +26,10 @@ Yo is maintained by the Yeoman project and offers web application scaffolding, u
First, you'll need to install `yo` and other required tools:

```sh
npm install -g yo bower grunt-cli
npm install -g yo bower grunt-cli gulp
```

*see the sections about __Bower__ and __Grunt__ below for more information*
*see the sections about __Bower__, __Gulp__ and __Grunt__ below for more information*

*npm is the package manager for [Node.js](http://nodejs.org/) and comes bundled with it.*

Expand All @@ -44,7 +44,7 @@ To scaffold a web application, you'll need to install the `generator-webapp` gen
npm install -g generator-webapp
```

This is the default web application generator that will scaffold out a project containing [HTML5 Boilerplate](http://html5boilerplate.com), [jQuery](http://jquery.com), [Modernizr](http://modernizr.com), and [Bootstrap](http://twbs.github.io/bootstrap). You'll have a choice during the interactive prompts to not include many of these.
This is the default web application generator that will scaffold out a project containing [HTML5 Boilerplate](http://html5boilerplate.com), [jQuery](http://jquery.com), [Modernizr](http://modernizr.com), and [Bootstrap](http://twbs.github.io/bootstrap). You'll have a choice during the interactive prompts to not include many of these. This generator will use __Grunt__, while others may use __Gulp__ or other alternative set of build tools.

Now that the generator is installed, create a directory for your new project

Expand Down Expand Up @@ -155,6 +155,31 @@ It’s as simple as that.

*Your chosen generator may not include the grunt tasks "bower" and "wiredep". You can read more about how to install and use these at [grunt-bower-requirejs](https://github.com/yeoman/grunt-bower-requirejs) and [grunt-wiredep](https://github.com/stephenplusplus/grunt-wiredep).*

## Gulp

Gulp is a task-based command-line tool for JavaScript projects. It can be used to build projects, but also exposes several commands which you will want to use in your workflow. Many of these commands utilize Grunt tasks under the hood which are maintained by the Yeoman team.

### Gulp commands

```sh
# Preview an app you have generated (with Livereload).
$ gulp serve

# Run the unit tests for an app.
$ gulp test

# Build an optimized, production-ready version of your app.
$ gulp
```

These commands can be used together with the yo CLI for a seamless development workflow:

```sh
yo webapp
$ gulp serve
$ gulp test
$ gulp
```

## Grunt

Expand All @@ -173,7 +198,7 @@ $ grunt test
$ grunt
```

These commands can be used together with the yo binary for a seamless development workflow:
These commands can be used together with the yo CLI for a seamless development workflow:

```sh
yo webapp
Expand Down
6 changes: 3 additions & 3 deletions app/learning/support.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ The first step should always be to run `yo doctor`. This command will troublesho

## Getting Support

Yeoman provides an optimized **scaffolding** and workflow experience for creating compelling web applications. Developers use Yeoman together with Grunt, for **building** their projects and Bower for **package management**. A typical workflow between this trinity of tools might look like:
Yeoman provides an optimized **scaffolding** and workflow experience for creating compelling web applications. Developers use Yeoman together with build tools, for **building** their projects and Bower for **package management**. A typical workflow between this trinity of tools might look like:

```sh
yo webapp
Expand All @@ -33,7 +33,7 @@ Our scaffolds (such as angular above) are community-driven, with several of our

### Build issues

As we recommend using Grunt for building your projects, the [Grunt issue tracker](https://github.com/gruntjs/grunt/issues) should be used for support issues around building projects. Keep in mind however that if you have an issue with a specific task (e.g CoffeeScript compilation) it probably makes more sense to submit a bug report to [grunt-contrib](https://github.com/gruntjs/grunt-contrib) to address this as the official Grunt tracker should not be used for such issues.
If you're having issues with your build tooling, you will need to open an issue in the issue tracker of your build tool. Keep in mind however that if you have an issue with a specific task (e.g CoffeeScript compilation) it probably makes more sense to submit a bug report to [grunt-contrib](https://github.com/gruntjs/grunt-contrib) to address this as the official Grunt tracker should not be used for such issues.

Issue trackers for some of the common tasks used in the Yeoman workflow can be found below:

Expand All @@ -44,4 +44,4 @@ Issue trackers for some of the common tasks used in the Yeoman workflow can be f

### Package management issues

If you have installed a package using Bower, updated a package or are experiencing issues managing packages, the [Bower issue tracker](https://github.com/twitter/bower) should be used for submitting bug reports. The Yeoman workflow typically relies on Grunt for minification/concat of such dependencies, however we will let you know if an issue submitted is a Bower issue or a Yeoman issue.
If you have installed a package using Bower, updated a package or are experiencing issues managing packages, the [Bower issue tracker](https://github.com/twitter/bower) should be used for submitting bug reports. The Yeoman workflow typically relies on Grunt or Gulp for minification/concat of such dependencies, however we will let you know if an issue submitted is a Bower issue or a Yeoman issue.