-
Notifications
You must be signed in to change notification settings - Fork 682
Descriptions are more tech-agnostic, and yarn syntax is up-to-date #574
Changes from all commits
818fb63
791a334
0761a05
bd22e26
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,17 @@ | ||
# Gulp Starter on Rails | ||
# Blendid on Rails | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. should this section mention that it's probably a good idea to use webpacker instead of this, now that webpacker exists? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm keeping this PR narrowly focused on the word "gulp" and the " |
||
```bash | ||
yarn run blendid -- init-rails | ||
yarn run blendid init-rails | ||
``` | ||
|
||
Using gulp-starter with Rails (instead of the built in asset pipeline) is actually pretty easy. This directory contains the extra pieces that get put in place by the `init-rails` task. | ||
Using Blendid with Rails (instead of the built in asset pipeline) is actually pretty easy. This directory contains the extra pieces that get put in place by the `init-rails` task. | ||
|
||
## Overview | ||
Firstly, note that we're going to leave the existing asset pipeline in place. Many gems rely on it (e.g, Active Admin), and it's a good idea to keep it around. That said, it's important to keep it separated. We won't be mixing gulp-generated assets with rails generated ones. | ||
Firstly, note that we're going to leave the existing asset pipeline in place. Many gems rely on it (e.g, Active Admin), and it's a good idea to keep it around. That said, it's important to keep it separated. We won't be mixing Blendid-generated assets with Rb-generated ones. | ||
|
||
Source files should be in a `src` directory in the root of the project, **not** in `app/assets`. You'll also no longer be using the built in Rails asset helpers like `javascript_include_tag` and the like. Instead, you'll use a set of **blendid_asset_helpers** with regular markup. | ||
|
||
#### app/helpers/blendid_asset_helper.rb | ||
In production (`yarn run blendid -- build`), filenames get hashed so you can cache them forever. When the file or any of it's referenced assets changes, the hash changes. This works just like the Rails asset pipeline, and we have similar helpers to ensure that the correct filenames are referenced in production: | ||
In production (`yarn run blendid build`), filenames get hashed so you can cache them forever. When the file or any of it's referenced assets changes, the hash changes. This works just like the Rails asset pipeline, and we have similar helpers to ensure that the correct filenames are referenced in production: | ||
|
||
```ruby | ||
blendid_asset_path('image/asset.jpg') # -> /image/logo-n39o4orb81.png | ||
|
@@ -34,7 +34,7 @@ You would do this: | |
##### Sprite helper | ||
There's also a `<%= icon 'id' %>` helper included for rendering svg icons generated from the `svgSpriteTask` task. Modify as needed. | ||
|
||
#### config/initializers/gulp.rb | ||
#### config/initializers/blendid.rb | ||
The asset path helpers check for the existence a rev-manifest.json file, generated by the `build` tasks. It may look something like this: | ||
|
||
```json | ||
|
@@ -54,14 +54,14 @@ For things like Active Admin that rely on the asset pipeline (Sprockets), contin | |
|
||
In some cases, this means you may have two JS files on your page. One containing *only* your gem-installed assets, and one for your bundles compiled with webpack. I try to avoid using gem assets where possible though, and usually just have my webpack bundle on the page. | ||
|
||
You may be thinking, "couldn't you still bundle them together, either by including Gulp complied files in the sprockets manifest, or vice versa?" The answer is, yes, technically, but we've been down that road, and it's not a good one to travel. Trust me on this—it's better to keep them separate. | ||
You may be thinking, "couldn't you still bundle them together, either by including Blendid-compiled files in the sprockets manifest, or vice versa?" The answer is, yes, technically, but we've been down that road, and it's not a good one to travel. Trust me on this—it's better to keep them separate. | ||
|
||
|
||
## Deploying | ||
### Heroku | ||
Heroku makes deploying SUPER easy, but there are a couple of things you'll need to do to get this running. | ||
|
||
Since we're using Ruby (to run Rails) AND Node (to compile our assets with Gulp) in our setup, we need both running on our server. Heroku will automatically detect ONE of these at a time based on the presence of a `Gemfile` or `package.json`, but to get both running simultaneously, we need to [specifiy heroku-buildback-multi as your buildpack](https://github.com/ddollar/heroku-buildpack-multi). This enables us to specify multiple custom buildpacks in a `.buildpacks` file. | ||
Since we're using Ruby (to run Rails) AND Node (to compile our assets with Blendid) in our setup, we need both running on our server. Heroku will automatically detect ONE of these at a time based on the presence of a `Gemfile` or `package.json`, but to get both running simultaneously, we need to [specifiy heroku-buildback-multi as your buildpack](https://github.com/ddollar/heroku-buildpack-multi). This enables us to specify multiple custom buildpacks in a `.buildpacks` file. | ||
``` | ||
https://github.com/heroku/heroku-buildpack-nodejs.git | ||
https://github.com/orlando/heroku-buildpack-ruby.git | ||
|
@@ -84,7 +84,7 @@ Take note of the following: | |
Heroku requires `config.serve_static_files` to be enabled, so be sure to either add `RAILS_SERVE_STATIC_FILES` as a config var in your Heroku settings, or manually set this to true in your `production.rb` file. | ||
|
||
#### A note on devDependencies | ||
You'll either need to make sure all dependencies accessed during the production gulp task are included in `dependencies` rather than `devDependencies` or do the following: | ||
You'll either need to make sure all dependencies accessed during the Blendid build task are included in `dependencies` rather than `devDependencies` or do the following: | ||
|
||
> Npm reads configuration from any environment variables beginning with NPM_CONFIG. We set production=true by default to install dependencies only. If you would like to install additional devDependencies, you can disable this behavior: | ||
``` | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,7 @@ | ||
{ | ||
"name": "blendid", | ||
"version": "4.4.2", | ||
"description": "(formerly gulp-starter) A full featured configurable gulp asset pipeline and static site builder", | ||
"description": "A full featured configurable asset pipeline and static site builder", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. curious about the removal of gulp...it's still using gulp There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This whole PR is picking up a decision the whole team landed on quite a while back. Idea is remove language that ties Blendid to any specific tech, so that the tool can evolve more easily. Back in the early gulp-starter days the word "Gulp" itself was a badge of using the hot newness; now what matters is the functionality |
||
"license": "MIT", | ||
"engines": { | ||
"node": ">=6.11.1", | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
😍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
funny, looking at that diff I thought the whole reason I changed it was to remove a gulp reference :head-scratch: