{"_id":"5619a6f7d4b0a90d004c6050","__v":8,"user":"5617a0a4a410c90d00c612f4","githubsync":"","version":{"_id":"5619a39913874c0d007038e9","project":"5617a1f5a410c90d00c612f5","__v":5,"createdAt":"2015-10-10T23:47:37.777Z","releaseDate":"2015-10-10T23:47:37.777Z","categories":["5619a39a13874c0d007038ea","5619a39a13874c0d007038eb","5619a39a13874c0d007038ec","5619a39a13874c0d007038ed","5651062a3b4d113500ed22d1","5651c89a852cfb3500a69830","565505ad055aa40d006f0ca7","56c219d8d3199a0d00694be6"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"Orange Arrow","version_clean":"0.2.0","version":"0.2"},"category":{"_id":"5619a39a13874c0d007038ed","version":"5619a39913874c0d007038e9","__v":2,"pages":["5619a6e1d4b0a90d004c604e","5619a6f7d4b0a90d004c6050"],"project":"5617a1f5a410c90d00c612f5","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-10-10T22:45:07.366Z","from_sync":false,"order":2,"slug":"basics","title":"Basics"},"project":"5617a1f5a410c90d00c612f5","metadata":{"title":"","description":"","image":[]},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-10-11T00:01:59.017Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"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]","excerpt":"","slug":"using-a-gulp-plugin","type":"basic","title":"Using a Gulp Plugin"}