Build only when Vue/JS/CSS Updated

We reverted build on server in PHP Deployer deploy.yml using npm run prod for our Laravel application . We had

...
tasks:
  deploy:
    - deploy:prepare
    - deploy:vendors
    - artisan:storage:link
    - artisan:view:cache
    - artisan:config:cache
    - artisan:migrate
    - npm:install
    - npm:run:prod
    - deploy:publish
    - artisan:horizon:terminate
  npm:run:prod:
    - run: 'cd {{release_or_current_path}} && npm run prod'
...

And now reverted build on server part and have it done locally again.

On each build we currently need to republish all websites as we use Mix versioning for files and old publications load older version numbers and then those publications fail to load.

webpack.mix.js part dealing with production versioning:

...
if (mix.inProduction()) {
  mix.webpackConfig({
    devtool: 'hidden-source-map', 
    plugins: [
      new CleanWebpackPlugin({
        cleanStaleWebpackAssets: false,
        protectWebpackAssets: true,
        cleanOnceBeforeBuildPatterns: ['js/components/*'],
      }),
      new BugsnagSourceMapUploaderPlugin({
        apiKey: '32a21ca56ec7f76bfc82ee3e648db1ec',
        appVersion: process.env.MIX_BUGSNAG_APP_VERSION,
        overwrite: true,
        publicPath: '*'
      })
    ],

    output: {
      chunkFilename: 'js/components/[name].js?id=[contenthash]',
    },
  })
} else {
  mix.webpackConfig({
    output: {
      chunkFilename: 'js/components/[name].js',
    },
  });
}
...

. I only want this if we push changed Vue/JS/CSS. Not for PHP or blade file changes . So how can we only trigger that? Or does Laravel Mix / npm run build only add new version if there is new CSS/Vue/Js to build?

LaryAI

2 years ago

Best Answer

Level 58

Laravel Mix, by default, will generate new version hashes for your assets whenever you run the npm run prod command, regardless of whether the actual content of your Vue/JS/CSS files has changed. This is because Mix is designed to ensure that users always receive the latest compiled assets, and it doesn't track changes at the individual file level during the build process.

To achieve the behavior you're looking for, you would need to implement a custom solution that checks if the Vue/JS/CSS files have been modified before running the build process. Here's a general approach you could take:

Use a hashing mechanism to generate a hash of all Vue/JS/CSS files.
Store the hash in a file after each build.
Before running the next build, generate a new hash and compare it with the stored hash.
If the hashes are different, run the build process; otherwise, skip it.

Here's a basic example of how you might implement this in your deploy.yml:

tasks:
  deploy:
    - deploy:prepare
    - deploy:vendors
    - artisan:storage:link
    - artisan:view:cache
    - artisan:config:cache
    - artisan:migrate
    - check_assets_change
    - npm:install
    - conditional:npm:run:prod
    - deploy:publish
    - artisan:horizon:terminate

check_assets_change:
  - run: 'cd {{release_or_current_path}} && if [ -f assets_hash.txt ] && echo "$(find resources/assets -type f -exec md5sum {} \; | md5sum)" == "$(cat assets_hash.txt)"; then echo "Assets have not changed." && touch assets_unchanged; else echo "Assets have changed." && rm -f assets_unchanged; fi'

conditional:npm:run:prod:
  - run: 'cd {{release_or_current_path}} && if [ ! -f assets_unchanged ]; then npm run prod && echo "$(find resources/assets -type f -exec md5sum {} \; | md5sum)" > assets_hash.txt; fi'

In this example, the check_assets_change task generates a hash of all files in the resources/assets directory and compares it to the hash stored in assets_hash.txt. If the hashes match, it creates a file named assets_unchanged to indicate that the assets have not changed.

The conditional:npm:run:prod task then checks for the presence of the assets_unchanged file. If the file does not exist, it means the assets have changed, and it will run npm run prod and update the assets_hash.txt with the new hash.

Please note that this is a simplified example and may need to be adjusted to fit your specific project structure and deployment process. Additionally, you should test this thoroughly to ensure it works as expected in your environment.

1 like