❤
npm
Sign UpSign In

gulp-jsfy

0.1.6-beta • Public • Published

gulp-jsfy NPM version Build Status

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);
})();

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i gulp-jsfy

Repository

github.com/59naga/gulp-jsfy

Homepage

github.com/59naga/gulp-jsfy

Weekly Downloads

15

Version

0.1.6-beta

License

MIT

Last publish

Collaborators

  • 59naga
Try on RunKit
Report malware