@pixel2html/generator-frontend
Pixel2HTML Boilerplate Generator
Last updated a year ago by mike3run .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install @pixel2html/generator-frontend 
SYNC missed versions from official npm registry.

@pixel2html/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 @pixel2html/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.

Current Tags

  • 2.7.1                                ...           latest (a year ago)

38 Versions

  • 2.7.1                                ...           a year ago
  • 2.7.0                                ...           a year ago
  • 2.6.1                                ...           a year ago
  • 2.6.0                                ...           a year ago
  • 2.5.6                                ...           a year ago
  • 2.5.5                                ...           a year ago
  • 2.5.4                                ...           a year ago
  • 2.5.3                                ...           a year ago
  • 2.5.2                                ...           a year ago
  • 2.5.1                                ...           2 years ago
  • 2.5.0                                ...           2 years ago
  • 2.4.22                                ...           2 years ago
  • 2.4.21                                ...           2 years ago
  • 2.4.20                                ...           2 years ago
  • 2.4.19                                ...           2 years ago
  • 2.4.17                                ...           2 years ago
  • 2.4.16                                ...           2 years ago
  • 2.4.15                                ...           2 years ago
  • 2.4.14                                ...           2 years ago
  • 2.4.13                                ...           2 years ago
  • 2.4.12                                ...           2 years ago
  • 2.4.11                                ...           2 years ago
  • 2.4.10                                ...           2 years ago
  • 2.4.9                                ...           2 years ago
  • 2.4.8                                ...           2 years ago
  • 2.4.7                                ...           2 years ago
  • 2.4.6                                ...           2 years ago
  • 2.4.5                                ...           2 years ago
  • 2.4.4                                ...           2 years ago
  • 2.4.3                                ...           2 years ago
  • 2.4.2                                ...           2 years ago
  • 2.4.1                                ...           2 years ago
  • 2.3.3                                ...           2 years ago
  • 2.3.2                                ...           2 years ago
  • 2.3.1                                ...           2 years ago
  • 2.3.0                                ...           2 years ago
  • 2.2.1                                ...           2 years ago
  • 2.2.0                                ...           2 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 80
Dependencies (17)
Dev Dependencies (7)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |