Giter Club home page Giter Club logo

pugify's Introduction

pugify

pug transform for browserify v2. Sourcemaps generation included.

screen shot 2013-08-28 at 5 02 16 pm

Bitdeli Badge

Configuration

Format

    var b = browserify();
    # these options are passed directly to pug compiler
    var pugConfig = {
        pretty: true,
        compileDebug: false
    };
    # if babelConfig is defined, the output will be transpiled using babel, and the options are passed into babel transpiler
    # this is useful when you need to support old browsers, since pug compiles into ES6 format.
    var babelConfig = {
        presets: ['es2015']
    };
    b.transform(require('pugify').pug(pugConfig, babelConfig));

If you are using pugify programatically, you can pass options to the Pug compiler by calling pug() on the pugify transform:

    var b = browserify();
    b.transform(require('pugify').pug({
        pretty: true
    }));

If you are using pugify in a command line build, you can pass parameters by adding a "pugify" section to your package.json. You can either include parameters directly:

    "pugify": {
        "pretty": true
    }

or for more complicated cases you can reference a .js file:

    "pugify": "./assets/pugify-config.js"

And then in pugify-config.js:

    module.exports = {
        pretty: (process.env.NODE_ENV == 'production') ? false : true
    };

To disable sourcemap generation, which results in smaller compiled files for production builds, set pug option compileDebug to false in the options:

    var b = browserify();
    b.transform(require('pugify').pug({
        compileDebug: false
    }));

or in package.json:

     "pugify": {
        "compileDebug": false
    }

pugify's People

Contributors

alexstrat avatar bitdeli-chef avatar calvein avatar deedw avatar hawkerboy7 avatar izolate avatar jazzzz avatar lightbringer1991 avatar maratfakhreev avatar sidorares avatar tellnes avatar tootallnate avatar wbinnssmith avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

pugify's Issues

source maps

I have recently downloaded browserify-jade. It works in terms of compiling the jade into clients side javascript function that I can call but the source maps don't seem to be working. I have enabled source maps on browserify (they are working for my livescript files) and the templates are properly compiling (which indicates that browserify-jade is setup correctly and working), but no source maps. Is there something I need to do to enable source maps that I'm missing? Any help is greatly appreciated.

Issues with sourceMap

Hi @sidorares ,

I made a little tool (gen-pug-source-map), based on your idea for generating source maps for Pug v2.x

My implementation solves some issues present in yours:

  • Each source file (included and extends) are readed from the file system multiple times, gen-pug-source-map does not read from the file system.
  • Absolute filenames in the property sources can hinder remote debugging.
  • In some cases, line numbering is shifted

Also, you can get the compiled code from gen-pug-source-map with inline templates removed.

If you want test it, please clone my repo, run npm i && npm t and go to http://sokra.github.io/source-map-visualization/#custom, click "Custom..." and upload test/output/app1.js, then load test/output/app1.map.js and try.

Thanks.

TypeError: Cannot read property 'split' of undefined(…)

I am importing pug templates to use on the client and using pugify to and es2015 to compile. Starting yesterday I started getting the following error in the browser console:

Uncaught TypeError: Cannot read property 'split' of undefined(…)        core.js:23

I am honestly unsure what this has to do with pugify but it only happens when I try and use the transform. I thought it had something to do with another package but isolated the issue to pugify by writing a new app that only writes a pug template to an HTML id.

Any help is appreciated as this seriously breaks my application.

Included files are not listen by `browserify --list`

Files which are included in a jade file either by the include or extends statement is not listen by browserify --list.

I understands why it's not there and that this probably is a wontfix. Just opening an issue to discuss if there is some way we can solve that.

Unexpected token when when requiring pug files from required js files

When I try to require pug files from the main javascript file-- as in, the one that gets passed directly to browserify-- pugify works flawlessly.

However, when I try to require a .js file that in turn requires a pug file, it fails with the 'Unexpected token' error, just like I'd attempted to include pug without pugify active.

What gives?

EDIT: I have no idea what changed, but it's working now. To be clear, the build was failing with just "Unexpected token"-- no further messages, no line numbers, nada. The only common factor was including a pug template from a JS file, that was also included from somewhere else.

0.1.2?

Hey! We have a couple of cool new features in browserify-jade since v0.1.1. Could we maybe publisha v0.1.2 to npm? :D

How come `require` is included in the `params` by default?

It's making the webpack builder complain since require is used as a variable instead of as a function.

WARNING in ./~/editor/lib/block-embed/embed-block.js
Critical dependencies:
2:64-71 require function is used in a way, in which dependencies cannot be statically extracted
 @ ./~/editor/lib/block-embed/embed-block.js 2:64-71

https://github.com/sidorares/browserify-jade/blob/936f3441457c6590c69c82e9840372eb4b8bce1f/index.js#L10

Can we remove this part? I virtually never need require in my jade templates; instead I pass all the necessary dependencies in as locals.

pugify compiles to es6 format instead of es5

So I started using pugify to tranform pug files. I ran into problems when running my app on IE11, due to the fact that it doesn't support string template feature in ES6.

My question is: is there a way to use pugify along with babelify to have the end-result as es5 output?

More details here

Allow us to set jade options

You've set the jade option pretty to true by default with no options to change it. We have a problem because we use inline-block elements that require the compiled HTML to not be prettify.

Can a runTimePath option be added?

Just like in jadify the option to have a runTimePath will be required for me to be able to change from jadify to pugify. I use jadify/pugify as a dependency in a standalone library. Please also see the Jadify documentation for this option.

Adding this would be very much apreciated! =)

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.