{"id":409,"date":"2020-09-16T12:06:00","date_gmt":"2020-09-16T16:06:00","guid":{"rendered":"https:\/\/molecularsciences.org\/content\/?p=409"},"modified":"2024-02-08T08:20:18","modified_gmt":"2024-02-08T13:20:18","slug":"getting-started-with-gulp-js","status":"publish","type":"post","link":"https:\/\/molecularsciences.org\/content\/getting-started-with-gulp-js\/","title":{"rendered":"Getting started with gulp.js"},"content":{"rendered":"\n

Gulp.js<\/a> is a great tool for building and enhancing workflows. It is free and open source. It helps you automate repetitive tasks such as automating CSS creation and unit testing. In this article, I will walk you through many simple examples of using Gulp.js but first let’s look at the gulp API which only consists of 4 functions!<\/p>\n\n\n\n

gulp API<\/h3>\n\n\n\n

gulp.dest<\/strong> is where you define you output file. This is where you will store output from a specific gulp task.<\/p>\n\n\n\n

gulp.dest('\/output\/filepath');<\/code><\/pre>\n\n\n\n
gulp.src<\/strong> is where you define you input file(s). The content of these file(s) will be passed to a specific gulp task as input.<\/p>\n\n\n\n
gulp.dest('\/input\/filepath');<\/code><\/pre>\n\n\n\n
gulp.task<\/strong> is where you define your tasks.<\/p>\n\n\n\n
gulp.task(my'task', function() {\n  \/\/ some code\n});<\/code><\/pre>\n\n\n\n
gulp.watch<\/strong> simply returns a eventemitter that triggers when something you are watching it modified.<\/p>\n\n\n\n
gulp.watch('myfile.less', ['lesstocss']);<\/code><\/pre>\n\n\n\n
This gulp command is watching the file myfile.less. When you save a change in myfile.less, it will call the function lesstocss which will then rebuild CSS files from myfile.less.<\/p>\n\n\n\n
See gulp API documentation<\/a> for more information.<\/p>\n\n\n\n
Compiling Less and Sass<\/h3>\n\n\n\n
CSS is easy when the CSS file is small. A large CSS file is painful to read and modify. LESS and SASS are CSS preprocessors. These languages allow you to write functions which then get compiled in CSS code. The following gulp example shows how to automate LESS to CSS conversion. First we install gulp-less<\/a> plugin.<\/p>\n\n\n\n
$ npm install --save-dev gulp-less<\/code><\/pre>\n\n\n\n
gulp code:<\/p>\n\n\n\n
\/\/ include plugins\nvar gulp = require('gulp');\nvar gless = require(\"gulp-less\");\n\n\/\/ compile less to css\ngulp.task('lesstocss', function () {\n  gulp.src('less\/test.less').pipe(gless()).pipe(gulp.dest('css'));\n});<\/code><\/pre>\n\n\n\n
Change the value of gulp.src() to the location of your LESS file. Change the location of gulp.dest() to the location of your CSS directory. To run<\/p>\n\n\n\n
$ gulp lesstocss<\/code><\/pre>\n\n\n\n
Note that the code is very simple. First you download the relevant plugin. Then require it. We create a new function, lesstocss. The function simply takes the LESS file, pipes it to gulp-less and then pipes the output to the CSS directory. In a similar way, we can keep adding functions to automate more tasks. Following example shows how to compile SASS.<\/p>\n\n\n\n
First we install gulp-sass<\/a> plugin.<\/p>\n\n\n\n
$ npm install --save-dev gulp-sass<\/code><\/pre>\n\n\n\n
gulp code:<\/p>\n\n\n\n
\/\/ include plugins\nvar gulp = require('gulp');\nvar gsass = require(\"gulp-sass\");\n\n\/\/ compile sass to css\ngulp.task('sasstocss', function () {\n  gulp.src('.\/sass\/filepath').pipe(gsass()).pipe(gulp.dest('cssdirectory'));\n});<\/code><\/pre>\n\n\n\n
Change the value of gulp.src() to the location of your LESS file. Change the location of gulp.dest() to the location of your CSS directory. To run<\/p>\n\n\n\n
$ gulp sasstocss<\/code><\/pre>\n\n\n\n
The following section shows how to automate three tasks in one function.<\/p>\n\n\n\n
Minifying code<\/h3>\n\n\n\n
Minification refers to removing all unnecessary code such as whitespace, tab, \\n, etc. I don’t like minified code but it you choose to minify, following gulp code will help you. First, install the necessary plugins gulp-minify-css<\/a>, gulp-minify-html<\/a>, and gulp-uglify<\/a><\/p>\n\n\n\n
$ npm install --save-dev gulp-minify-css gulp-minify-html gulp-minify-js<\/code><\/pre>\n\n\n\n
gulp code:<\/p>\n\n\n\n
\/\/ include plugins\nvar gulp = require('gulp');\nvar gmcss = require(\"gulp-minify-css\");\nvar gmhtml = require(\"gulp-minify-html\");\nvar gmjs = require(\"gulp-uglify\");\n\n\/\/ minify code\ngulp.task('minify-code', function () {\n  gulp.src('.\/css\/filepath').pipe(gmcss()).pipe(gulp.dest('CSS\/Destination'));\n  gulp.src('.\/htmldirectory\/*.html').pipe(gmhtml()).pipe(gulp.dest('HTML\/Destination'));\n  gulp.src('.\/scripts\/*.js').pipe(gmjs()).pipe(gulp.dest('JS\/Destination'));\n});<\/code><\/pre>\n\n\n\n
You need to change the values of gulp.src and gulp.dest to valid paths within your environment.. To run the code, simply type the following in command line:<\/p>\n\n\n\n
$ gulp minify-code<\/code><\/pre>\n\n\n\n
Compile CoffeeScript<\/h3>\n\n\n\n
CoffeeScript is a small language which compiles into JavaScript. It is cleaner to and more readable than JavaScript. First, install the necessary plugin gulp-coffee<\/a><\/p>\n\n\n\n
$ npm install --save-dev gulp-coffee<\/code><\/pre>\n\n\n\n
gulp code:<\/p>\n\n\n\n
\/\/ include plugins\nvar gulp = require('gulp'), gcoffee = require('gulp-coffee');\n\n\/\/ compile coffee\ngulp.task('compile-coffee', function () {\n  gulp.src('coffee\/file').pipe(gcoffee()).pipe(gulp.dest('coffee\/output\/file'));\n});<\/code><\/pre>\n\n\n\n
You need to change the values of gulp.src and gulp.dest to valid paths within your environment.. To run the code, simply type the following in command line:<\/p>\n\n\n\n
$ gulp compile-coffee<\/code><\/pre>\n\n\n\n
TypeScript is gaining more popularity than CoffeeScript. Automating TypeScript compilation require a few extra steps. I will cover it in a separate article.<\/p>\n","protected":false},"excerpt":{"rendered":"
Gulp.js is a great tool for building and enhancing workflows. It is free and open source. It helps you automate repetitive tasks such as automating CSS creation and unit testing. In this article, I will walk you through many simple examples of using Gulp.js but first let’s look at the gulp API which only consists of […]<\/p>\n","protected":false},"author":1,"featured_media":410,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[185],"tags":[54],"class_list":["post-409","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript"],"_links":{"self":[{"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/posts\/409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/comments?post=409"}],"version-history":[{"count":1,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/posts\/409\/revisions"}],"predecessor-version":[{"id":411,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/posts\/409\/revisions\/411"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/media\/410"}],"wp:attachment":[{"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/media?parent=409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/categories?post=409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/molecularsciences.org\/content\/wp-json\/wp\/v2\/tags?post=409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}