generator-fast-start

    0.5.4 • Public • Published

    generator-fast-start

    This uses fast-start to create the basic structure of simple site.

    Installation

    First, install Yeoman and generator-fast-start using npm (we assume you have pre-installed node.js).

    npm install -g yo
    npm install -g generator-fast-start

    Then generate your new project:

    yo fast-start

    Fast Start is a lightweight framework used to create and compile your site

    Latest docs accesible only in russian README.RU.md

    Features

    • Nodejs run with nodemon
    • Static server with browsersync
    • Live code reload with nodemon and/or browsersync
    • Deploy with rsync
    • Pug or HTML templates
    • Pug compilation
    • HTML compilation (gulp-include) as fallback
    • Browserify support
    • JavaScript compilation with gulp-include as fallback
    • Babel for JavaScript
    • Uglify code for production
    • Postcss support (precss and postcss-cssnext)
    • CSS minimization with cssmin
    • Sourcemaps support for JavaScript and CSS
    • Image compressing with imagemin
    • CSS lint with stylelint
    • CSS fix with stylefmt and postcss-sorting
    • JavaScript lint with eslint
    • JavaScript fix with eslint and js-beautify
    • HTML lint with htmllint
    • HTML prettify with html-prettify
    • Pug lint with pug-lint

    Project Structure

    File tree

    src
    ├── package.json
    ├── bower.json
    ├── index.js
    ├── lib/
    ├── routes/
    ├── public/
    │   ├── js/
    │   │   ├── includes/
    │   │   ├── partials/
    │   │   └── views/
    │   ├── css/
    │   │   ├── includes/
    │   │   ├── partials/
    │   │   └── views/
    │   ├── font/
    │   └── img/
    └── views/
       ├── partials/
       └── templates/
    

    Description

    package.json

    File with npm deps

    bower.json

    File with bower deps

    index.js

    Main file of your Nodejs project. This script will be called by nodemon when you run gulp. If you're making a static site, you won't need this file.

    lib/

    Your JavaScript code for backend If you're making a static site, you won't need this folder either.

    routes/

    This folder should be used for scripts which define the routes for you site

    public/

    This folder will be routed as '/public' with Browsersync, or, in case you use your own server, you must make this folder accesible as /public

    public/{js,css}/

    It'll be a good practice if you'll use those files as the main scripts/styles for your site

    public/*/views/

    Also it would be very nice if you'll use this files for some of your routes, for example

    views/index.css -> /
    views/about.css -> /about
    

    public/*/includes/

    It's recommended for you to use this files in order to include the main files Example of JavaScript including

    const $ = require('jquery') // If you use Browserify
    //=require includes/somefile.js // If you use fallback `gulp-include`

    Example of CSS including:

    @import 'includes/somefile';
    /* This import in your css includes/_somefile.css */

    public/*/partials

    This folder is very similar to includes/, but it would be nice if you'll use this folder for some widgets of your site, and it's recommended to include this files only in the main files (and not in the views/* files)

    views/

    This is the folder for your views of the site, if you use your own server If youre creating a static site - put your Pug or HTML there, and the files will be routed as /. For example

    views/index.pug -> /index.html
    views/about.html -> /about.html
    

    Also, this framework provides configs for a lot of various tools, such as:

    • Bablel .babelrc
    • Eslint .eslintrc
    • htmllint .htmllintrc
    • js-beautify .jsbeautifyrc
    • postcss-sorting .postcss-sorting.json
    • pug-lint .pug-lintrc
    • Stylelint .stylelintrc

    How to use

    First you need create the file structure described previous (if you use Yeoman generator, you can skip this step)

    cp -Rp example/ src/
    

    Create a sample config (if you use Yeoman generator, skip this step)

    cp config.example.json config.json
    vim config.json
    

    Now you can execute gulp in order to start the build, watching and live-reload your code. Or you can simply run gulp build or gulp server separately. Also you can run gulp lint for linting, gulp fix for fixing and beautifing the code and gulp self-update for updating this script.--all flag enables the building of all the files, without changing none of them. --production flag enables the production mode.--deploy flag enables deploying using rsync.

    License

    MIT © Grigorii Horos

    Install

    npm i generator-fast-start

    DownloadsWeekly Downloads

    0

    Version

    0.5.4

    License

    MIT

    Last publish

    Collaborators

    • horosgrisa