Theme main.css: Cache busting

sage
1

Using sage 8.5.1: After deploying a new release to Trellis, the old main.css of the theme was still used.
Browser caching is not leveraged yet on the Trellis server (default Trellis nginx config is used).

How can I improve cache busting for main.css? Why hadn’t the ETag hit the browser cache?
Should I use a plugin like e.g. Busted for achieving a running version when enqueuing the main.css?

2

Sage already has cache busting built in for production builds, and Trellis makes sure that old cached pages (if cache is enabled) are cleared during a deploy. There are no changes you need to make in order for this to work as expected.

Without more information about your setup and what changes you’ve made, not much I can say about why you’re not seeing the latest versions of assets.

3

The main.css got no version slug (that would cache-bust):

[...]
<link rel='stylesheet' id='sage/css-css'  href='https://www.example.com/app/themes/thetheme/dist/styles/main.css' type='text/css' media='all' />
[...]

The theme was created with current stable Sage 8.5.1.

4

I’d check your dist/assets.json file. If the entry doesn’t exist in there then you’d see the behaviour you are. So something else must be going on.

5

Current contents of manifest.json:

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "customizer.js": {
      "files": [
        "scripts/customizer.js"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    }
  },
  "config": {
    "devUrl": "http://dev:8081"
  }
}
6

:slight_smile: ^^^^^^^^^^^^^^^^^^^^^

7

If deploying to production does your deploy-hooks/build-before.yml run gulp --production?

gulp                 --->  main.css
gulp --production    --->  main-52ca131438.css
8

yarn is used in the example, this is probably why I overlooked it:

# - name: Install Composer dependencies
#   command: composer install --no-ansi --no-dev --no-interaction --no-progress --optimize-autoloader --no-scripts
#   args:
#     chdir: "{{ deploy_helper.new_release_path }}/web/app/themes/thetheme"
#
# - name: Compile assets for production
#   command: yarn run build:production
#   connection: local
#   args:
#     chdir: "{{ project_local_path }}/web/app/themes/thetheme"
#
- name: Copy project local files
  synchronize:
    src: "{{ project_local_path }}/web/app/themes/thetheme/dist"
    dest: "{{ deploy_helper.new_release_path }}/web/app/themes/thetheme"
    group: no
    owner: no
    rsync_opts: --chmod=Du=rwx,--chmod=Dg=rx,--chmod=Do=rx,--chmod=Fu=rw,--chmod=Fg=r,--chmod=Fo=r
9

The ansible code in example hook file uses yarn, is there also an equivalent for npm?
The package.json contains a script for building

“build”: “bower install && gulp”,

but it doesn’t pass --production.

10

Indeed the current Trellis deploy-hooks/build-before.yml is an example using yarn.

In my post above I included a link to the prior version of deploy-hooks/build-before.yml that uses gulp. I just found it by opening that file at Trellis repo and using the “history” button (but I realize one would have to know that the gulp version was in the file history).

1 Like
11

One extra note: It can be helpful to add an extra nvm use command at
the beginning for using the right node version.

For specific node LTS series (6.x)
echo "6" > .nvmrc

In deploy build-before hook:

- name: Use specific node version
  shell: . $NVM_DIR/nvm.sh && nvm install && nvm use
  connection: local
  args:
    chdir: "{{ project.local_path }}/web/app/themes/the-theme"


# Paths
- shell: . $NVM_DIR/nvm.sh && dirname $(nvm which | tail -1)
  connection: local
  args:
    chdir: "{{ project.local_path }}/web/app/themes/the-theme"
  register: nvm_which

- shell: yarn global bin
  connection: local
  environment:
    PATH: "{{nvm_which.stdout}}:{{ ansible_env.PATH }}"
  register: yarn_global_bin


# Build
- name: Run yarn install (for global packages)
  command: yarn global add bower gulp gulp-cli
  connection: local
  environment:
    PATH: "{{yarn_global_bin.stdout}}:{{nvm_which.stdout}}:{{ ansible_env.PATH }}"

- name: Run yarn install
  command: yarn install
  connection: local
  args:
    chdir: "{{ project.local_path }}/web/app/themes/the-theme"
  environment:
    PATH: "{{yarn_global_bin.stdout}}:{{nvm_which.stdout}}:{{ ansible_env.PATH }}"

- name: Run bower install
  command: bower install
  connection: local
  args:
    chdir: "{{ project.local_path }}/web/app/themes/the-theme"
  environment:
    PATH: "{{yarn_global_bin.stdout}}:{{nvm_which.stdout}}:{{ ansible_env.PATH }}"

- name: Run gulp
  command: gulp --production
  connection: local
  args:
    chdir: "{{ project.local_path }}/web/app/themes/the-theme"
  environment:
    PATH: "{{yarn_global_bin.stdout}}:{{nvm_which.stdout}}:{{ ansible_env.PATH }}"

[...]
1 Like