Incredibly easy NPM only build step

Advantages of npm as a build tool

The downsides of npm

Let’s build it

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"
}
// package.json"scripts": {
…,
"css:clean": "rm -f public/css/*"
// package.json"scripts": {
…,
"css:rev": "node-file-rev public/css/app.css --manifest=public/rev-manifest.json --root=public/"
// 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

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/"
// package.json"scripts": {
…,
"js:rev": "node-file-rev public/js/*.js --manifest=public/rev-manifest.json --root=public/"
// 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

--

--

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