Code Monkey home page Code Monkey logo

gulppage's Introduction

Gulppage

Gulppage serve static files (html, css, js) based on compiled sources. It is built over gulp and provides a quick and easy environment for building static pages from scratch.

It provides a large features and options to make page dev quick: less compilation, javascript browerification, vendor management, fontello integration and much more. An effort has been done on log too, in order to provide quick debug if needed.

It also comes with an export command. So once your dev is ok, you can export the result easily in a tarball and put it on a server.

For any bug or feature query, please report to the github project

Features

  • html:
    • linter: htmlhint, with your own custom options (see options for more details).
    • compilation:
      • usemin allow you concat and easily embed vendor javascript, css or external html;
      • minification with htmlmin, with your own cutom options (see options for more details);
      • file include to get basic html includes or templating.
  • js:
    • linter: jsHint based on the .jshintrc project file and/or custom options.
    • compilation:
  • less:
  • assets:
  • icons
    • command line to open and select your fontello icon set, and once done, to import and save it locally.
  • livereload: All the task for Javascript, Css, Html or assets comes with livereload option, so you can dev fast
  • project reseting:
    • a gulp task allow you to clean up all the generated files fast;
  • gulpfile:
    • autorestart server when changed

Install

To install in a "mylanding" folder, use shell command and run:

git clone https://github.com/tilap/gulppage.git mylanding
cd mylanding
make install

Running

All the common run task comes with make and package the gulp task in order.

note: Take care to avoid folder with the same name as main args, ie "install", "update", "reset", "watch", "export", "fontgettoken", "fontopenmac", "fontopenlinux", "fontsave"

Make update

Update the packages dependancies, both bower and npm. Clean the old ones and install the new ones (prune).

Make reset

Delete the compiled files and the installed bower/npm packages. You can then rerun make install to restart a new project.

Make watch

Build the initial sources and start watching all the source for livereloading.

Make export

Rebuild clean output and make a tarball.

Fonticon management

make fonopenmac and make fonopenlinux open the fonticon set in your browser. You can thus edit all you need and save the session directly on your browser. THen run make fontsavein your term, and the new font package will be importer. If you host your own fontelle server, edit the makefile option.

Sample / Demo

If you wanna see a basic usage sample, run the project by with src-sample (remove src folder and rename src-sample to src, or edit the config.js file). You'll have a really basic example with less working (bootstrap integration), browserify, a stupid image asset and an icon. You can sse the result on this page.

Tip's

  • By using usemin plugin over your css/js compiled files, you automatically have file revision, so no fucking browser cache problem;
  • With fontello, you can use your own fonticon / svg by importing them and keep track easily;
  • take care of keeping fonticon css file (or any file using css import) out of usemin to avoid import breakings;
  • If you work on email templating, modify the gulpfile to use gulp inline css plugin. I'll maybe do a branch or another repo for that kind of work.

LICENCE

Project released under MIT licence.

gulppage's People

Watchers

 avatar  avatar  avatar

gulppage's Issues

Improve gh-pages

Add features and most of the readme content on the gh-pages to show more features

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.