Friday 16 June 2017

Can someone critique my npm workflow?

I am using npm as a task runner to help me develop the frontend of a web application. I'll give you a rundown of the project first and then ask my questions at the end.My project structure:src/ (.js, .scss files) assets/ (media files) public/ (build output files) index.html My package.json (the important parts):{ ... "scripts": { "start": "npm run http-server", "dev": "concurrently --kill-others \"npm run node-sass-dev\" \"npm run browser-sync\"", "build": "npm run node-sass", "http-server": "http-server .", "browser-sync": "browser-sync start --server --files src/* public/* index.html --no-notify", "node-sass": "node-sass src/style.scss > public/style.css", "node-sass-dev": "node-sass --watch --recursive --output public --source-map true --source-map-contents src" }, "author": "anonymous7102", "dependencies": { "http-server": "^0.10.0", "node-sass": "^4.5.3" }, "devDependencies": { "browser-sync": "^2.18.12", "concurrently": "^3.4.0" } ... } Scripts explanations:start runs the http-server, serving the root directory.dev runs the node-sass watcher/compiler and browser-sync so that code edits are mirrored to the browser in realtime.build builds the project (currently just compiling sass files).The rest of the scripts are just to make each respective command less verbose when I call them in start/dev/build.What I would like to improve about this workflow:I would like the built site to be served completely out of /public, with index.html, all scripts and assets copied in there.For simply building the site, I could just run what compilers are needed and copy index, src, and assets into /public using some platform independent npm package commands (like copy). Then serve public with http-server. Easy.The thing that I am confused about is, how can I make this work with dev? Everything, including index.html, /src, and /assets would need to be watched and copied into /public on a file change or addition. Then I could use browser-sync to serve /public instead. Is there a package that I don't know about that makes this easy to do?

Submitted June 16, 2017 at 08:29AM by anonymous7102

No comments:

Post a Comment