Can Parcel minify CSS in dev mode?

[bramchi]

I'm trying to get Parcel to minify my CSS in dev mode, but I'm not sure it's possible.

The Parcel docs give the impression you can configure targets like this, but also mention minification only takes place for production builds. So I'm unsure I can expect this to work at all.

My config has a target defined with optimize set to true, but when I run npm run parcel it will still generate unminified CSS in the assets output directory. When I run the build script, it does get minified.

Below is what my package.json looks like. I'm not running any other plugins.

{
  "scripts": {
    "parcel": "parcel watch --target production",
    "build": "parcel build  --target production",
  },
  "devDependencies": {
    "parcel": "^2.12.0",
  },
  "targets": {
    "production": {
      "source" : [
        "src/css/styles.css",
        "src/js/scripts.js"
      ],
      "optimize": true,
      "sourceMap": true,
      "distDir": "./assets/"
    }
  }
}

[mrwebg]

Hi Bramchi,
parcel command build is exactly what does the mimification
parcel command watch just build your ccs and or js on the fly (unminified)
Question : why would you use Parcel to watch css, nothing will happen there
I use it to compile my scss files
So with your script "parcel" i get my plain css
And with your script "build" i get the minified css
This is what my section scripts looks like:

"scripts": { "development": "parcel watch src/js/index.js --dist-dir ./dist", "production": "parcel build src/js/index.js --dist-dir ./dist", "test": "echo \"Error: no test specified\" && exit 1" },

I have no experience yet with targets, but i'm going to try that too

[mrwebg]

Just looked into my package.json and realized the setup is ok. I dont need the targets array. The index js file is where the magic happens.

Here's my index.js so far ( just starting a new test project)

// BOOTSTRAP ALL JS import 'bootstrap'; // BOOTSTRAP CSS import '../scss/main/main.scss';

[bramchi]

@mrwebg Thanks for your reply.

To answer my own question: No, dev mode cannot minify CSS. That's not what it is meant for. But I found a workaround.

After some suggestions on StackOverflow, I ended up watching for file changes with the help of onchange and retriggering parcel's build command to achieve what I want.