Whilst package manager’s such as yarn and npm make things pretty easy, sometimes we’ll want to extend our build workflow or the likes. Yarn allows the use of scripts, but another alternative would be a build tool such as Gulp. Ofcourse we could also write scripts in bash or Powershell etc. but Gulp offers a DSL in a similar way to tools such as Cake, Nant etc. to extend our various development and build workflows.<\/p>\n
Getting started<\/strong><\/p>\n A Gulp file is simply a JavaScript file (.js) in which we have the lines<\/p>\n these include the gulp functions.<\/p>\n To create a gulp task we include the following<\/p>\n The string yarn-production<\/em> is the task name, i.e. we can run the following command to execute our task<\/p>\n Api’s<\/strong><\/p>\n gulp.task<\/em><\/p>\n As we’ve seen gulp.task<\/em> is one of the gulp API’s which defines a task along with the task name, which can be executed via the gulp command line, followed by the function to run for that task.<\/p>\n gulp.src<\/em><\/p>\n The src API allows us to declare an array of filenames\/globs to be passed into the gulp pipeline, for example<\/p>\n This command basically creates an array of files etc. that will be used in the subsequent pipeline.<\/p>\n gulp.dest<\/em><\/p>\n We’ve got a src, so obviously we need a dest which denotes (as you’d expect) where the output from the pipeline goes to. So here’s an example which copies some files to a production folder<\/p>\n\r\nvar gulp = require('gulp');\r\n\/\/ if we want to include yarn support in gulp\r\nvar yarn = require('gulp-yarn');\r\n<\/pre>\n\r\ngulp.task('yarn-production', function() {\r\n \/\/ return from the function()\r\n});\r\n<\/pre>\n\r\ngulp yarn-production\r\n<\/pre>\n
\r\ngulp.task('yarn-production', function() {\r\n return gulp.src(['.\/package.json', '.\/yarn.lock'])\r\n \/\/ pipeline\r\n );\r\n});\r\n<\/pre>\n\r\ngulp.task('production', function() {\r\n return gulp.src(['.\/package.json', '.\/yarn.lock'])\r\n .pipe(gulp.dest('production\/'));\r\n});\r\n<\/pre>\n