Giter VIP home page Giter VIP logo

transmitter's Introduction

gulp react template

What?

A starter project for React.js that uses gulp 4 as a task manager. It includes a basic page with a router and an example of a home and 404 route. In addition, for the backend it also includes an express and socket.io implementation, since I've found that I use this combination quite frequently.

Why?

Since I like gulp. It's simple, clean, and very easy to understand and extend.

How?

Clone the repository and run npm install to install the dependencies. After, run gulp to build the sample code, which will be deposited into public/js.ui.js. To see how it looks, run the built in server using the command npm start. Your server should be launched, and you can then access it on localhost:8080.

What tasks are in the gulpfile?

The following tasks are implemented:

  • ui - the main and default task that takes the react.js code and outputs a non-minifed JavaScript bundle file.
  • ui-min - when you are ready to deploy, this runs the same code as ui, only it minifies it at the end and applies the production environment.
  • watch - this task does not end, it watches for changes in any of the JS or JSX files in the src directory and runs the ui task whenever there is a change.

The following tasks are not meant to be run individually, but only as sub-tasks for the above.

  • ui-babel - the actual transpilation task, outputs the result in the tmp directory.
  • browserify - takes the transpiled results and creates a single JS file as a result, places it in the public/js directory.
  • minify - takes the ui.js file that browserify produced and generates a ui.min.js file in the same directory.
  • clean - deletes the tmp directory which contains the intermediate JS files generated by Babel
  • apply-prod-environment - sets the production environment variable to production, used in the minified file.

License: MIT

transmitter's People

Contributors

suldashi avatar

Watchers

James Cloos avatar  avatar  avatar

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.