Obviously, since we want to compile for production too, we must also have a task that will clean our production directory… We can use rimraf for this.

Let’s build a structure of our project now…

We will have a src directory for development

directory for development In our src directory, we will make a file called dummy.scss , which will contain our Sass code with Scss syntax

directory, we will make a file called , which will contain our Sass code with Scss syntax We will have a dist directory for production, which will be automatically generated

Time to write those script tasks… Open up package.json file in your favorite code editor, find "scripts" object and remove the "test" property from within it…

* Note, you can name the script commands however you like. This is just the convention that I prefer…

While we are within "scripts" object in our package.json file, we can now start writing our commands.

Clean the “dist” directory

"clean": "rimraf dist",

Compile Sass to CSS from “src” to “dist”

"compile": "node-sass --output-style=expanded --source-map=true src/dummy.scss dist/dummy.css",

Use Autoprefixer to handle browser’s vendor prefixes

"prefix": "postcss dist/dummy.css --use=autoprefixer --map=false --output=dist/dummy.css",

We will need a single addition for Autoprefixer in our “package.json” file and that is to define the browsers that we care about. As said in this post, we will support “last 2 versions” of each browser. We could place the following, right after the enclosing bracket of the "scripts" .

"browserslist": ["last 2 versions"],

Handle minification using CleanCSS

"minify": "cleancss --level=1 --source-map --source-map-inline-sources --output dist/dummy.min.css dist/dummy.css",

As you can tell, I left that dangling comma in our last script command. If we were done, that’d lead to an error, when running any npm command.

However, we aren’t done just yet, because we want to make our life easier and for that, we must write two more commands. One that we can use for development and another for production, so that we do not even need to memorize all those given names of our tasks, but instead just these two.

Common practise is to name those two as dev and build … But of course, you can named them however you want.

Command for Development

"dev": "npm run compile -- --watch",

You might find it weird to see an extra -- in this command. If we were using yarn this wouldn’t be the case, but in npm we do need to write those, if we’re passing some arguments to the npm script that we wrote…

Command for Production

"build": "npm run clean && npm run compile && npm run prefix && npm run minify"

And we are officially done!

Our package.json file should now contain context from below, excluding the boilerplate that we generated with our initial npm command…

P.S. Do not remove that boilerplate…

Now we can use any of those npm scripts that we just wrote for our dummy-project and achieve what we initially required. Write some Sass in our empty file to test it out…

npm run dev — To begin with development, it will watch for changes and re-compile accordingly npm run build — To get it ready for production. It will clean the dist directory, compile your Sass to CSS, run it through autoprefixer to add any vendor prefixes required and finally run it through minify to create an additional minified file.

Until next time

If you enjoyed this and learned something new, please share some love.

To do so, tap the clap icon 👏 or hold it for more claps! 👏👏👏

Much appreciated. You’re the best!