{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","params":[],"results":{"codes":[]},"settings":""},"next":{"description":"","pages":[]},"title":"Using a Gulp Plugin","type":"basic","slug":"using-a-gulp-plugin","excerpt":"","body":"Natron should be compatible with the majority of Gulp plugins out there, since it's also using Vinyl for file transformations.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Examples\"\n}\n[/block]\n## `gulp-uglify`\n\nThe following snippet shows how the plugin is supposed to be used with Gulp.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var gulp = require(\\\"gulp\\\");\\nvar uglify = require(\\\"gulp-uglify\\\");\\n \\ngulp.task(\\\"minify\\\", function() {\\n  return (gulp.src(\\\"src/**/*.js\\\")\\n    .pipe(uglify())\\n    .pipe(gulp.dest(\\\"dist\\\"))\\n  );\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIn order to use it with Natron we need to install the `vinyl-fs` package or simple use the `natron-vinyl` module which includes some Vinyl related utilities like the file system adapter and the file transformer.\n\nSo the Natronfile would look similar to this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import {src, dest} from \\\"natron-vinyl\\\";\\nimport uglify from \\\"gulp-uglify\\\";\\n\\nexport function minify() {\\n  return (src(\\\"src/**/*.js\\\")\\n    .pipe(uglify())\\n    .pipe(dest(\\\"dist\\\"))\\n  );\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n## `gulp-debug`\n\nWith `gulp-debug` files that are currently in the transformation pipeline can be listed for debugging purposes. The usage with Natron is quite similiar:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import {src, dest} from \\\"natron-vinyl\\\";\\nimport debug from \\\"gulp-debug\\\";\\n\\nexport function doSomething() {\\n  return (src(\\\"src/**/*.js\\\")\\n    .pipe(debug())\\n    .pipe(dest(\\\"dist\\\"))\\n  );\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nHowever a more lightweight approach to list all files in the pipeline would be to create a simple transformer:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import {src, dest, transformer} from \\\"natron-vinyl\\\";\\n\\nlet FileLogger = transformer((file) => {\\n  console.log(file.path);\\n  return file;\\n});\\n\\nexport function doSomething() {\\n  return (src(\\\"src/**/*.js\\\")\\n    .pipe(new FileLogger())\\n    .pipe(dest(\\\"dist\\\"))\\n  );\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","updates":[],"order":2,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"5619a6f7d4b0a90d004c6050","__v":8,"user":"5617a0a4a410c90d00c612f4","createdAt":"2015-10-11T00:01:59.017Z","githubsync":"","version":{"version":"0.2","version_clean":"0.2.0","codename":"Orange Arrow","is_stable":true,"is_beta":true,"is_hidden":false,"is_deprecated":false,"categories":["5619a39a13874c0d007038ea","5619a39a13874c0d007038eb","5619a39a13874c0d007038ec","5619a39a13874c0d007038ed","5651062a3b4d113500ed22d1","5651c89a852cfb3500a69830","565505ad055aa40d006f0ca7","56c219d8d3199a0d00694be6"],"_id":"5619a39913874c0d007038e9","createdAt":"2015-10-10T23:47:37.777Z","project":"5617a1f5a410c90d00c612f5","__v":5,"releaseDate":"2015-10-10T23:47:37.777Z"},"category":{"sync":{"isSync":false,"url":""},"pages":["5619a6e1d4b0a90d004c604e","5619a6f7d4b0a90d004c6050"],"title":"Basics","slug":"basics","order":2,"from_sync":false,"reference":false,"_id":"5619a39a13874c0d007038ed","version":"5619a39913874c0d007038e9","__v":2,"project":"5617a1f5a410c90d00c612f5","createdAt":"2015-10-10T22:45:07.366Z"},"project":"5617a1f5a410c90d00c612f5"}

General

CLI

Basics

Examples

Details

Natron Modules

Other Modules

Using a Gulp Plugin

Natron should be compatible with the majority of Gulp plugins out there, since it's also using Vinyl for file transformations. [block:api-header] { "type": "basic", "title": "Examples" } [/block] ## `gulp-uglify` The following snippet shows how the plugin is supposed to be used with Gulp. [block:code] { "codes": [ { "code": "var gulp = require(\"gulp\");\nvar uglify = require(\"gulp-uglify\");\n \ngulp.task(\"minify\", function() {\n return (gulp.src(\"src/**/*.js\")\n .pipe(uglify())\n .pipe(gulp.dest(\"dist\"))\n );\n});", "language": "javascript" } ] } [/block] In order to use it with Natron we need to install the `vinyl-fs` package or simple use the `natron-vinyl` module which includes some Vinyl related utilities like the file system adapter and the file transformer. So the Natronfile would look similar to this: [block:code] { "codes": [ { "code": "import {src, dest} from \"natron-vinyl\";\nimport uglify from \"gulp-uglify\";\n\nexport function minify() {\n return (src(\"src/**/*.js\")\n .pipe(uglify())\n .pipe(dest(\"dist\"))\n );\n}", "language": "javascript" } ] } [/block] ## `gulp-debug` With `gulp-debug` files that are currently in the transformation pipeline can be listed for debugging purposes. The usage with Natron is quite similiar: [block:code] { "codes": [ { "code": "import {src, dest} from \"natron-vinyl\";\nimport debug from \"gulp-debug\";\n\nexport function doSomething() {\n return (src(\"src/**/*.js\")\n .pipe(debug())\n .pipe(dest(\"dist\"))\n );\n}", "language": "javascript" } ] } [/block] However a more lightweight approach to list all files in the pipeline would be to create a simple transformer: [block:code] { "codes": [ { "code": "import {src, dest, transformer} from \"natron-vinyl\";\n\nlet FileLogger = transformer((file) => {\n console.log(file.path);\n return file;\n});\n\nexport function doSomething() {\n return (src(\"src/**/*.js\")\n .pipe(new FileLogger())\n .pipe(dest(\"dist\"))\n );\n}", "language": "javascript" } ] } [/block]