Giter VIP home page Giter VIP logo

gulp-accord's Introduction

gulp-accord

npm tests dependencies

A fast, simple, and well-tested way to compile many languages with a unified interface.

Note: This project is in early development, and versioning is a little different. Read this for more details.

Why should you care?

You're hip and modern, and you know that it makes life a lot easier to use compiled languages when you are writing html, css, and/or javascript. So many of your projects use tools like jade, stylus, sass, or coffeescript, and build them out to vanilla html, css, and javascript before deploys. It also just so happens that you use and love gulp as your build tool.

While you can certainly find one-off adapters for each of these languages, wouldn't it be easier if they all had a consistent, unified, and well-tested interface that always supports all options, and the latest version of the language? And wouldn't it be nice to just have to install a single gulp plugin to handle all of them? If you answered yes to any of the above, that is why you should care.

Language Support

Gulp-accord supports these languages at the moment. Below you can find a usually-up-to-date adapter list:

If there are other languages you would like for accord to support, please make your suggestions and pull requests to accord itself, not to this plugin.

Installation

npm install --save gulp-accord

Also make sure that you have the language you want to compile with accord installed. So for example, if you are using gulp to compile jade, you'd also run npm install jade --save. Don't worry too much though, if you forget to do this, the plugin will kindly remind you.

Usage

Below is an example of basic usage. In this case, we would be using gulp-accord to compile some jade templates.

var accord = require('gulp-accord');

gulp.task('compile', function(){
  gulp.src('templates/*.jade')
  .pipe(accord('jade', { pretty: true }))
});

As you can probably infer from this example, the accord plugin takes two arguments, the name of the language you are compiling, and the options you want to pass to it. The name should be a string, and the options are optional, but if present, should be an object. You can find more information about the available options for each language here.

Source Maps

If a language has support for source maps, this plugin will allow you to product them using gulp's standard sourcemaps tool. You can use it as specified in the docs, and gulp-accord will produce the sourcemaps for you automatically. For example, the task shown below would compile a stylus file and produce an external sourcemap:

var gulp = require('gulp'),
    sourcemaps = require('gulp-sourcemaps'),
    accord = require('gulp-accord');

gulp.task('default', function(){
  gulp.src('./test.styl')
  .pipe(sourcemaps.init())
  .pipe(accord('stylus'))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('./out'))
});

License & Contributing

gulp-accord's People

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

Watchers

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

gulp-accord's Issues

Gulp crashes when plugins are used after accord has compiled Stylus to CSS

Okay, so, big ups here Jeff, because this actually works with Axis and Jeet, unlike gulp-stylus. But... small issue. Let me see if I can explain this well enough...

If I use any gulp plugin that modifies the output after gulp-accord is done compiling Stylus to CSS, gulp crashes. Of course, I'm not sure about this on Mac, but on Windows, this occurs. Let me illustrate:

Assuming I have the following Stylus:

*
  transition: all 200ms ease

*, *:before, *:after
  box-sizing: border-box

html
  overflow-x: hidden
  overflow-y: scroll

body
  background: #222
  width: 100%

body, html
  margin: 0
  padding: 0

body, html, .stylus, .wrapper
  height: 100%

And the following Gulp task for Stylus:

gulp = require 'gulp'
accord = require 'gulp-accord'
autoprefixer = require 'gulp-autoprefixer'
stylus = (opts) -> accord 'stylus', opts

axis = require 'axis-css'
grate = require 'grate'
rupture = require 'rupture'

gulp.task 'stylus', ->
  gulp.src './stylus/index.styl'
    .pipe stylus
      use: [
        axis()
        grate()
        rupture()
      ]
    .pipe autoprefixer()
    .pipe gulp.dest './css'

Produces:

error

Now, if I comment out .pipe autoprefixer(), it works just fine. Could you see if it does this on Mac @Jenius?

SourceMapping Problem

Hi,

basically I'm generating my sourcemaps exactly like in your example, except that I use accord('minify-js'):

var gulp = require('gulp'),
    sourcemaps = require('gulp-sourcemaps'),
    accord = require('gulp-accord');

gulp.task('default', function(){
  gulp.src('./test.styl')
  .pipe(sourcemaps.init())
  .pipe(accord('stylus'))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('./out'))
});

So what happens is that sourcemaps.write('.') receives the minified version of the javascript file instead of the original and thus saves a minified version in the sourcemaps which kinda destroys its purpose.

Any ideas?

Thanks,
Chris

SourceMaps: sourcesContent is null

Hi there,

when I try to create sourcemaps for javascript files as described in the ReadMe, the sourcesContent attribute in the generated source map is just [null]:

var gulp = require('gulp'),
    sourcemaps = require('gulp-sourcemaps'),
    accord = require('gulp-accord');

gulp.task('default', function(){
  gulp.src('./test.styl')
  .pipe(sourcemaps.init())
  .pipe(accord('minify-js'))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('./out'))
});

Everything works perfect if I skip the minifying part.

Any ideas?

Thanks,
Chris

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.