Expressive CSS and Using NPM as a Build Tool
December 05, 2015
Seems like every front end web dev eventually publishes a manifesto about their approach to CSS. So here is mine: Expressive CSS
(Shout out to Cole Peters for his Building and Shipping Functional CSS article which offers a similar take and inspired me to finish and publish my project)
One thing I tried that was different for my workflow on projects was to use NPM as my build tool. It always bugged me to have Bower and NPM in my projects when they do very similar things. NPM seems to be the more popular one and it can also somewhat replace Gulp/Grunt as a build tool.
My front end build tool needs for Expressive CSS were pretty basic. I needed to first process the .scss files into unminified CSS files for people who do not want to use SASS to be able to grab (and ignore the SASS files altogether). After that, I would need it to create the minified, source mapped CSS. Also, I added a watch command to enable automatic builds on file saves.
Thanks to node-sass CLI, I was able to configure npm to do exactly what I needed. Here are the relevant lines from package.json:
"scripts": {
"build": "node-sass css/sass/base.scss css/stylesheets/base.css --style expanded && node-sass css/sass/utilities.scss css/stylesheets/utilities.css --style compact && node-sass css/sass/components.scss css/stylesheets/components.css --style expanded && node-sass css/sass/style.scss css/style.min.css --style compressed",
"watch": "onchange 'css/sass/**/*' -- npm run build"
},So, instead of grunt or gulp, we do npm run build and npm run watch.
Pretty simple, eh? For more info on using NPM as a build tool, check out these articles: