Now let’s install Gulp. To install Gulp, run the following command in the terminal –<\/p>\n\n\n\n
npm install -g gulp<\/code><\/pre>\n\n\n\nThis will install Gulp globally and we can use Gulp in all projects.<\/p>\n\n\n\n
2. Writing Gulp Task:<\/strong><\/p>\n\n\n\nCreate a file gulpfile.js<\/em><\/strong> in your project root directory. We will write all gulp task automation code in this file. Let’s install few more packages gulp-uglify<\/code> <\/strong>and gulp-rename <\/code><\/strong> which would be used in the uglifying process. Navigate to project to directory, open a terminal and run the following commands. This time we are installing the packages locally in our project.<\/p>\n\n\n\nnpm install gulp-uglify\nnpm install gulp-rename<\/code><\/pre>\n\n\n\nOpen gulpfile.js and add the following code. <\/p>\n\n\n\n
\/\/ Gulp version 4\nvar gulp = require(\"gulp\");\nvar uglify = require(\"gulp-uglify\");\nvar rename = require(\"gulp-rename\");\nconst { series } = require(\"gulp\");\n\n\/* \nDefine gulp task.\nThis task will uglify all js files in js directory \nand create uglified or minified files with min.js extension inside the \ndist\/js directory.\n*\/\n \ngulp.task( \"uglify\", gulp.series(async function () {\n gulp\n\t.src(\"js\/*.js\")\n\t.pipe(uglify())\n\t.pipe(\n\t rename(function (path) {\n\t path.extname = \".min.js\";\n\t })\n\t)\n\t.pipe(gulp.dest(\".\/dist\/js\/\"));\n })\n);\n\n\/\/ Code to run gulp tasks\ngulp.task(\n\t\"default\",\n\tgulp.series(\"uglify\")\n);<\/code><\/pre>\n\n\n\n3. Running Gulp Task:<\/strong><\/p>\n\n\n\nNow let’s test our code. Type following command in the terminal (I am assuming that your terminal is pointing to project root directory).<\/p>\n\n\n\n
gulp uglify<\/code><\/pre>\n\n\n\nThis command executes all gulp tasks defined in the gulpfile.js<\/em><\/strong> file. Check the dist <\/strong>folder which was just created by gulp. You will find all uglified js files with .min.js<\/strong> extension.<\/p>\n\n\n\nImportant Update:<\/strong><\/p>\n\n\n\nIf one or more js files (to be uglified) contain JavaScript ES6 code, then uglify()<\/strong><\/code> method will fail and may throw following Unhandled ‘error’ event<\/strong> exception. <\/p>\n\n\n\nevents.js:174\n throw er; \/\/ Unhandled 'error' event\n ^\nGulpUglifyError: unable to minify JavaScript<\/code><\/pre>\n\n\n\n You can fix this issue by replacing the gulp-uglify<\/code><\/strong> package with gulp-uglify-es<\/code><\/strong>. Install this package and replace require(\"gulp-uglify\")<\/code><\/strong> with require('gulp-uglify-es').default<\/strong><\/code> in the gulp code.<\/p>\n\n\n\nnpm install gulp-uglify-es<\/code><\/pre>\n\n\n\n In the gulpfile.js<\/em><\/strong> file, do following changes: <\/p>\n\n\n\n\/\/ var uglify = require(\"gulp-uglify\");\nvar uglify = require('gulp-uglify-es').default;<\/code><\/pre>\n\n\n\n That’s all. This should fix the issue. <\/p>\n","protected":false},"excerpt":{"rendered":"
Gulp is a JavaScript (JS) library to automate slow, time consuming repetitive workflows such as minifying or uglifying JS and CSS files, copying files to distribution directory and so on. [ … ]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[52,2,53,59],"tags":[169,170,54,80,79,76,78,81,56,57,77,58],"class_list":["post-79","post","type-post","status-publish","format-standard","hentry","category-gulp","category-javascript","category-nodejs","category-npm","tag-gulp-4-gulpfile-js","tag-gulp-4-tasks","tag-gulp-4-tutorial","tag-gulp-min-js","tag-gulp-rename","tag-gulp-uglify","tag-gulp-series","tag-gulp-src","tag-minify-js-files","tag-minify-js-npm","tag-npm-gulp","tag-uglify-js-example","list-style-post"],"_links":{"self":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/79","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/comments?post=79"}],"version-history":[{"count":40,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/79\/revisions"}],"predecessor-version":[{"id":465,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/79\/revisions\/465"}],"wp:attachment":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/media?parent=79"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/categories?post=79"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/tags?post=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Installing](\"https:\/\/datatype.co.in\/blog\/wp-content\/uploads\/2020\/07\/image-1.png\")
<\/figure>\n\n\n\n