Skip to content
This repository has been archived by the owner on Sep 15, 2023. It is now read-only.

Descriptions are more tech-agnostic, and yarn syntax is up-to-date #574

Merged
merged 4 commits into from
Apr 19, 2019
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
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
# ![Blendid](https://raw.githubusercontent.com/vigetlabs/blendid/master/extras/blendid-logo.png)
# ![Blendid](https://raw.githubusercontent.com/vigetlabs/blendid/master/blendid-logo.png)

[![Build Status](https://travis-ci.org/vigetlabs/blendid.svg?branch=static-server)](https://travis-ci.org/vigetlabs/blendid)
[![Stories in Ready](https://badge.waffle.io/vigetlabs/blendid.png?label=ready&title=Ready)](https://waffle.io/vigetlabs/blendid)

**Blendid** *(formerly known as Gulp Starter)* is a delicious stand-alone blend of tasks and build tools poured into [Gulp](http://gulpjs.com/) to form a full-featured modern asset pipeline. It can be used as-is as a static site builder, or can be configured and integrated into your own development environment and site or app structure.
**Blendid** is a delicious stand-alone blend of tasks and build tools poured together as a full-featured modern asset pipeline. It can be used as-is as a static site builder, or can be configured and integrated into your own development environment and site or app structure.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😍

Copy link
Contributor Author

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:


## Quick start on a fresh project (empty directory)
```bash
yarn init
yarn add blendid
yarn run blendid -- init
yarn run blendid init
yarn run blendid
```

Expand Down
Binary file added blendid-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed extras/blendid-logo.png
Binary file not shown.
10 changes: 5 additions & 5 deletions extras/docker/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Gulp Starter on Docker
# Blendid on Docker

This extra allows you to run gulp-starter in a Docker container. You can use the included development server, or use Docker to manage assets for another server environment, which may or may not also use Docker.
This extra allows you to run Blendid in a Docker container. You can use the included development server, or use Docker to manage assets for another server environment, which may or may not also use Docker.

## Requirements

Expand All @@ -10,7 +10,7 @@ Requires [Docker](https://www.docker.com/products/overview), naturally.

### In development
```bash
git clone https://github.com/vigetlabs/gulp-starter.git MyApp
git clone https://github.com/vigetlabs/blendid.git MyApp
cd MyApp
cp ./extras/docker/Dockerfile .
cp ./extras/docker/.dockerignore .
Expand All @@ -26,10 +26,10 @@ Browse to [http://localhost:3000](http://localhost:3000).

### As part of an automated build
```bash
docker run --rm myrepo/myimage:mytag npm run gulp production
docker run --rm myrepo/myimage:mytag yarn run blendid build
```

If you want to use this to process front-end assets for a different server environment, you can do that too. In the Browsersync section of [config.json](https://github.com/davidham/gulp-starter/blob/master/gulpfile.js/config.json), set Browsersync to proxy your app server. Here's an example pointing at a Rails app:
If you want to use this to process front-end assets for a different server environment, you can do that too. In the Browsersync section of [config.json](https://github.com/vigetlabs/blendid/blob/master/gulpfile.js/task-config.json), set Browsersync to proxy your app server. Here's an example pointing at a Rails app:

```json
"browserSync": {
Expand Down
18 changes: 9 additions & 9 deletions extras/rails/ASSETS-README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
# Gulp Starter on Rails
# Blendid on Rails

Choose a reason for hiding this comment

The 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?

Copy link
Contributor Author

@olets olets Mar 12, 2019

Choose a reason for hiding this comment

The 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 "--", but yes there's definitely room for future improvement

```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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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:
```
Expand Down
2 changes: 1 addition & 1 deletion extras/rails/app/helpers/blendid_asset_helper.rb
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ def blendid_asset_path(path, type = nil)
root = ASSET_PATH_CONFIG['dest'].gsub(/(.*)public\//, '/')
asset_path = type ? File.join(ASSET_PATH_CONFIG[type]['dest'], path) : path
if rev_manifest
raise "#{asset_path} not found in rev_manifest.json. Fix path or try rebuilding with `yarn run blendid -- build` from `/client_side`." if rev_manifest[asset_path].nil?
raise "#{asset_path} not found in rev_manifest.json. Fix path or try rebuilding with `yarn run blendid build` from `/client_side`." if rev_manifest[asset_path].nil?
asset_path = rev_manifest[asset_path]
end
File.absolute_path(File.join(root, asset_path), '/')
Expand Down
2 changes: 1 addition & 1 deletion extras/rails/config/deploy.rb.example
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ before "deploy:assets:precompile", "deploy:blendid_build"
namespace :deploy do
desc "Install front end dependencies and compile for production with Blendid"
task :blendid_build do
invoke_command "bash -c '. /home/deploy/.nvm/nvm.sh && cd #{release_path} && yarn install && yarn run blendid -- build'"
invoke_command "bash -c '. /home/deploy/.nvm/nvm.sh && cd #{release_path} && yarn install && yarn run blendid build'"
end
end
12 changes: 6 additions & 6 deletions extras/shopify/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Gulp Shopify Upload Task
# Blendid Shopify Upload Task

Using gulp-starter with Shopify creates a simple workflow that makes iteration loops fairly tight. This directory contains the extra pieces you'll need to get going.
Using Blendid with Shopify creates a simple workflow that makes iteration loops fairly tight. This directory contains the extra pieces you'll need to get going.

## Overview

Expand All @@ -22,17 +22,17 @@ myproject

npm install gulp-shopify-upload --save-dev

#### Gulp Tasks
#### Tasks

This example contains two gulp tasks: `shopifywatch` and `shopifydeploy` defined in `gulpfile.js/tasks/shopify.js`. The watch task starts a watching process that monitors at all Shopify directories and uploads saved files (whether they have changed or not). The deploy task simply deploys all files at once.
This example contains two tasks: `shopifywatch` and `shopifydeploy` defined in `gulpfile.js/tasks/shopify.js`. The watch task starts a watching process that monitors at all Shopify directories and uploads saved files (whether they have changed or not). The deploy task simply deploys all files at once.

Not depicted in this example is the integration of these gulp tasks with your configured task pipelines. It is up to you to add `shopifywatch` to a list of tasks executed during development, and `shopifydeploy` to a deploy task.
Not depicted in this example is the integration of these tasks with your configured task pipelines. It is up to you to add `shopifywatch` to a list of tasks executed during development, and `shopifydeploy` to a deploy task.

**One Caveat**: It is true that, during development, you will actually be deploying (uploading) files to the Shopify server that holds your theme files, overwriting what's there. Keep this in mind! Always develop against a test theme on a dev Shopify project and if you're working with a team, take care not to overwrite eachother's work.

#### API Credentials

In order to upload files, the gulp plugin requires your store's API key and API password, along with the store URL. As you can see in `.gitignore`, it is recommended that you ignore the file with the credentials filled in, and only store the example file in source control. Here's the procedure for setting this up (you probably want to include these instructions in _your_ project's README).
Uploading files requires your store's API key and API password, along with the store URL. As you can see in `.gitignore`, it is recommended that you ignore the file with the credentials filled in, and only store the example file in source control. Here's the procedure for setting this up (you probably want to include these instructions in _your_ project's README).

1. Copy `shopify_api.json.example` and rename it to `shopify_api.json` in the root directory of your project
2. Fill in the fields with your store's information
Expand Down
2 changes: 1 addition & 1 deletion extras/tasks/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
## Gulp Server Task
## Blendid Server Task
This will start a static server that serves your production files to `http://localhost:5000`. This is primarily meant as a way to preview your production build locally, not necessarily for use as a live production server.

Addtional `devDependencies` needed:
Expand Down
2 changes: 1 addition & 1 deletion package.json
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",

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

curious about the removal of gulp...it's still using gulp

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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",
Expand Down