Nominal Pizza Masticator

    @afuggini/generator-frontend

    2.8.0-beta4 • Public • Published

    @afuggini/generator-frontend

    Build Status

    Cool demo

    We aim to generate a boilerplate code for projects when we know the specs. 💕

    How to install

    Node

    You will need node installed in your machine. In case you don't have it (you can check this typing node --version in your terminal) please visit this link.

    We also need to install Yeoman, and the Pixel2HTML Generator, so run this command in your terminal. The -g parameter is to install them globally so can use it in every project.

    $ npm install -g yo @afuggini/generator-frontend

    Running the generator

    To generate the Pixel2HTML Boilerplate go to your project folder and run this command in your shell

    $ cd ~/your/project/folder
    $ yo @pixel2html/frontend
    

    The Pixel2HTML Boilerplate will ask you questions about this points. Answering with the desired options will generate the code.

    • Project Name?
    • Quantity of screens?
    • Markup Language? Options: HTML / Pug
    • Frontend Framework Options: None / Bootstrap 3.*/ Bootstrap 4 Beta / Foundation
    • jQuery? Options: true / false

    There are also two more way to generate your files, you can find the instructions in the Wiki

    Installing dependencies & running up

    To work, the Pixel2HTML Boilerplate needs to install some dependencies to run the options you select. For this job, run this command in your shell

    $ npm run start
    

    Generated file structure

    This boilerplate will create a set of files and folders

    
    ├──  dist/
    ├──  gulp/
    ├──  src/
    │    └──  assets/
    │    │    ├──  fonts/
    │    │    ├──  icons/
    │    │    ├──  images/
    │    │    ├──  js/
    │    │    ├──  styles/
    │    │    │    ├──  components/
    │    │    │    │    ├──  _buttons.scss
    │    │    │    │    ├──  _forms.scss
    │    │    │    │    └──  _nav.scss
    │    │    │    ├──  screens/
    │    │    │    │    ├──  _base.scss
    │    │    │    │    └──  screen_*.scss
    │    │    │    ├── _mixins.scss
    │    │    │    ├── _reset.scss
    │    │    │    ├── _variables.scss
    │    │    │    ├── main.scss
    │    │    │    └── vendor.scss
    │    └──  screen_*.[html|pug]
    ├──  .editorcofig
    ├──  .gitattributes
    ├──  .gitignore
    ├──  .project.conf
    ├──  gulpfile.js
    ├──  package.json
    └──  README.md
    

    How to work with script files

    We are using WebpackJS to bundle our script files. There's also ES6 on-demand transpilation and polyfills.

    Learn more about Javascript Modules here Wes Bos Article About Modules

    Example

    import $ from 'jquery'
    import 'bootstrap-sass'

    We also included the amazing webpack-bundle-analyzer you can fine tweak you JS bundle size if you wish to. Fire it up running this command:

    $ npm run debug
    

    Available script commands.

    Start to code.

    • $ npm run code

    Build the project

    • $ npm run build

    Available Gulp Commands

    Helpers

    • $ gulp clean Clean /dist directory

    Static Files

    • $ gulp main:static Compile static files (images, icons)
    • $ gulp main:images Move images
    • $ gulp main:icons Move icons

    Fonts Files

    • $ gulp main:fonts Move project fonts
    • $ gulp vendor:fonts Move vendors fonts

    Scripts

    • $ gulp main:scripts Concat, uglify and move project JS files
    • $ gulp vendor:scripts Concat, uglify and move vendors JS files

    Styles

    • $ gulp main:styles Compile, concat, autoprefix and move [SCSS, Less, Stylus] project files
    • $ gulp vendor:styles Compile, concat, autoprefix and move [SCSS, Less, Stylus] vendor files

    Delivery

    • $ gulp build Execute all the gulp directives and makes a .zip file with the latest code.
    • $ gulp release Execute all the gulp directives and makes a .zip file with the latest code.
    • $ gulp release --prod Execute all the gulp directives, prepare assets to production and makes a .zip file with the latest code.

    Install

    npm i @afuggini/generator-frontend

    DownloadsWeekly Downloads

    4

    Version

    2.8.0-beta4

    License

    MIT

    Unpacked Size

    386 kB

    Total Files

    61

    Last publish

    Collaborators

    • afuggini