You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Sep 15, 2023. It is now read-only.
[](https://waffle.io/vigetlabs/blendid)
5
5
6
-
**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.
6
+
**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.
7
7
8
8
## Quick start on a fresh project (empty directory)
Copy file name to clipboardExpand all lines: extras/docker/README.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
-
# Gulp Starter on Docker
1
+
# Blendid on Docker
2
2
3
-
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.
3
+
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.
@@ -26,10 +26,10 @@ Browse to [http://localhost:3000](http://localhost:3000).
26
26
27
27
### As part of an automated build
28
28
```bash
29
-
docker run --rm myrepo/myimage:mytag npm run gulp production
29
+
docker run --rm myrepo/myimage:mytag yarn run blendid build
30
30
```
31
31
32
-
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:
32
+
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:
Copy file name to clipboardExpand all lines: extras/rails/ASSETS-README.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,17 +1,17 @@
1
-
# Gulp Starter on Rails
1
+
# Blendid on Rails
2
2
```bash
3
-
yarn run blendid -- init-rails
3
+
yarn run blendid init-rails
4
4
```
5
5
6
-
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.
6
+
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.
7
7
8
8
## Overview
9
-
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.
9
+
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.
10
10
11
11
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.
12
12
13
13
#### app/helpers/blendid_asset_helper.rb
14
-
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:
14
+
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:
There's also a `<%= icon 'id' %>` helper included for rendering svg icons generated from the `svgSpriteTask` task. Modify as needed.
36
36
37
-
#### config/initializers/gulp.rb
37
+
#### config/initializers/blendid.rb
38
38
The asset path helpers check for the existence a rev-manifest.json file, generated by the `build` tasks. It may look something like this:
39
39
40
40
```json
@@ -54,14 +54,14 @@ For things like Active Admin that rely on the asset pipeline (Sprockets), contin
54
54
55
55
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.
56
56
57
-
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.
57
+
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.
58
58
59
59
60
60
## Deploying
61
61
### Heroku
62
62
Heroku makes deploying SUPER easy, but there are a couple of things you'll need to do to get this running.
63
63
64
-
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.
64
+
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.
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.
85
85
86
86
#### A note on devDependencies
87
-
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:
87
+
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:
88
88
89
89
> 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:
raise"#{asset_path} not found in rev_manifest.json. Fix path or try rebuilding with `yarn run blendid -- build` from `/client_side`."ifrev_manifest[asset_path].nil?
6
+
raise"#{asset_path} not found in rev_manifest.json. Fix path or try rebuilding with `yarn run blendid build` from `/client_side`."ifrev_manifest[asset_path].nil?
Copy file name to clipboardExpand all lines: extras/shopify/README.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
-
# Gulp Shopify Upload Task
1
+
# Blendid Shopify Upload Task
2
2
3
-
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.
3
+
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.
4
4
5
5
## Overview
6
6
@@ -22,17 +22,17 @@ myproject
22
22
23
23
npm install gulp-shopify-upload --save-dev
24
24
25
-
#### Gulp Tasks
25
+
#### Tasks
26
26
27
-
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.
27
+
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.
28
28
29
-
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.
29
+
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.
30
30
31
31
**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.
32
32
33
33
#### API Credentials
34
34
35
-
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).
35
+
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).
36
36
37
37
1. Copy `shopify_api.json.example` and rename it to `shopify_api.json` in the root directory of your project
38
38
2. Fill in the fields with your store's information
Copy file name to clipboardExpand all lines: extras/tasks/README.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
## Gulp Server Task
1
+
## Blendid Server Task
2
2
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.
0 commit comments