Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nsrosenqvist/gulp-single-file-components

A Gulp plugin that let's you build single file components (as made famous by Vue) and use them in other environments by splitting the vue-files into separate files.
https://github.com/nsrosenqvist/gulp-single-file-components

components gulp gulp-plugin single-file-component vue

Last synced: about 2 months ago
JSON representation

A Gulp plugin that let's you build single file components (as made famous by Vue) and use them in other environments by splitting the vue-files into separate files.

Awesome Lists containing this project

README 

        
# gulp-single-file-components



A Gulp plugin that let's you build single file components (as made famous by Vue) and use them in other environments by splitting the vue-files into separate files.



## Prerequisites



* Works in Node 4.7.2+ with Gulp.js.



## Introduction



I created this to be able to improve how I worked with modules with Wordpress and the system I was using at the time made for a very long and complicated build process. This plugin however let me simplify the build process significantly and components were then assembled and included by a custom library.



Since I made it to meet a personal need it's not very elegant, it currently monkey-patches the package [vueify](https://www.npmjs.com/package/vueify) and hooks into its compiler. If it turns out that other people than me starts using the package I'll probably make a proper fork in the future.



## Usage



As simple as it gets:



```js

const gulp = require('gulp');

const components = require('gulp-single-file-components');



gulp.task('components', function() {

  return gulp.src('components/**/*.vue')

    .pipe(components())

    .pipe(gulp.dest('dist/'));

});    

```



The code above would output the follow vue-file into 3 different files with same name but corresponding extension:

```html



    
Template



  console.log('script');



  h1 {

    font-weight: bold;

  }



```



Since we're hooking into vueify's compiler we get [all the features from it](https://www.npmjs.com/package/vueify) as well, including support for different languages, like *SCSS* in the above example's style tag.



## Features



You can also extend the features of the plugin by passing in some options. Every option that's not handled by the plugin itself gets passed on to the vueify compiler so you can configure it too. Here's an example of adding a PHP compiler, a custom tag, and filtering the output from the default JavaScript compiler:



```js

const gulp = require('gulp');

const deindent = require('de-indent');

const indent = require('indent-string');

const components = require('gulp-single-file-components');



gulp.task('components', function() {

  return gulp.src('components/**/*.vue')

    .pipe(components({

      // We add a php compiler

      // (this get's passed on to vueify)

      customCompilers: {

        php: function (content, cb, compiler, filePath) {

          content = content.trim();



          if (content.startsWith('')) {

            content = content.slice(0, -2);

          }



          let result = '

    
{{ $title }}



  console.log('script');



  h1 {

    font-weight: bold;

  }



    return [

        'title' => __('Template', 'theme'),

    ];



```



Would output the following 4 files:



**example.blade.php**

```html

{{ $title }}


```

**example.js**

```js

(function() {

  "use strict";



  console.log('script');

})();

```

**example.css**

```css

h1 {

  font-weight: bold;

}

```

**example.config.php**

```php

 __('Template', 'theme'),

];

```



By default the `template` tag's resulting extension is simply taken from the lang-attribute. Which is why we can output the template as blade.php without creating a custom tag handler (however it's not compiled blade, that would require a custom compiler). This can be changed by overriding the extension callback in the `tags` option. By default `style` only returns css and `script` js.



## License



MIT