Giter Site home page Giter Site logo

lumbergh's Introduction

Lumbergh

It'll be fine. - Bill, QA officer on the Titanic

========

This is a QA focused gulpfile. It doesn't refresh your pages or concatenate/minify files. It runs the various linters (js,css,html) and validators (w3cjs) to help you check your code. Lumbergh goes through your html/css/js files and creates JSON files with the results. Then we use http://handlebarsjs.com/ to render the JSON.

Setup

(run these commands in the terminal)

  1. First you have to have Node.js installed. Installation and instructions can be found here: Node.js
  2. Install gulp.js globally with: npm install -g gulp
  3. Navigate to your project directory (e.g. cd Desktop/myproject) and install gulp inside of your project with: npm install --save-dev gulp
  4. Install the plugins with: npm install. This will install all plugins that are saved in the package.json. You shouldn't need to mess with the package.json file unless you're going to add new plugins.
  5. Run gulp generate-reports. This will inspect your files and generate the reports.
  6. Run gulp server. This spins up a local server so you can see the reports.
  7. Point your browser to localhost:9000

Note: I have a small sample project already in the build folder so you can see what the reports look like.

Using The Reports

Lumbergh was made solely to analyze your project and help you find errors, give you hints for better code, and provide a snapshot of your styles. It will NOT concatenate or minify things. It won't process your Sass or LESS files. It's made to check the compiled/finished CSS and HTML files. It hasn't been setup yet for PHP files either, still working on that.

There are two ways of using Lumbergh. One is to run it on local files that you're working on. The other is to pull files from a live site using the crawler. Lumbergh operates under the assumption that your "ready to inspect" files live in the build folder, usually they're the compiled files from the src folder. The crawler automatically puts files into the build folder. If this isn't how your project structure is setup, feel free to fork the repo and change the gulpfile.

Available tasks:

  1. gulp generate-reports: This is the most used task. It generates all reports.
  2. gulp wildstyle: Generates the CSSLint report.
  3. gulp stylestats: Generates the StyleStats report.
  4. gulp jshint: Generates the JSHint report.
  5. gulp markymark: Generates the HTML report.
  6. gulp server: Runs web server to see reports. URL is - localhost:9000.

Crawling a remote site

To run the crawler, use this command: node crawler http://yoururl.com

This will pull down all of the HTML/CSS/JS files into the build folder. From here you can run the gulp commands and generate the reports.

lumbergh's People

Contributors

joshmilo avatar mgmeyers avatar

Watchers

 avatar  avatar

lumbergh's Issues

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.