The Build!

Final build #

Lets now write one final script to run everything at once!

Add the following line of code:

"build-css": "npm-run-all compile-sass concat-css prefix-css compress-css"

And our final package.json looks like so:

"scripts": {
  "watch-sass": "node-sass sass/main.scss css/style.css --watch",
  "compile-sass": "node-sass sass/main.scss css/style.comp.css",
  "concat-css": "concat -o css/style.concat.css css/additional.css css/style.comp.css",
  “prefix-css”: “postcss --use autoprefixer -b 'last 5 versions' css/style.concat.css -o css/style.prefix.css”,
  "compress-css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
  "build-css": "npm-run-all compile-sass concat-css prefix-css compress-css"
},

Here, we’ve simply added all our tasks compile-sass, concat-css, prefix-css & compress-css to be run when we execute our build command.

We use the npm-run-all package to ensure it works on all platforms.

Enter the following command:

npm install npm-run-all --save-dev

Let’s run a final test to confirm everything is working!

Go ahead and delete all of the files (except additional.css), from the CSS folder.

Once that’s done, run the build command:

npm run build-css

And there you go! All of your CSS files have been generated with this one command — powerful stuff!

You can use this build on any future projects! #

To set up this build on future projects, you only need to copy the scripts and devDependencies from this project into the package.json of your new project and run npm install.

We have now created a build process for our SASS projects! We can compile, merge, prefix and compress our stylesheets with a single command.

Thus, we’ve significantly improved upon our development workflow!

Next up, I’ve included a bonus section on how we can use SASS mixins to better manage our Media Queries.