I organize everything in a src folder that would container css, js, svg and any other directories of files that need to be "processed" in some way. All processed files go into the dist root directory.
My JavaScript, I write in ES6 and use rollup to transpile (babel plugin) and bundle the final format in a minified iife file.
As for styles, I use Sass and write in BEM methodology. That way each .scss file would be it's own component with maybe a single _global.scss file for just general styles. It's pretty rare that I'll need random general styles tho.
For task runners, I just use NPM scripts. I've been using Gulp for a few years but dropped it recently in favor of NPM cause I can just write most of my tasks using packages directly without the added layer of a task runner. So for example, my Sass script looks like this:
Last thing I'll add is I take a slightly different approach if I'm writing a component I plan to reuse or include in my component library. That's when I use this concept:
I organize everything in a
src
folder that would containercss
,js
,svg
and any other directories of files that need to be "processed" in some way. All processed files go into thedist
root directory.My JavaScript, I write in ES6 and use rollup to transpile (babel plugin) and bundle the final format in a minified
iife
file.As for styles, I use Sass and write in BEM methodology. That way each
.scss
file would be it's own component with maybe a single_global.scss
file for just general styles. It's pretty rare that I'll need random general styles tho.For task runners, I just use NPM scripts. I've been using Gulp for a few years but dropped it recently in favor of NPM cause I can just write most of my tasks using packages directly without the added layer of a task runner. So for example, my Sass script looks like this:
Last thing I'll add is I take a slightly different approach if I'm writing a component I plan to reuse or include in my component library. That's when I use this concept:
Here's an example of that concept in my component library where I use Lerna to manage.