See frntndr.com for more documentation.
This codebase is an opinionated blueprint environment to quick start new front-end codebases. It tries to save you some precious time through having various tools preconfigured and dictating a workflow.
It is based on a local Node.js server, which behaves like Apache. Grunt, Sass, Autoprefixer, CSSO, UglifyJS, JSHint, scss-lint, imagemin and more are included.
Warning: I used a lot of conventions I personally prefer, which you might not agree with! Alternatively you can use Yeoman, a great scaffolding tool which could give you the same stack of tools (and more), with more overhead and flexibility, without my strict rules.
- Setup is really easy, you only need to install Node.js, configuration like setting up Apache is not necessary.
- Swig is used as a template engine where your HTML lives.
- Sass with the scss syntax makes your CSS3 code valid Sass. You can start writing Sass at will, or just write CSS3 but still have minification.
- Sass is automatically compiled and then ran through Autoprefixer. The watcher is automatically started, you don't have to worry about it anymore.
- Grunt is integrated as the preferred build tool, just run
grunt
in your project root to run the build. - UglifyJS is used by Grunt to minify your JavaScript.
- Images are minified on build with imagemin.
- Make sure the following is installed on your machine:
- Node.js, 0.10 or bigger (tested up until 0.11.12)
- Ruby (shipped with OSX) and Ruby DevKit
-
Download most recent stable: github.com/branneman/frntndr/archive/0.4.zip
-
Unzip the contents of the
frntndr-0.4
directory into your new project directory. -
Run these commands to install the global dependencies:
npm install -g grunt-cli bower gem install bundle
-
Run these commands to install the project-specific dependencies:
cd /path/to/project npm install bundle install bower install
-
You might want to update your
package.json
with the correct project name, repository and license. -
Done! You can now start your development server.
cd /path/to/project
node app
Then point your browser to http://localhost:1337/
-
Make sure your app is running, then execute:
grunt
The resulting build files can be found inside the
build/
directory. -
To run scss-lint and JSHint:
grunt test
-
After the build, to create a zip:
grunt zip
-
After the build, to upload the build directory to an ftp server (you have to update
config.json
&.ftppass
first):grunt deploy