search

codeforamerica / chime

A city-focused content management system
http://chimecms.org/
BSD 3-Clause "New" or "Revised" License
35 stars 12 forks source link

[WIP] Create a build process for frontend files #531

Closed darvelo closed 8 years ago

darvelo commented 8 years ago

Hi, everyone, I'm new! I'd like to start dedicating more time to contributing to Chime and Code for America in general.

I've started by creating a proof-of-concept for setting up a build process/workflow for frontend files, including JavaScript and Sass. It's not ready yet.. I've still got to rework the JS files themselves and add the Sass files to the workflow.

By the end we'll be able to compose our JavaScript from reusable modules written in the latest version of JavaScript, ES6/ES2015, and still have it compiled down, concatenated, and minified to a single file that works in IE8.

For Sass, we'll be able to edit our styles and have the changes instantly viewable in the browser without a refresh.

I've still got a bunch of refactoring I need to do, but I wanted to put this up for now to possibly get some feedback as I work along. The only dependences are NodeJS, Bower, and Gulp. I recommend using nvm to install NodeJS. You can install Bower and Gulp after installing NodeJS with this line:

$ npm install -g bower gulp

I converted the JS dependencies you had into bower dependencies, which means with one command you can install or upgrade all the libraries you're using or plan to use, or make sure they stay within a supported version range. With the /chime/frontend directory as the current directory, you can get all your frontend depencencies and the deps for compiling your source by running:

$ npm install
$ bower install

After that, with the /chime directory as the current directory, you can run:

$ gulp

This will compile the JavaScript files in /chime/frontend/javascript to /chime/static/javascript and watch them for any edits so they can be recompiled automatically!