Gulp-jsfy NPM | npm.io

gulp-jsfy

transform .css to .js append to <head>

Installation

$ npm install gulp-jsfy

Plugin Usage

gulp=   require 'gulp'
gulp.task 'default',->
  main=   require 'main-bower-files'
  jsfy=   require 'gulp-jsfy'
  concat= require 'gulp-concat'

  gulp.src main()
    .pipe jsfy dataurl:true
    .pipe concat 'bower_components.js'
    .pipe gulp.dest 'public_html'

Plugin Options

dataurl:false
- true: Replace url(relative/URL) to url(DATAURI)
ignoreURL:false
- true: Don't Replace url(URL)

How do transform to .js ?

It's transform .css into <link href="DATAURI">.js And resolve url() references. Becomes css is standalone.

Example

animate.css

@charset "UTF-8";
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2014 Daniel Eden
...
*/

gulpfile.coffee

gulp= require 'gulp'
jsfy= require 'gulp-jsfy'

gulp.task 'default',->
  gulp.src 'animate.css'
    .pipe jsfy()
    .pipe gulp.dest './'

Execute gulp

$ npm install gulp gulp-jsfy coffee-script
$ gulp
# Finished 'default' after 37 ms

Become animate.css.js

(function(){
  var link=document.createElement('link');
  link.setAttribute('data-name','animate');
  link.setAttribute('rel','stylesheet');
  link.setAttribute('href',"data:text/css;charset=utf8;base64,QGNoYXJzZXQgIlVU..."
  document.head.appendChild(link);
})();