Front-end Guide

Manage your front-end project in unique views and reusable components.

Kick start

Create your project folder and add a package.json. This can be done with:

$ npm init

Install all dependencies

$ npm install front-end-guide gulp --save-dev
$ npm install gulp -g

If you are running this on an empty folder it’s recommended to get the scaffolding files. You can do this by running:

$ ./node_modules/.bin/front-end-guide

If you installed it globally then you can run

$ front-end-guide

Available Tasks

Deploy locally

$ gulp build_guide
$ gulp serve

Develop

This will do the same as above and also watch files for changes and livereload

$ gulp watch

Optimize images

This will optimize new images on the assets-raw folder and copy them to assets/images

$ gulp imagemin

Documentation

• Authoring templates (HTML)
• Authoring styles (LESS/CSS)
• Authoring scripts (JS)
• Authoring assets
• Creating modules

Configurable options

You can pass your autoprefix options:

guide.tasks.buildLess(
    {
        autoPrefixBrowsers : ['> 1%', 'last 2 versions']
    }
);

If you don't want to minify your output:

guide.tasks.buildJs(
    {
        sourceMaps: false,
        uglify: 'none'
    }
);

If you want to change your raw images directory

guide.tasks.runImagemin(
    {
        rawImagePath : 'assets-raw/images'
    }
;)

Writing README files

README files are written with Markdown. Code blocks are syntax-highlighted with Prism. Currently we support four basic languages (C-like, CSS, "Markup", JavaScript).