search

LgHS / Site-V2

Old Flask LGHS Website moved to
https://github.com/LgHS/site-web-front
2 stars 2 forks source link

Manage asset building and frontend dependencies #6

Open drskullster opened 8 years ago

drskullster commented 8 years ago

In current version, assets are processed with npm (see https://github.com/LgHS/Site-Web-Front/blob/master/package.json).

What NPM scripts do

The scripts are responsible for several tasks :

1. Build assets

NPM is also useful to manage frontend library dependencies (currently there's only Bootstrap and Font-Awesome but there will be more as the project grows (eg. javascript plugins).

3. Watch files and live reload

Finally, there's a tool to watch scss files and recompile when one has changed. Using this with a live reload system makes developing css a breeze.

Implementation

I suggest we keep NPM for this. This has 3 advantages :

  1. We can take the package.json file from the current website and we'll be done (more or less)
  2. NPM ecosystem is really large, we'll find npm packages for every library we'll need.
  3. The recommended way to go in python is using gulpjs and bower; both are also NPM packages. I find that using NPM scripts directly is simpler and straighter.

    What would change

We'll add a package.json file at the root of the project. Node will install its package in a node_modules folder, also at the root. We'll need to add it to .gitignore.

Since built assets will be versioned, people who just want to focus on Python won't need to do anything.

For people wanting to add or update images, svg or CSS they would need to :

  1. install nodejs and npm
  2. run npm install
  3. run npm build

I can do the implementation if you guys are ok.

bendem commented 8 years ago

Sounds good to me, do we also want some build script to minify production js / css?

JeromeJ commented 8 years ago

This is planned, to minify all out outputs, cache and so on. But using build scripts? (I don't have the experience with build scripts)

drskullster commented 8 years ago

@bendem css file is already minified in the compiling process (see LgHS/Site-Web-Front/package.json#L8 and the generated file). I still don't know which package we'll use to minify JS, but yeah it will be needed.

@JeromeJ Tool runners like Gulp or Grunt and dependencies managers like Bower seem common in Flask development (but I'm very new to this world :smile:). What I propose is to replace them with tasks defined directly in package.json to simplify the build process.

I'll add a PR soon.