Roots Discourse

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: