Skip to content

Latest commit

 

History

History
67 lines (50 loc) · 3.17 KB

getting-started.md

File metadata and controls

67 lines (50 loc) · 3.17 KB
Raw

Getting Started

Installation

  1. Install Node.js
  2. Run sudo npm install -g gulp yo generator-pho bower

Phở Devstack uses Gulp as task runner, Yeoman for scaffolding new projects and Bower for installing client-side packages

Creating a new project

  1. Create a project directory
    mkdir new-project && cd $_
  2. Generate initial project structure
    yo pho

You project directory will look like this:

  • .bowerrc - config file that tells Bower where to install packages
  • .editorconfig - EditorConfig sets consistent coding styles between different editors
  • .gitignore - files that should not be commited to Git
  • .jshintrc - JSHint settings for detecting possible problems in your JavaScript sources
  • dist - folder where generated files are placed (do not edit files here)
  • gulpfile-production.js - settings for production mode of Phở Devstack
  • gulpfile.js - settings for development mode of Phở Devstack
  • node_modules - folder where npm packages like gulp or pho-devstack are installed
  • package.json - file that specifies which packages should npm install
  • src - folder with source files (write your code here)
    • bower_components - folder where Bower like lesshat are installed
    • images - folder containing images
    • index.html - main markup file
    • scripts - folder with JavaScript code
    • styles - folder containing stylesheets
  • substitute-config.js - settings for substituter, e.g. Analytics ID, project description

Usage

  1. Run build system gulp
  2. Open dist/index.html in your browser
  3. Edit files in src/, build will run automatically and page will be reloaded in browser(s)

When you're finished, press Ctrl + C to quit build system.

For a production build, run gulp --gulpfile gulpfile-production.js. You can use this command in your CI or deploy script.

More information

Now you've created a new project or set up Phở for an existing project. With the default options enabled, you'll find yourself able to do a lot of cool stuff, but every plugin that's included in Phở is customizable and can be turned off.

For information about configuring Phở, see Configuration. For answers to some common questions see FAQ.