How to compile only changed files in sage-10 (laravel mix)

hi everyone,
i kinda having a hard time developing in sage because of the long compile time in each file change, the laravel mix seems to recompile/copy every file that i don’t change, including JS, Images, etc.

is there a way to only recompile only changed files such as only css or only js on each file change?
here’s my webpack.mix.js
mix.disableNotifications();

mix
  .setPublicPath('./public')
  .browserSync({
    ghostMode: false,
    proxy: 'localhost/wordpress',
    notify: false,
    ignore: ['/node_modules/'],
    open: false,
  });

mix
  .sass('resources/styles/app.scss', 'styles')
  .sass('resources/styles/custom.scss', 'styles')
  .sass('resources/styles/editor.scss', 'styles')
  .options({
    processCssUrls: false,
    postCss: [require('@tailwindcss/jit')],
  });

mix
  .js('resources/scripts/app.js', 'scripts')
  .js('resources/scripts/customizer.js', 'scripts')
  .blocks('resources/scripts/editor.js', 'scripts')
  .autoload({ jquery: ['$', 'window.jQuery'] })
  .extract();

mix.copyDirectory('resources/images', 'public/images');
// .copyDirectory('resources/fonts', 'public/fonts');

// mix.sourceMaps().version();

and my css files

//app.scss
@import 'tailwindcss/base';

@layer base {

  // html {

  //   font-size: 18px;

  // }

  body {

    font-size: 16px;

  }

}

// @import 'common/global';

// @import 'components/hamburger';

// @import 'components/navbar';

// @import 'components/button';

// @import 'components/landingSection';

// @import 'components/card';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

custom.scss
@import ‘common/global’;

@import 'components/hamburger';

@import 'components/navbar';

@import 'components/button';

@import 'components/landingSection';

@import 'components/card';

and even if i only change the blade markup, it took so long to refresh the browser (up to 4 seconds)
image

is there a way to make the browser refresh faster?

This seems to be a known issue with Tailwind and not exclusive to Sage (9/10) but rather the current Dart Sass reference implementation. that can be slow when run as native JavaScript in node.

An user in this forum found a way to considerably speed up build times for Tailwind:

yeah i noticed it too, as you can see i used tailwind/jit, before it was waayy slower… the attached thread said that it was instant update when using jit, but for me it still tooks seconds. could you take a look at my webpack.mix.js file because this is my first time using laravel mix, i usually develop with js frameworks like CRA and next js. thank you for responding!

and by the way this is my package.json

{

  "private": true,

  "browserslist": [

    "extends @wordpress/browserslist-config"

  ],

  "engines": {

    "node": ">=12.14.0"

  },

  "scripts": {

    "build": "mix",

    "build:production": "mix --production",

    "start": "mix watch",

    "hot": "mix watch --hot",

    "clear": "wp acorn optimize:clear",

    "test": "npm run lint",

    "lint": "npm run lint:js && npm run lint:css",

    "lint:js": "eslint resources/scripts",

    "lint:css": "stylelint \"resources/**/*.{css,scss,vue}\"",

    "translate": "npm run translate:pot && npm run translate:js",

    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --ignore-domain --include=\"app,resources\"",

    "translate:js": "wp i18n make-json ./resources/lang --pretty-print"

  },

  "devDependencies": {

    "@tailwindcss/jit": "^0.1.3",

    "@tailwindcss/typography": "^0.4.0",

    "@tinypixelco/laravel-mix-wp-blocks": "^1.1.0",

    "@wordpress/babel-preset-default": "^5.0.1",

    "@wordpress/browserslist-config": "^3.0.1",

    "@wordpress/dependency-extraction-webpack-plugin": "^3.0.1",

    "babel-eslint": "^10.1.0",

    "babel-loader": "^8.2.2",

    "browser-sync": "^2.26.14",

    "browser-sync-webpack-plugin": "^2.3.0",

    "eslint": "^7.20.0",

    "eslint-plugin-import": "^2.22.1",

    "laravel-mix-purgecss": "^6.0.0",

    "postcss": "^8.2.6",

    "postcss-custom-properties": "^11.0.0",

    "sass": "^1.32.7",

    "sass-loader": "11.0.1",

    "stylelint": "^13.10.0",

    "stylelint-config-standard": "^20.0.0",

    "tailwindcss": "^2.0.3"

  },

  "dependencies": {

    "@glidejs/glide": "^3.4.1",

    "jquery": "^3.5.1",

    "laravel-mix": "^6.0.13"

  }

}

On what system are you developing? Windows 10, OS X, Ubuntu?

i’m using windows 10.

This guide could be helpful:
https://roots.io/docs/getting-started/windows/#windows-wsl

1 Like

i’m not currently developing with WSL, but thank you for responding, i really appreciate it! :smile:

WSL will surely make your life easier with web development on Windows.

i’m currently on college. after this semester done, i’m switching to linux all the way! :sweat_smile:

Sometimes long build time too and when it happens sourcemaps are sometimes lost too (it shows app.css instead of scss file). Sourcemaps are not gone everytime, quite randomly but seems more often when i enable .copyDirectory('resources/images', 'public/images') in webpack config file.

Sourcemap line in webpack is like this .sourceMaps(false, 'inline-source-map')

Im using Sage 10, Bootstrap 5 on Win10

2 things i found:

  1. Laravel Mix Copy Watched - This extension provides a copy method that can watch for not only changes but also additions and deletions. Usage very simple: copyDirectoryWatched instead of copyDirectory.
  2. Using LiveReload. Will refresh every time, not ideal but at least sourcemaps allways exist.

This topic was automatically closed after 42 days. New replies are no longer allowed.