Incredibly easy NPM only build step

Advantages of npm as a build tool

The downsides of npm

  • The pipe (|) streams one commands output to the next commands input
  • The redirection (>) operator redirects the output to a file

Let’s build it

  • running a node server that watches for file changes
  • compile sass to css and revision the files
  • compile typescript to js and revision files
  • move some node_modules into the public folder
  • watch for changes in *.scss and *.ts files and recompile

Running a node server

// package.json"scripts": {
"supervisor": "supervisor -w app,resources/templates --extensions node,js,hbs app.js"
}

Building our css

Compiling Sass files

"scripts": {
…,
"css:compile": "node-sass --source-map public/css/app.css.map --output-style compressed -o public/css/ resources/css/app.scss"
}

Removing old files

// package.json"scripts": {
…,
"css:clean": "rm -f public/css/*"

Revisioning files

// package.json"scripts": {
…,
"css:rev": "node-file-rev public/css/app.css --manifest=public/rev-manifest.json --root=public/"

Composing CSS scripts together

// package.json"scripts": {
…,
"css:clean": "rm -f public/css/*",
"css:compile": "node-sass --source-map public/css/app.css.map --output-style compressed -o public/css/ resources/css/app.scss",
"css:rev": "node-file-rev public/css/app.css --manifest=public/rev-manifest.json --root=public/",
"build:css": "npm run css:clean && npm run css:compile && npm run css:rev",
"build:css:watch": "onchange -i 'resources/css/*.scss' 'resources/css/*/*.scss' -- npm run build:css"

Building our Javascript

Compiling Typescript files

Removing old files & moving files

// package.json"config": {
"moveFilesJs": "node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce.js node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce.js.map node_modules/fetch-inject/dist/fetch-inject.min.js"
},
"scripts": {
…,
"js:clean": "rm -f public/js/*",
"js:move": "cp $npm_package_config_moveFilesJs public/js/"

Revisioning files

// package.json"scripts": {
…,
"js:rev": "node-file-rev public/js/*.js --manifest=public/rev-manifest.json --root=public/"

Composing JS scripts together

// package.json"scripts": {
…,
"build:js:watch": "onchange -i 'resources/js/*.ts' 'resources/ts/*/*.ts' -- npm run build:js",
"build:js": "npm run js:clean && npm run js:compile && npm run js:rev && npm run js:move",
"js:clean": "rm -f public/js/*",
"js:move": "cp $npm_package_config_moveFilesJs public/js/",
"js:compile": "rollup --config",
"js:rev": "node-file-rev public/js/*.js --manifest=public/rev-manifest.json --root=public/"

Composing it all together

// package.json"scripts": {
…,
"build": "npm run build:js:watch & npm run build:css:watch",
"start": "node_modules/.bin/ttab -t 'Node Server' 'npm run supervisor' & node_modules/.bin/ttab -t 'Building assets' 'npm run build'"
}

Summary

--

--

--

Product designer with a love for complex problems & data. Everything I post on Medium is a copy — the originals are on my own website: https://www.vea.re

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is Higher Order Function?

Day 101: Character Animation Part 4

Between the Wires: An interview with Vue.js creator Evan You

Continuous Development with Nodejs PM2 and Nginx

de-concat mp4 files

TOP 5 JavaScript TreeGrid (TreeTable) Components

Building a Scalable SPA with React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lukas Oppermann

Lukas Oppermann

Product designer with a love for complex problems & data. Everything I post on Medium is a copy — the originals are on my own website: https://www.vea.re

More from Medium

Configure vite and storybook to respect alias of tsconfig.json

“What is a Design System?” is the Wrong Question

What is a Design System made of?

Responsive Design Is More Than You Think

Architecting your iconography — A developer’s perspective